Rayrun

How do I locate input elements using their values or attributes in Playwright?

Answer

To locate an element by input value in @playwright/test, you can use various locator methods such as getByRole, getByLabel, and getByPlaceholder.

Using 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();
});

Using 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');
});

Using 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.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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].