Spec-Zone.ru › Playwright

FrameLocator

FrameLocator представляет собой представление к iframe на странице. Он захватывает логику, достаточную для получения iframe и поиска элементов в этом iframe. FrameLocator можно создать с помощью методов locator.contentFrame(), page.frameLocator() или locator.frameLocator().

const locator = page.locator('#my-frame').contentFrame().getByText('Submit');
await locator.click();

Строгость

Frame-локатороы строго настроены. Это означает, что все операции с frame-локатороыми будут вызывать исключение, если более одного элемента соответствует заданному селектору.

// Throws if there are several frames in DOM:
await page.locator('.result-frame').contentFrame().getByRole('button').click();

// Works because we explicitly tell locator to pick the first frame:
await page.locator('.result-frame').contentFrame().first().getByRole('button').click();

Преобразование Locator в FrameLocator

Если у вас есть объект Locator, указывающий на iframe, его можно преобразовать в FrameLocator с помощью метода locator.contentFrame().

Преобразование FrameLocator в Locator

Если у вас есть объект FrameLocator, его можно преобразовать в Locator, указывающий на тот же iframe , используя метод frameLocator.owner().

Методы​

frameLocator​

При работе с iframe вы можете создать frame-локатор, который войдёт в iframe и позволит выбирать элементы в этом iframe.

Использование

frameLocator.frameLocator(selector);

Аргументы

  • selector строка

    Селектор для использования при разрешении DOM-элемента.

Возвращает

  • FrameLocator

getByAltText​

Позволяет находить элементы по их текстовому описанию (alt).

Использование

Например, этот метод найдёт изображение по текстовому описанию "Логотип Playwright":

<img alt='Playwright logo'>
await page.getByAltText('Playwright logo').click();

Аргументы

  • text строка | выражение регулярного поиска

    Текст для поиска элемента.

  • options объект (необязательно)

    • exact логическое значение (необязательно)

      Указывает, нужно ли находить точное совпадение (регистрозависимое и совпадение по всей строке). По умолчанию false. Игнорируется при поиске по регулярному выражению. Обратите внимание, что точное совпадение всё равно обрезает пробелы.

Возвращает

  • Locator

getByLabel​

Позволяет находить элементы ввода по тексту связанного <label> или aria-labelledby элемента, или по атрибуту aria-label.

Использование

Например, этот метод найдёт поля ввода с метками "Имя пользователя" и "Пароль" в следующем DOM:

<input aria-label="Username">
<label for="password-input">Password:</label>
<input id="password-input">
await page.getByLabel('Username').fill('john');
await page.getByLabel('Password').fill('secret');

Аргументы

  • text строка | выражение регулярного поиска

    Текст для поиска элемента.

  • options объект (необязательно)

    • exact логическое значение (необязательно)

      Указывает, нужно ли находить точное совпадение (регистрозависимое и совпадение по всей строке). По умолчанию false. Игнорируется при поиске по регулярному выражению. Обратите внимание, что точное совпадение всё равно обрезает пробелы.

Возвращает

  • Locator

getByPlaceholder​

Позволяет находить элементы ввода по текстовому заполнению поля.

Использование

Рассмотрим следующую структуру DOM.

<input type="email" placeholder="name@example.com" />

Вы можете заполнить поле после его поиска по текстовому заполнению:

await page
    .getByPlaceholder('name@example.com')
    .fill('playwright@microsoft.com');

Аргументы

  • text строка | выражение регулярного поиска

    Текст для поиска элемента.

  • options объект (необязательно)

    • exact логическое значение (необязательно)

      Указывает, нужно ли находить точное совпадение (регистрозависимое и совпадение по всей строке). По умолчанию false. Игнорируется при поиске по регулярному выражению. Обратите внимание, что точное совпадение всё равно обрезает пробелы.

Возвращает

  • Locator

getByRole​

Позволяет находить элементы по их роли ARIA, атрибутам ARIA и доступному имени.

Использование

Рассмотрим следующую структуру DOM.

<h3>Sign up</h3>
<label>
  <input type="checkbox" /> Subscribe
</label>
<br/>
<button>Submit</button>

Вы можете найти каждый элемент по его неявной роли:

await expect(page.getByRole('heading', { name: 'Sign up' })).toBeVisible();

await page.getByRole('checkbox', { name: 'Subscribe' }).check();

