Lesson · 18 min

Labels, text, and test ids

Other ways to find an element

getByRole is the first choice, but some elements are easier to find in another way. Playwright has a locator for each way. Use the first one in this list that works.

Locator	Finds	Use it for
`getByRole`	The role and the name	Buttons, links, headings, and most things
`getByLabel`	The text of a `<label>`	Form fields
`getByPlaceholder`	The `placeholder` text	A field that has no label
`getByText`	The text inside an element	Messages, paragraphs, and other text
`getByTestId`	The `data-testid` attribute	An element that has no good role, label, or text

getByLabel('Email') finds the field that belongs to the label Email. It works because the label and the field are linked. A form that has this link also works for people who use a screen reader.

getByText matches the text anywhere inside the element, and it does not care about capital letters. To match the whole text, write getByText('Welcome', { exact: true }).

Test ids

Some elements have no role, no label, and no stable text. A developer can add an attribute to such an element on purpose, so that tests can find it:

<p data-testid="remember">You will stay signed in on this device.</p>

page.getByTestId('remember')

A test id does not change when the text or the layout changes. That is its strength. Its weakness is that no user can see it, so a test that uses a test id does not check what the user sees. Use it when the other locators do not work.

Regular expressions

Any text argument can be a regular expression. This finds a heading that starts with Welcome:

page.getByRole('heading', { name: /^Welcome/ })

The sign-in page

The sample app on the right is a sign-in page. It is at /login, and page.goto('/login') opens it. The sample account has the email ada@example.com and the password correct-horse-battery. When the sign-in works, the app opens /account.

Your turn

Write four tests. Each test opens /login first.

Tasks

4 to do

Task 1, not checked yet. Add a test named signs in. Open /login. Fill the field with the label Email and the field with the label Password, using getByLabel. Click the button Sign in. Check that the heading Welcome, Ada is visible.
Task 2, not checked yet. Add a test named fills the email by its placeholder. Open /login. Fill the field that has the placeholder you@example.com, using getByPlaceholder. Then check that the field with the label Email has the value ada@example.com.
Task 3, not checked yet. Add a test named remembers the user. Sign in as before, but first tick the box Remember me with getByLabel('Remember me').check(). On the account page, find the note by its test id remember with getByTestId, and check that it is visible.
Task 4, not checked yet. Add a test named says who signed in. Sign in. Then find the text You are signed in as with getByText, and check that it contains ada@example.com.

Task 1 of 4

Add a test named signs in. Open /login. Fill the field with the label Email and the field with the label Password, using getByLabel. Click the button Sign in. Check that the heading Welcome, Ada is visible.

All tasks