How do I locate an input element by its value using Playwright when the value is not visible in the DOM?

Answer

To locate an input element by its value when it's not visible in the DOM, you can use the Locator API in @playwright/test. Here are some methods to find elements based on different attributes:

Using getByRole()

If the input element has a specific role attribute or aria-label attribute, you can use getByRole(). For example, to locate an element with role="search":

import { test } from '@playwright/test';

test('locate element by role', async ({ page }) => {
  await page.goto('https://ray.run/');
  const searchInput = await page.getByRole('search');
});

Using getByPlaceholder()

To locate input elements by the placeholder text, use getByPlaceholder(). For example, to find an email input field with a placeholder "Enter your email":

import { test } from '@playwright/test';

test('locate element by placeholder', async ({ page }) => {
  await page.goto('https://ray.run/');
  const emailInput = await page.getByPlaceholder('Enter your email');
});

If these methods don't work for your use case, you can use JavaScript to interact with the page directly and retrieve the value of the hidden input field. However, it's recommended to try using the Locator API methods first.