To locate an element by input value in @playwright/test, you can use various locator methods such as getByRole
, getByLabel
, and getByPlaceholder
.
getByRole
getByRole
allows you to find elements by their ARIA role, attributes, and accessible name. Input elements of the type button and submit are matched by their value instead of the text content. For example:
import { test, expect } from '@playwright/test';
test('locate element by input value', async ({ page }) => {
await page.goto('https://ray.run/');
const loginButton = page.locator('input[role="button"][value="Log in"]');
await loginButton.click();
});
getByLabel
getByLabel
locates input elements by the text of the associated <label>
or aria-labelledby
element, or by the aria-label
attribute. For instance:
import { test, expect } from '@playwright/test';
test('locate element by label', async ({ page }) => {
await page.goto('https://ray.run/');
const usernameInput = page.locator('input[aria-label="Username"]');
await usernameInput.fill('your-username');
});
getByPlaceholder
getByPlaceholder
locates input elements based on their placeholder text. You can fill an input after locating it using its placeholder text:
import { test, expect } from '@playwright/test';
test('locate element by placeholder', async ({ page }) => {
await page.goto('https://ray.run/');
const passwordInput = page.locator('input[placeholder="Password"]');
await passwordInput.fill('your-password');
});
Remember to use resilient locators that don't depend on specific CSS classes or XPath selectors for more reliable tests over time.
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 [email protected].