How do I locate an input by its value in Playwright when multiple inputs have the same data-test selector and label?

Answer

Sure, you can locate an input by its value with @playwright/test, even when multiple inputs share the same data-test selector and label.

Here's how you can do it:

Using data-testid Attribute

Playwright supports shorthand for selecting elements using certain attributes, including data-testid. You can use the page.locator() method with the attribute selector to find the desired input element.

await page.locator('data-testid=username').fill('value');

This code fills an input element with the data-testid attribute set to "username" with a specified value.

Chaining Selectors

Playwright recommends chaining locators instead of relying solely on data-test selectors. Selectors can be combined with the >> token (selector1 >> selector2 >> selectors3). Each subsequent selector is queried relative to the previous one's result. This helps you locate specific elements even when they have similar attributes or labels.

await page.locator('css=article >> css=.bar > .baz >> css=input[value="example"]').click();

In this example, we first select an article element, then find a descendant element with class "bar" and child class "baz", and finally locate an input element with a specific value ("example").

By using these techniques, you can effectively locate an input by its value even in scenarios where multiple inputs have the same data-test selector and label.

Remember, these examples are based on the provided context. If you have additional details or requirements specific to your use case, please provide more information for further assistance.