await page.getByRole('button', { name: /submit/i }).click();

Аргументы

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

    Требуемый aria role.

  • options Object (необязательно)

    • checked boolean (необязательно)

      Атрибут, который обычно устанавливается aria-checked или встроенными <input type=checkbox> элементами управления.

      Узнайте больше о aria-checked.

    • disabled boolean (необязательно)

      Атрибут, который обычно устанавливается aria-disabled или disabled.

      прим.

      В отличие от большинства других атрибутов, disabled наследуется по иерархии DOM. Узнайте больше о aria-disabled.

    • exact boolean (необязательно)

      Определяет, соответствует ли значение атрибута name точно: регистрозависимо и для всей строки. По умолчанию false. Игнорируется, когда name является регулярным выражением. Обратите внимание, что точное соответствие всё равно обрезает пробелы.

    • expanded boolean (необязательно)

      Атрибут, который обычно устанавливается aria-expanded.

      Узнайте больше о aria-expanded.

    • includeHidden boolean (необязательно)

      Параметр, определяющий, будут ли учитываться скрытые элементы. По умолчанию, только нескрытые элементы, как определено ARIA, соответствуют селектору по ролям.

      Узнайте больше о aria-hidden.

    • level number (необязательно)

      Числовой атрибут, который обычно присутствует для ролей heading, listitem, row, treeitem, с значениями по умолчанию для элементов <h1>-<h6>.

      Узнайте больше о aria-level.

    • name string | RegExp (необязательно)

      Параметр для соответствия доступному имени. По умолчанию соответствие не учитывает регистр и ищет подстроку, используйте exact для управления этим поведением.

      Узнайте больше о доступном имени.

    • pressed boolean (необязательно)

      Атрибут, который обычно устанавливается aria-pressed.

      Узнайте больше о aria-pressed.

    • selected boolean (необязательно)

      Атрибут, который обычно устанавливается aria-selected.

      Узнайте больше о aria-selected.

Возвращает

  • Локатор

Подробности

Селектор ролей не заменяет проверки доступности и тесты соответствия, но предоставляет раннюю обратную связь о рекомендациях ARIA.

Многие элементы HTML имеют неявную определённую роль, которая распознаётся селектором ролей. Все поддерживаемые роли можно найти здесь. Рекомендации ARIA не рекомендуют дублировать неявные роли и атрибуты, устанавливая role и/или aria-* атрибуты по умолчанию.

getByTestId​

Находит элемент по идентификатору теста.

Использование

Рассмотрим следующую структуру DOM.

<button data-testid="directions">Itinéraire</button>

Можно найти элемент по его идентификатору теста:

await page.getByTestId('directions').click();

Аргументы

  • testId строка | RegExp

    Идентификатор для поиска элемента.

Возвращает

  • Локатор

Подробности

По умолчанию атрибут data-testid используется как идентификатор теста. Используйте selectors.setTestIdAttribute() для настройки другого атрибута идентификатора теста, если необходимо.

// Set custom test id attribute from @playwright/test config:
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    testIdAttribute: 'data-pw'
  },
});

getByText​

Позволяет находить элементы, содержащие заданный текст.

См. также locator.filter(), который позволяет искать по другим критериям, таким как доступная роль, а затем фильтровать по содержимому текста.

Использование

Рассмотрим следующую структуру DOM:

<div>Hello <span>world</span></div>
<div>Hello</div>

Можно найти элемент по подстроке текста, точному совпадению или регулярному выражению:

// Matches <span>
page.getByText('world');

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

// Matches second <div>
page.getByText('Hello', { exact: true });

// Matches both <div>s
page.getByText(/Hello/);

// Matches second <div>
page.getByText(/^hello$/i);

Аргументы

  • text строка | RegExp

    Текст для поиска элемента.

  • options Object (необязательно)

    • exact boolean (необязательно)

      Выполнять поиск по точному совпадению: регистрозависимо и для всей строки. По умолчанию false. Игнорируется при поиске по регулярному выражению. При точном совпадении всё равно обрезаются пробелы.

Возвращает

  • Локатор

Подробности

Поиск по тексту всегда нормализует пробелы, даже при точном совпадении. Например, несколько пробелов заменяются одним, символы новой строки заменяются пробелами, а ведущие и хвостовые пробелы игнорируются.

