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 locator.content_frame, page.frame_locator() or locator.frame_locator() method.
- Sync
- Async
locator = page.locator("my-frame").content_frame.get_by_text("Submit")
locator.click()
locator = page.locator("#my-frame").content_frame.get_by_text("Submit")
await 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.
- Sync
- Async
# Throws if there are several frames in DOM:
page.locator('.result-frame').content_frame.get_by_role('button').click()
# Works because we explicitly tell locator to pick the first frame:
page.locator('.result-frame').first.content_frame.get_by_role('button').click()
# Throws if there are several frames in DOM:
await page.locator('.result-frame').content_frame.get_by_role('button').click()
# Works because we explicitly tell locator to pick the first frame:
await page.locator('.result-frame').first.content_frame.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 locator.content_frame.
Converting FrameLocator to Locator
If you have a FrameLocator object it can be converted to Locator pointing to the same iframe
using frame_locator.owner.
Methods
frame_locator
Added in: v1.17When working with iframes, you can create a frame locator that will enter the iframe and allow selecting elements in that iframe.
Usage
frame_locator.frame_locator(selector)
Arguments
Returns
get_by_alt_text
Added in: v1.27Allows locating elements by their alt text.
Usage
For example, this method will find the image by alt text "Playwright logo":
<img alt='Playwright logo'>
- Sync
- Async
page.get_by_alt_text("Playwright logo").click()
await page.get_by_alt_text("Playwright logo").click()
Arguments
-
Text to locate the element for.
-
Whether to find an exact match: case-sensitive and whole-string. Default to false. Ignored when locating by a regular expression. Note that exact match still trims whitespace.
Returns
get_by_label
Added in: v1.27Allows 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">
- Sync
- Async
page.get_by_label("Username").fill("john")
page.get_by_label("Password").fill("secret")
await page.get_by_label("Username").fill("john")
await page.get_by_label("Password").fill("secret")
Arguments
-
Text to locate the element for.
-
Whether to find an exact match: case-sensitive and whole-string. Default to false. Ignored when locating by a regular expression. Note that exact match still trims whitespace.
Returns
get_by_placeholder
Added in: v1.27Allows 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:
- Sync
- Async
page.get_by_placeholder("name@example.com").fill("playwright@microsoft.com")
await page.get_by_placeholder("name@example.com").fill("playwright@microsoft.com")
Arguments
-
Text to locate the element for.
-
Whether to find an exact match: case-sensitive and whole-string. Default to false. Ignored when locating by a regular expression. Note that exact match still trims whitespace.
Returns
get_by_role
Added in: v1.27Allows 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:
- Sync
- Async
expect(page.get_by_role("heading", name="Sign up")).to_be_visible()
page.get_by_role("checkbox", name="Subscribe").check()
page.get_by_role("button", name=re.compile("submit", re.IGNORECASE)).click()
await expect(page.get_by_role("heading", name="Sign up")).to_be_visible()
await page.get_by_role("checkbox", name="Subscribe").check()
await page.get_by_role("button", name=re.compile("submit", re.IGNORECASE)).click()
Arguments
-
role
"alert" | "alertdialog" | "application" | "article" | "banner" | "blockquote" | "button" | "caption" | "cell" | "checkbox" | "code" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "deletion" | "dialog" | "directory" | "document" | "emphasis" | "feed" | "figure" | "form" | "generic" | "grid" | "gridcell" | "group" | "heading" | "img" | "insertion" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "meter" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "paragraph" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "strong" | "subscript" | "superscript" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "time" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem"#Required aria role.
-
An attribute that is usually set by
aria-checked
or native<input type=checkbox>
controls.Learn more about
aria-checked
. -
An attribute that is usually set by
aria-disabled
ordisabled
.noteUnlike most other attributes,
disabled
is inherited through the DOM hierarchy. Learn more aboutaria-disabled
. -
exact
bool (optional) Added in: v1.28#Whether name is matched exactly: case-sensitive and whole-string. Defaults to false. Ignored when name is a regular expression. Note that exact match still trims whitespace.
-
An attribute that is usually set by
aria-expanded
.Learn more about
aria-expanded
. -
include_hidden
bool (optional)#Option that controls whether hidden elements are matched. By default, only non-hidden elements, as defined by ARIA, are matched by role selector.
Learn more about
aria-hidden
. -
A number attribute that is usually present for roles
heading
,listitem
,row
,treeitem
, with default values for<h1>-<h6>
elements.Learn more about
aria-level
. -
name
str | Pattern (optional)#Option to match the accessible name. By default, matching is case-insensitive and searches for a substring, use exact to control this behavior.
Learn more about accessible name.
-
An attribute that is usually set by
aria-pressed
.Learn more about
aria-pressed
. -
An attribute that is usually set by
aria-selected
.Learn more about
aria-selected
.
Returns
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
Added in: v1.27Locate 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:
- Sync
- Async
page.get_by_test_id("directions").click()
await page.get_by_test_id("directions").click()
Arguments
Returns
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
Added in: v1.27Allows 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:
- Sync
- Async
# Matches <span>
page.get_by_text("world")
# Matches first <div>
page.get_by_text("Hello world")
# Matches second <div>
page.get_by_text("Hello", exact=True)
# Matches both <div>s
page.get_by_text(re.compile("Hello"))
# Matches second <div>
page.get_by_text(re.compile("^hello$", re.IGNORECASE))
# Matches <span>
page.get_by_text("world")
# Matches first <div>
page.get_by_text("Hello world")
# Matches second <div>
page.get_by_text("Hello", exact=True)
# Matches both <div>s
page.get_by_text(re.compile("Hello"))
# Matches second <div>
page.get_by_text(re.compile("^hello$", re.IGNORECASE))
Arguments
-
Text to locate the element for.
-
Whether to find an exact match: case-sensitive and whole-string. Default to false. Ignored when locating by a regular expression. Note that exact match still trims whitespace.
Returns
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
Added in: v1.27Allows 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:
- Sync
- Async
expect(page.get_by_title("Issues count")).to_have_text("25 issues")
await expect(page.get_by_title("Issues count")).to_have_text("25 issues")
Arguments
-
Text to locate the element for.
-
Whether to find an exact match: case-sensitive and whole-string. Default to false. Ignored when locating by a regular expression. Note that exact match still trims whitespace.
Returns
locator
Added in: v1.17The method finds an element matching the specified selector in the locator's subtree. It also accepts filter options, similar to locator.filter() method.
Usage
frame_locator.locator(selector_or_locator)
frame_locator.locator(selector_or_locator, **kwargs)
Arguments
-
selector_or_locator
str | Locator#A selector or locator to use when resolving DOM element.
-
Narrows down the results of the method to those which contain elements matching this relative locator. For example,
article
that hastext=Playwright
matches<article><div>Playwright</div></article>
.Inner locator must be relative to the outer locator and is queried starting with the outer locator match, not the document root. For example, you can find
content
that hasdiv
in<article><content><div>Playwright</div></content></article>
. However, looking forcontent
that hasarticle div
will fail, because the inner locator must be relative and should not use any elements outside thecontent
.Note that outer and inner locators must belong to the same frame. Inner locator must not contain FrameLocators.
-
has_not
Locator (optional) Added in: v1.33#Matches elements that do not contain an element that matches an inner locator. Inner locator is queried against the outer one. For example,
article
that does not havediv
matches<article><span>Playwright</span></article>
.Note that outer and inner locators must belong to the same frame. Inner locator must not contain FrameLocators.
-
has_not_text
str | Pattern (optional) Added in: v1.33#Matches elements that do not contain specified text somewhere inside, possibly in a child or a descendant element. When passed a [string], matching is case-insensitive and searches for a substring.
-
has_text
str | Pattern (optional)#Matches elements containing specified text somewhere inside, possibly in a child or a descendant element. When passed a [string], matching is case-insensitive and searches for a substring. For example,
"Playwright"
matches<article><div>Playwright</div></article>
.
Returns
Properties
owner
Added in: v1.43Returns a Locator object pointing to the same iframe
as this frame locator.
Useful when you have a FrameLocator object obtained somewhere, and later on would like to interact with the iframe
element.
For a reverse operation, use locator.content_frame.
Usage
- Sync
- Async
frame_locator = page.locator("iframe[name=\"embedded\"]").content_frame
# ...
locator = frame_locator.owner
expect(locator).to_be_visible()
frame_locator = page.locator("iframe[name=\"embedded\"]").content_frame
# ...
locator = frame_locator.owner
await expect(locator).to_be_visible()
Returns
Deprecated
first
Added in: v1.17Use locator.first followed by locator.content_frame instead.
Returns locator to the first matching frame.
Usage
frame_locator.first
Returns
last
Added in: v1.17Use locator.last followed by locator.content_frame instead.
Returns locator to the last matching frame.
Usage
frame_locator.last
Returns
nth
Added in: v1.17Use locator.nth() followed by locator.content_frame instead.
Returns locator to the n-th matching frame. It's zero based, nth(0)
selects the first frame.
Usage
frame_locator.nth(index)
Arguments
Returns