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:
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.
This code fills an input element with the
data-testid attribute set to "username" with a specified value.
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.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email firstname.lastname@example.org.