Find the Sign in button by role
beginner Locators Challenge 1 of 22
The login page has several buttons whose text includes “Sign in”: a help link styled as a button, two single sign-on buttons and a hidden “session expired” modal. Write one Playwright locator that resolves to the Sign in submit button of the email and password form.
Requirements
- Use
page.getByRole('button', ...)with the button’s accessible name. - Resolve to exactly one element: the form’s submit button.
- Do not use
.nth(),.first()or.last(). - Do not use
page.locator()with CSS or XPath.
Expected output
Resolves to exactly 1 element: the "Sign in" submit button inside the login form.
Checks (4)
- ○Resolves to exactly the intended element(s)
- ○Uses getByRole('button', ...)
- ○Does not rely on position (nth, first or last)
- ○Does not fall back to a CSS or XPath locator
example.spec.tsLocator engine · not a real Playwright run
Ctrl/⌘ + Enter to check locator · your code is saved in this browser
Results
Check your locator to see which elements it resolves to.
Page under test
matches are outlined in greenView page HTML
<header class="topbar">
<a href="/signup">Sign up</a>
<button type="button" class="link">Sign in help</button>
</header>
<main>
<h1>Welcome back</h1>
<form id="login" action="/session" method="post">
<label for="email">Email</label>
<input id="email" type="email" name="email">
<label for="password">Password</label>
<input id="password" type="password" name="password">
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<p class="divider">or</p>
<button type="button" class="btn btn-sso">Sign in with Google</button>
<button type="button" class="btn btn-sso">Sign in with SSO</button>
<div class="modal" hidden>
<p>Your session expired.</p>
<button type="button">Sign in</button>
</div>
</main>