Skip to main content

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.contentFrame(), Page.frameLocator() or Locator.frameLocator() method.

Locator locator = page.locator("#my-frame").contentFrame().getByText("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.locator(".result-frame").contentFrame().getByRole(AriaRole.BUTTON).click();

// Works because we explicitly tell locator to pick the first frame:
page.locator(".result-frame").first().contentFrame().getByRole(AriaRole.BUTTON).click();

Converting Locator to FrameLocator

If you have a Locator object pointing to an iframe it can be converted to FrameLocator using Locator.contentFrame().

Converting FrameLocator to Locator

If you have a FrameLocator object it can be converted to Locator pointing to the same iframe using FrameLocator.owner().

Methods​

frameLocator​

Added in: v1.17 frameLocator.frameLocator

When working with iframes, you can create a frame locator that will enter the iframe and allow selecting elements in that iframe.

Usage

FrameLocator.frameLocator(selector);

Arguments

  • selector String#

    A selector to use when resolving DOM element.

Returns

getByAltText​

Added in: v1.27 frameLocator.getByAltText

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.getByAltText("Playwright logo").click();

Arguments

  • text String | Pattern#

    Text to locate the element for.

  • options FrameLocator.GetByAltTextOptions (optional)

    • setExact boolean (optional)#

      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

getByLabel​

Added in: v1.27 frameLocator.getByLabel

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.getByLabel("Username").fill("john");
page.getByLabel("Password").fill("secret");

Arguments

  • text String | Pattern#

    Text to locate the element for.

  • options FrameLocator.GetByLabelOptions (optional)

    • setExact boolean (optional)#

      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

getByPlaceholder​

Added in: v1.27 frameLocator.getByPlaceholder

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.getByPlaceholder("name@example.com").fill("playwright@microsoft.com");

Arguments

  • text String | Pattern#

    Text to locate the element for.

  • options FrameLocator.GetByPlaceholderOptions (optional)

    • setExact boolean (optional)#

      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

getByRole​

Added in: v1.27 frameLocator.getByRole

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:

assertThat(page
    .getByRole(AriaRole.HEADING,
               new Page.GetByRoleOptions().setName("Sign up")))
    .isVisible();

page.getByRole(AriaRole.CHECKBOX,
               new Page.GetByRoleOptions().setName("Subscribe"))
    .check();

page.getByRole(AriaRole.BUTTON,
               new Page.GetByRoleOptions().setName(
                   Pattern.compile("submit", Pattern.CASE_INSENSITIVE)))
    .click();

Arguments

  • role enum AriaRole { 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.

  • options FrameLocator.GetByRoleOptions (optional)

    • setChecked boolean (optional)#

      An attribute that is usually set by aria-checked or native <input type=checkbox> controls.

      Learn more about aria-checked.

    • setDisabled boolean (optional)#

      An attribute that is usually set by aria-disabled or disabled.

      note

      Unlike most other attributes, disabled is inherited through the DOM hierarchy. Learn more about aria-disabled.

    • setExact boolean (optional) Added in: v1.28#

      Whether setName is matched exactly: case-sensitive and whole-string. Defaults to false. Ignored when setName is a regular expression. Note that exact match still trims whitespace.

    • setExpanded boolean (optional)#

      An attribute that is usually set by aria-expanded.

      Learn more about aria-expanded.

    • setIncludeHidden boolean (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.

    • setLevel int (optional)#

      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.

    • setName String | Pattern (optional)#

      Option to match the accessible name. By default, matching is case-insensitive and searches for a substring, use setExact to control this behavior.

      Learn more about accessible name.

    • setPressed boolean (optional)#

      An attribute that is usually set by aria-pressed.

      Learn more about aria-pressed.

    • setSelected boolean (optional)#

      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.

getByTestId​

Added in: v1.27 frameLocator.getByTestId

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.getByTestId("directions").click();

Arguments

Returns

Details

By default, the data-testid attribute is used as a test id. Use Selectors.setTestIdAttribute() to configure a different test id attribute if necessary.

getByText​

Added in: v1.27 frameLocator.getByText

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:

// Matches <span>
page.getByText("world")

// Matches first <div>
page.getByText("Hello world")

// Matches second <div>
page.getByText("Hello", new Page.GetByTextOptions().setExact(true))

// Matches both <div>s
page.getByText(Pattern.compile("Hello"))

// Matches second <div>
page.getByText(Pattern.compile("^hello$", Pattern.CASE_INSENSITIVE))

Arguments

  • text String | Pattern#

    Text to locate the element for.

  • options FrameLocator.GetByTextOptions (optional)

    • setExact boolean (optional)#

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

getByTitle​

Added in: v1.27 frameLocator.getByTitle

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:

assertThat(page.getByTitle("Issues count")).hasText("25 issues");

Arguments

  • text String | Pattern#

    Text to locate the element for.

  • options FrameLocator.GetByTitleOptions (optional)

    • setExact boolean (optional)#

      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.17 frameLocator.locator

The method finds an element matching the specified selector in the locator's subtree. It also accepts filter options, similar to Locator.filter() method.

Learn more about locators.

Usage

FrameLocator.locator(selectorOrLocator);
FrameLocator.locator(selectorOrLocator, options);

Arguments

  • selectorOrLocator String | Locator#

    A selector or locator to use when resolving DOM element.

  • options FrameLocator.LocatorOptions (optional)

    • setHas Locator (optional)#

      Narrows down the results of the method to those which contain elements matching this relative locator. For example, article that has text=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 has div in <article><content><div>Playwright</div></content></article>. However, looking for content that has article div will fail, because the inner locator must be relative and should not use any elements outside the content.

      Note that outer and inner locators must belong to the same frame. Inner locator must not contain FrameLocators.

    • setHasNot 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 have div matches <article><span>Playwright</span></article>.

      Note that outer and inner locators must belong to the same frame. Inner locator must not contain FrameLocators.

    • setHasNotText String | 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.

    • setHasText String | 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

owner​

Added in: v1.43 frameLocator.owner

Returns 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.contentFrame().

Usage

FrameLocator frameLocator = page.locator("iframe[name=\"embedded\"]").contentFrame();
// ...
Locator locator = frameLocator.owner();
assertThat(locator).isVisible();

Returns

Deprecated​

first​

Added in: v1.17 frameLocator.first
Deprecated

Use Locator.first() followed by Locator.contentFrame() instead.

Returns locator to the first matching frame.

Usage

FrameLocator.first();

Returns

last​

Added in: v1.17 frameLocator.last
Deprecated

Use Locator.last() followed by Locator.contentFrame() instead.

Returns locator to the last matching frame.

Usage

FrameLocator.last();

Returns

nth​

Added in: v1.17 frameLocator.nth
Deprecated

Use Locator.nth() followed by Locator.contentFrame() instead.

Returns locator to the n-th matching frame. It's zero based, nth(0) selects the first frame.

Usage

FrameLocator.nth(index);

Arguments

Returns