Элементы ввода типа button и submit соответствуют их value вместо содержимого текста. Например, поиск по тексту "Log in" соответствует <input type=button value="Log in">.

getByTitle​

Позволяет находить элементы по их атрибуту title.

Использование

Рассмотрим следующую структуру DOM.

<span title='Issues count'>25 issues</span>

Можно проверить количество проблем после нахождения элемента по тексту заголовка:

await expect(page.getByTitle('Issues count')).toHaveText('25 issues');

Аргументы

  • text строка | RegExp

    Текст для поиска элемента.

  • options Объект (необязательно)

    • exact boolean (необязательно)

      Определяет, требуется ли точное совпадение: регистрозависимое и по всей строке. По умолчанию значение false. Игнорируется при поиске по регулярному выражению. Обратите внимание, что точное совпадение всё равно обрезает пробелы.

Возвращает

  • Локатор

локатор​

Метод находит элемент, соответствующий указанному селектору, в поддереве локатора. Он также принимает параметры фильтра, аналогичные методу locator.filter().

Дополнительная информация о локаторах.

Использование

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

Аргументы

  • selectorOrLocator строка | Локатор

    Селектор или локатор для использования при разрешении элемента DOM.

  • options Объект (необязательно)

    • has Локатор (необязательно)

      Сужает результаты метода до тех, которые содержат элементы, соответствующие этому относительному локатору. Например, article который имеет text=Playwright соответствует <article><div>Playwright</div></article>.

      Внутренний локатор должен быть относительным к внешнему локатору и запрашивается, начиная с совпадения внешнего локатора, а не корня документа. Например, вы можете найти content который имеет div в <article><content><div>Playwright</div></content></article>. Однако поиск content который имеет article div завершится неудачей, потому что внутренний локатор должен быть относительным и не должен использовать элементы за пределами content.

      Обратите внимание, что внешний и внутренний локаторы должны принадлежать одной и той же рамке. Внутренний локатор не должен содержать FrameLocator.

    • hasNot Локатор (необязательно)

      Совпадает с элементами, которые не содержат элемент, соответствующий внутреннему локатору. Внутренний локатор запрашивается относительно внешнего. Например, article который не имеет div соответствует <article><span>Playwright</span></article>.

      Обратите внимание, что внешний и внутренний локаторы должны принадлежать одной и той же рамке. Внутренний локатор не должен содержать FrameLocator.

    • hasNotText строка | RegExp (необязательно)

      Совпадает с элементами, которые не содержат указанный текст где-либо внутри, возможно, в дочернем или потомке. При передаче строки совпадение не учитывает регистр и ищет подстроку.

    • hasText строка | RegExp (необязательно)

      Совпадает с элементами, содержащими указанный текст где-либо внутри, возможно, в дочернем или потомке. При передаче строки совпадение не учитывает регистр и ищет подстроку. Например, "Playwright" соответствует <article><div>Playwright</div></article>.

Возвращает

  • Локатор

владелец​

Возвращает объект Локатор, указывающий на ту же iframe что и этот локатор рамки.

Полезно, когда у вас есть объект FrameLocator, полученный где-то, и вы позже хотите взаимодействовать с элементом iframe.

Для обратной операции используйте locator.contentFrame().

Использование

const frameLocator = page.locator('iframe[name="embedded"]').contentFrame();
// ...
const locator = frameLocator.owner();
await expect(locator).toBeVisible();

Возвращает

  • Локатор

Устаревшее​

первый​

Устаревшее

Используйте locator.first() с последующим вызовом locator.contentFrame() вместо этого.

Возвращает локатор первой совпадающей рамки.

Использование

frameLocator.first();

Возвращает

  • FrameLocator

последний​

Устаревшее

Используйте locator.last() с последующим вызовом locator.contentFrame() вместо этого.

Возвращает локатор последней совпадающей рамки.

Использование

frameLocator.last();

Возвращает

  • FrameLocator

n-й​

Устаревшее

Используйте locator.nth() с последующим вызовом locator.contentFrame() вместо этого.

Возвращает локатор n-й совпадающей рамки. Нумерация с нуля, nth(0) выбирает первую рамку.

Использование

frameLocator.nth(index);

Аргументы

  • index число

Возвращает

  • FrameLocator

© 2024 Microsoft
Licensed under the Apache License, Version 2.0.
https://playwright.dev/docs/api/class-framelocator

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API