FrameLocator
FrameLocator represents a view to the iframe on the page. It captures the logic sufficient to retrieve the iframe and locate elements in that iframe. FrameLocator can be created with either Page#frame_locator or Locator#frame_locator method.
locator = page.frame_locator("my-frame").get_by_text("Submit")
locator.click
Strictness
Frame locators are strict. This means that all operations on frame locators will throw if more than one element matches a given selector.
# Throws if there are several frames in DOM:
page.frame_locator('.result-frame').get_by_role('button').click
# Works because we explicitly tell locator to pick the first frame:
page.frame_locator('.result-frame').first.get_by_role('button').click
Converting Locator to FrameLocator
If you have a Locator object pointing to an iframe it can be converted to FrameLocator using :scope CSS selector:
frame_locator = locator.frame_locator(':scope')
first
def first
Returns locator to the first matching frame.
frame_locator
def frame_locator(selector)
When working with iframes, you can create a frame locator that will enter the iframe and allow selecting elements in that iframe.
get_by_alt_text
def get_by_alt_text(text, exact: nil)
Allows locating elements by their alt text.
Usage
For example, this method will find the image by alt text "Playwright logo":
<img alt='Playwright logo'>
page.get_by_alt_text("Playwright logo").click
get_by_label
def get_by_label(text, exact: nil)
Allows locating input elements by the text of the associated <label> or aria-labelledby element, or by the aria-label attribute.
Usage
For example, this method will find inputs by label "Username" and "Password" in the following DOM:
<input aria-label="Username">
<label for="password-input">Password:</label>
<input id="password-input">
page.get_by_label("Username").fill("john")
page.get_by_label("Password").fill("secret")
get_by_placeholder
def get_by_placeholder(text, exact: nil)
Allows locating input elements by the placeholder text.
Usage
For example, consider the following DOM structure.
<input type="email" placeholder="name@example.com" />
You can fill the input after locating it by the placeholder text:
page.get_by_placeholder("name@example.com").fill("playwright@microsoft.com")
get_by_role
def get_by_role(
role,
checked: nil,
disabled: nil,
exact: nil,
expanded: nil,
includeHidden: nil,
level: nil,
name: nil,
pressed: nil,
selected: nil)
Allows locating elements by their ARIA role, ARIA attributes and accessible name.
Usage
Consider the following DOM structure.
<h3>Sign up</h3>
<label>
<input type="checkbox" /> Subscribe
</label>
<br/>
<button>Submit</button>
You can locate each element by it's implicit role:
page.get_by_role("heading", name: "Sign up").visible? # => true
page.get_by_role("checkbox", name: "Subscribe").check
page.get_by_role("button", name: /submit/i).click
Details
Role selector does not replace accessibility audits and conformance tests, but rather gives early feedback about the ARIA guidelines.
Many html elements have an implicitly defined role that is recognized by the role selector. You can find all the supported roles here. ARIA guidelines do not recommend duplicating implicit roles and attributes by setting role and/or aria-* attributes to default values.
get_by_test_id
def get_by_test_id(testId)
Locate element by the test id.
Usage
Consider the following DOM structure.
<button data-testid="directions">Itinéraire</button>
You can locate the element by it's test id:
page.get_by_test_id("directions").click
Details
By default, the data-testid attribute is used as a test id. Use Selectors#set_test_id_attribute to configure a different test id attribute if necessary.
get_by_text
def get_by_text(text, exact: nil)
Allows locating elements that contain given text.
See also Locator#filter that allows to match by another criteria, like an accessible role, and then filter by the text content.
Usage
Consider the following DOM structure:
<div>Hello <span>world</span></div>
<div>Hello</div>
You can locate by text substring, exact string, or a regular expression:
page.content = <<~HTML
<div>Hello <span>world</span></div>
<div>Hello</div>
HTML
# Matches <span>
locator = page.get_by_text("world")
expect(locator.evaluate('e => e.outerHTML')).to eq('<span>world</span>')
# Matches first <div>
locator = page.get_by_text("Hello world")
expect(locator.evaluate('e => e.outerHTML')).to eq('<div>Hello <span>world</span></div>')
# Matches second <div>
locator = page.get_by_text("Hello", exact: true)
expect(locator.evaluate('e => e.outerHTML')).to eq('<div>Hello</div>')
# Matches both <div>s
locator = page.get_by_text(/Hello/)
expect(locator.count).to eq(2)
expect(locator.first.evaluate('e => e.outerHTML')).to eq('<div>Hello <span>world</span></div>')
expect(locator.last.evaluate('e => e.outerHTML')).to eq('<div>Hello</div>')
# Matches second <div>
locator = page.get_by_text(/^hello$/i)
expect(locator.evaluate('e => e.outerHTML')).to eq('<div>Hello</div>')
Details
Matching by text always normalizes whitespace, even with exact match. For example, it turns multiple spaces into one, turns line breaks into spaces and ignores leading and trailing whitespace.
Input elements of the type button and submit are matched by their value instead of the text content. For example, locating by text "Log in" matches <input type=button value="Log in">.
get_by_title
def get_by_title(text, exact: nil)
Allows locating elements by their title attribute.
Usage
Consider the following DOM structure.
<span title='Issues count'>25 issues</span>
You can check the issues count after locating it by the title text:
page.get_by_title("Issues count").text_content # => "25 issues"
last
def last
Returns locator to the last matching frame.
locator
def locator(
selectorOrLocator,
has: nil,
hasNot: nil,
hasNotText: nil,
hasText: nil)
The method finds an element matching the specified selector in the locator's subtree. It also accepts filter options, similar to Locator#filter method.
nth
def nth(index)
Returns locator to the n-th matching frame. It's zero based, nth(0) selects the first frame.