Подробное руководство по локаторам в Playwright

Playwright – один из наиболее популярных фреймворков для end-to-end тестирования. С его помощью можно реализовать различные стратегии локализации и поиска элементов страницы. Далее мы познакомимся с различными локаторами Playwright и посмотрим как их использовать.

Друзья, поддержите нас вступлением в наш телеграм канал QaRocks. Там много туториалов, задач по автоматизации и книг по QA.

Содержание

• Локаторы в Playwright
• Типы локаторов
• Установка и настройка Playwright
• Использование локаторов
• Фильтрация и последовательный поиск локаторов
• Часто задаваемые вопросы

Локаторы в Playwright

Локаторы в Playwright позволяют вашим тестам взаимодействовать с конкретными элементами на веб-странице. Они оснащены функциями автоматического ожидания и повторной попытки поиска локатора. Это значит, что система будет ждать загрузки элементов и автоматически повторять попытки найти локатор, прежде чем выбросить ошибку.

Существует несколько способов работы с локаторами Playwright: использование метода page.locator(), который ищет по CSS-селекторам или XPath, а также готовые шаблоны методов для поиска. Хотя Playwright обладает достаточной гибкостью, позволяя создавать свои кастомные локаторы с помощью page.locator(), всё-таки рекомендуется использовать встроенные локаторы, которые покрывают большинство сценариев.

Ключевые особенности локаторов в Playwright:

• Встроенная поддержка автоожидания и повторных попыток поиска помогает написать устойчивые и стабильные тесты.
• Встроенные методы позволяют выполнять различные действия над найденными элементами.
• В классе page реализованы методы ожидания завершения различных операций на странице и методы ожидания тайм-аута и эксепшена.
• В момент выполнения любого действия локаторы всегда обращаются к самой последней версии страницы, что обеспечивает надежность тестов.
• Встроенные локаторы поддерживают поиск элементов по ARIA-ролям, тексту, alt-тексту, плейсхолдерам (placeholders), заголовкам (titles), лейблам (labels) и кастомным test-id.
• Возможность последовательного поиска и фильтрации локаторов позволяет точно находить нужные элементы.

Типы локаторов

Ниже представлены встроенные локаторы, которые поддерживает Playwright:

• page.getByRole() – находит элементы их ARIA-роли (здесь имеется в виду определенный тип функциональности: кнопки, флажки, текстовые поля и т.д.)
• page.getByText() – находит элементы по их текстовому содержимому.
• page.getByLabel() – находит элементы форм по связанному тексту лейбла.
• page.getByPlaceholder() – находит поля по тексту в плейсхолдере.
• page.getByAltText() – находит элементы, обычно изображения, по их текстовой альтернативе.
• page.getByTitle() – находит элементы по их атрибуту title.
• page.getByTestId() – находит элементы на основе их атрибута data-testid (можно настроить на другие атрибуты).

Установка и настройка Playwright

В этом разделе мы узнаем, как установить Playwright и настроить его в выделенной виртуальной среде:

• Создайте отдельную папку для вашего проекта под названием playwright locators (этот шаг не обязателен, но является хорошей практикой).
• Внутри этой папки, с помощью встроенного модуля venv, создайте виртуальное окружение с именем playwright locators.
• Активируйте виртуальную среду, вызвав скрипт активации.
• Установите модуль Playwright с помощью pip install pytest-playwright.
• Наконец, установите необходимые браузеры с помощью команды playwright install.

Все тесты в этом блоге используют эти версии: Python 3.12.4, pytest 8.2.2 и Playwright 1.44.0.

Мы будем использовать Python API Playwright и, более конкретно, версию sync_api. Причина выбора sync_api, как указано в ответе на StackOverflow, заключается в том, что sync_api – это просто обертка вокруг asyncio_api в Python. Таким образом, Playwright делает асинхронные вызовы под капотом.

При выполнении Python-тест генерирует код с использованием sync_api, как показано на скриншоте ниже:

Поэтому при выполнении теста Playwright не стесняйтесь использовать sync_api , если вам не нужен тонкий контроль над поведением запроса, в этом случае можно использовать async_api.

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

Рассмотрим несколько примеров использования локаторов Playwright на облачных платформах тестирования, таких как LambdaTest. Это AI-платформа для запуска авто-тестов, которая может выполнять автоматизированные Playwright тесты более чем на 50 версиях браузеров.

При прогонах тестов в облаке надежное и эффективное определение элементов важно из-за большого разнообразия браузеров и окружений. Чтобы использовать локаторы Playwright, необходимо импортировать модули и подключить нужные зависимости, а также указать имя пользователя и ключ доступа для запуска теста в облачной среде LambdaTest.

Функция load_dotenv() считывает имя пользователя и ключ доступа, которые требуются для подключения к LambdaTest Playwright grid. Имя пользователя и ключ доступа доступны в вашем профиле LambdaTest > Настройки аккаунта > Пароль и безопасность.

import json
import os
import re
import subprocess
import sys
import urllib
 
import pytest
from dotenv import load_dotenv
  
load_dotenv()

Настройка окружения

Словарь capabilities содержит конфигурацию тестового окружения в LambdaTest Playwright grid. В этих настройках указываются различные параметры: браузер по-умолчанию, его версия, операционная система, на которой должны выполняться тесты, а также другие важные параметры окружения.

capabilities = {
    'browserName': 'Chrome',  # Browsers allowed: `Chrome`, `MicrosoftEdge`, `pw-chromium`, `pw-firefox` and `pw-webkit`
    'browserVersion': 'latest',
    'LT:Options': {
        'platform': 'Windows 10',
        'build': 'Playwright Locators Demo Build',
        'name': 'Playwright Locators Test For Windows 10 & Chrome',
        'user': os.getenv('LT_USERNAME'),
        'accessKey': os.getenv('LT_ACCESS_KEY'),
        'network': True,
        'video': True,
        'visual': True,
        'console': True,
        'tunnel': False,   # Add tunnel configuration if testing locally hosted webpage
        'tunnelName': '',  # Optional
        'geoLocation': '', # country code can be fetched from https://www.lambdatest.com/capabilities-generator/
    }
}

Настройка фикстур pytest

Мы создаём две фикстуры — одну для запуска тестов в облачной среде, другую для локальной. Это позволяет удобно переключаться между локальным и облачным окружением в зависимости от того, где вы хотите выполнять тесты.

Используйте фикстуру local_grid_page , если вы запускаете тесты на локальной машине:

@pytest.fixture(name="local_grid_page")
def playwright_local_grid_page():
    with sync_playwright() as playwright:
        browser = playwright.chromium.launch(headless=True)
        page = browser.new_

Используйте фикстуру cloud_grid_page, если хотите запустить тесты в облаке LambdaTest:

@pytest.fixture(name="cloud_grid_page")
def playwright_local_grid_page():    
    with sync_playwright() as playwright:
        playwrightVersion = str(subprocess.getoutput('playwright --version')).strip().split(" ")[1]
        capabilities['LT:Options']['playwrightClientVersion'] = playwrightVersion        
        lt_cdp_url = 'wss://cdp.lambdatest.com/playwright?capabilities=' + urllib.parse.quote(json.dumps(capabilities))    
        browser = playwright.chromium.connect(lt_cdp_url)
        page = browser.new_page()    
        yield page

Нахождение элементов по роли

Локатор get_by_role() позволяет находить элементы по их ARIA-ролям, ARIA-атрибутам и доступному имени. ARIA расшифровывается как Accessible Rich Internet Applications. Это набор атрибутов, которые могут быть добавлены к элементам HTML, чтобы помочь людям, использующим вспомогательные технологии, такие как устройства чтения с экрана, легче ориентироваться и понимать веб-контент.

ARIA-роли – это набор атрибутов, которые добавляются к HTML-элементам для улучшения доступности контента. Они особенно полезны для людей, использующих вспомогательные технологии, такие как экранные читалки.

Давайте разберемся с локатором get_by_role() на примере сайта LambdaTest eCommerce Playground.

Сценарий теста:

• Главная страница демо-сайта должна содержать кнопку Search.
• Кнопка Search должна иметь CSS-класс type-text.

Имплементация:

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_homepage_contains_search_button(cloud_grid_page):
    cloud_grid_page.goto("https://ecommerce-playground.lambdatest.io/")
    search_button_locator = cloud_grid_page.get_by_role(role="button", name="Search")
    expect(search_button_locator).to_have_class("type-text")

Пошаговый разбор кода:

1. При проверке главной страницы мы замечаем, что элемент Search представляет собой кнопку с типом submit, у которой CSS-классtype-text.
2. В этом случае мы используем локатор Playwright get_by_role() с аргументами role="button" и name="Search".
3. Затем метод expect() проверяет, что найденный элемент содержит класс type-text, используя метод to_have_class().

Стоит отметить, что для локатора get_by_role() обязательным является только аргумент role. Все остальные аргументы, включая name, являются необязательными. Также существует необязательный аргумент exact. Он позволяет задать строгое совпадение с учетом регистра и полное соответствие строке.

Запуск теста:

Теперь запустим тест с помощью следующей команды:

pytest -v -k "test_homepage_contains_search_button"

Поиск элементов по тексту

Локатор get_by_text() позволяет находить элементы на основе текста, который они содержат. Этот локатор поддерживает точное совпадение строк, поиск по подстроке и использование регулярных выражений.

Этот метод особенно рекомендуется для поиска неинтерактивных элементов, которые находятся внутри HTML-тегов: div, span и p. Рассмотрим работу данного локатора, используя сценарии с точными совпадениями и регулярными выражениями.

Для этого снова воспользуемся сайтом LambdaTest eCommerce Playground.

Сценарий теста:

Страница продукта на сайте LambdaTest eCommerce Playground должна содержать текстовые элементы:

• Brand:
• Viewed:
• Reward Points:
• Awailability:

Имплементация:

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_product_details_text_should_be_visible(cloud_grid_page):    
    cloud_grid_page.goto(
        "https://ecommerce-playground.lambdatest.io/index.php?route=product/product&path=57&product_id=28"
    )
    brand_text_locator = cloud_grid_page.get_by_text(text="Brand:", exact=True)
    viewed_text_locator = cloud_grid_page.get_by_text(text="Viewed:", exact=True)
    points_text_locator = cloud_grid_page.get_by_text(text="Reward Points:", exact=True)
    availability_text_locator = cloud_grid_page.get_by_text(text="Availability", exact=True)
    expect(brand_text_locator).to_be_visible()
    expect(viewed_text_locator).to_be_visible()
    expect(points_text_locator).to_be_visible()
    expect(availability_text_locator).not_to_be_visible()

Пошаговый разбор кода:

1. При инспектировании страницы продукта видно, что данные находятся внутри тега span.
2. Переход на страницу продукта остался таким же, как и в предыдущем тестовом примере.
3. Далее используется локатор get_by_text(), чтобы сопоставить тексты для Brand:, Viewed: и Reward Points:. Для каждого из них вызывается проверка expect().to_be_visible().
4. Для “Availability” намеренно исключили “:”, чтобы продемонстрировать, что работу параметра exact. Поскольку известно, что тест упадёт при проверки на точное соответствие, провалится на утверждении expect(), в данном случае задействуется иной метод – not_to_be_visible().

Запуск теста:

Теперь запустим тест с помощью следующей команды:

pytest -v -k “test_product_details_text_should_be_visible”

Поиск элементов формы по лейблу

Практически на каждом сайте есть формы, и большинство элементов управления (например, поля ввода) имеют связанные текстовые лейблы. Локатор get_by_label() в Playwright позволяет удобно и надёжно находить элементы формы по этим лейблам.

Рассмотрим использование данного локатора на примере сайта LambdaTest eCommerce Playground.

Сценарий теста:

• Форма входа в систему должна содержать ровно один лейбл Email Address.
• Форма входа в систему должна содержать ровно один лейбл Password.

Имплементация:

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_exactly_one_email_and_password_field(cloud_grid_page):    
    cloud_grid_page.goto(
        "https://ecommerce-playground.lambdatest.io/index.php?route=account/login"
    )
    email_address_locator = cloud_grid_page.get_by_label(text="E-Mail Address", exact=True)
    password_locator = cloud_grid_page.get_by_label(text="Password", exact=True)
    expect(email_address_locator).to_have_count(1)
    expect(password_locator).to_have_count(1)

Пошаговый разбор кода:

1. Сначала открывается нужная страница
2. Далее инициализируются два локатора с помощью get_by_label() — для полей email и password — с параметром exact=True, чтобы подтвердить, что существует только один элемент формы логина.
3. В ассерте expect() вызывается метод to_have_count(1), чтобы убедиться, что на странице есть ровно одно поле email и одно поле password.

Запуск теста:

Теперь запустим тест с помощью следующей команды:

pytest -v -k “test_exactly_one_email_password_field”

Поиск элементов ввода по placeholder

Большинство веб-сайтов содержат различные формы — для входа в систему, регистрации, отзывов и поддержки клиентов. Часто такие формы используют текст в поле placeholder, чтобы помочь пользователю правильно заполнить форму.

Локатор get_by_placeholder() в Playwright позволяет удобно находить элементы на странице по их placeholder-тексту. Для демонстрации этого локатора можно использовать форму отзыва на сайте LambdaTest eCommerce Playground.

Сценарий теста:

• В форме отзыва должно быть одно поле имени клиента.
• В форме отзыва должно быть одно поле отзыва.

Имплементация:

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_review_form_has_customername_customerreview_fields(cloud_grid_page):    
    cloud_grid_page.goto(
        "https://ecommerce-playground.lambdatest.io/index.php?route=product/product&path=25&product_id=28"
    )
    name_locator = cloud_grid_page.get_by_placeholder(text="Your Name", exact=True)
    review_locator = cloud_grid_page.get_by_placeholder(text="Your Review", exact=True)
    expect(name_locator).to_have_count(1)
    expect(review_locator).to_have_count(1)

Пошаговый разбор кода:

1. В качестве аргумента для локатора get_by_placeholder() используеься текст из атрибута placeholder. Поиск осуществляется только по точному совпадению, с указанием exact=True.
2. Вызов to_have_count(1) в утверждении except() помогает проверить, что на странице присутствует только одно поле ввода имени и одно поле для самого отзыва — как и предполагается в тестовом сценарии.

Запуск теста:

Теперь запустим тест с помощью следующей команды:

pytest -v -k “test_review_form_has_customername_customerreview_fields”

Поиск изображенйя по Alt-text

Все сайты содержат изображения, и каждое изображение должно иметь атрибут alt. Причины важности alt-text выходят за рамки этой статьи, но кратко: он необходим для доступности (accessibility), удобства пользователей и SEO-оптимизации изображений.

В Playwright есть эффективный локатор get_by_alt_text(), позволяющий находить элементы изображений и областей по атрибуту alt-text.

Сценарий теста:

• Логотип с alt-text=«Poco Electro» должен быть виден.

Имплементация:

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_logo_with_alt_text_should_be_visible(cloud_grid_page):
    cloud_grid_page.goto(
        "https://ecommerce-playground.lambdatest.io/index.php?route=common/home"
    )
    logo_locator = cloud_grid_page.get_by_alt_text(text="Poco Electro", exact=True).first
    expect(logo_locator).to_be_visible()

Пошаговый разбор кода:

1. Из Chrome Developer Tools получаем alt-текст и передаём его локатору get_by_alt_text().
2. Так как на странице может быть несколько элементов с одинаковым alt-text, мы используем метод first, чтобы ограничить выбор первым найденным элементом.
3. Затем функция expect() утверждает, что выбранный локатором элемент виден.

Запуск теста:

Теперь выполним тест с помощью следующей команды:

pytest -v -k “test_logo_with_alt_text_should_be_visible”

Поиск элементов по title

Атрибут title в HTML задаёт дополнительную информацию об элементе. Чаще всего он используется на элементах a и img для предоставления текстового описания, которое может быть прочитано скринридерами и другими вспомогательными технологиями. Обычно текст из атрибута title отображается в виде всплывающей подсказки при наведении курсора мыши на элемент.

Можно использовать локатор get_by_title() Playwright, чтобы находить элементы по атрибуту title. Стоит отметить, что на сайте LambdaTest eCommerce Playground используется один и тот же текст title для всех изображений. Следовательно, локатор вернет более одного элемента (20 штук).

Сценарий теста:

• Должно присутствовать двадцать элементов с title='HTC Touch HD'.

Имплементация:

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_display_count_of_all_elements_with_title_htc_touch_hd(cloud_grid_page):    
    cloud_grid_page.goto(
        "https://ecommerce-playground.lambdatest.io/index.php?route=product/product&path=18&product_id=28"
    )
    alt_text_locator = cloud_grid_page.get_by_title(text=re.compile("htc touch hd", re.IGNORECASE))
    expect(alt_text_locator).to_have_count(20)

Прохождение по коду:

1. Переходим на страницу продукта с помощью метода page.goto().
2. Далее в title передаём текст, который хотим найти. Обратите внимание на использование модуля regex Python для игнорирования регистра.
3. Затем ассерт expect() проверяет, может ли локатор обнаружить все 20 элементов.

Выполнение теста:

Теперь выполним тест с помощью следующей команды:

pytest -v -k “test_display_count_of_all_elements_with_title_htc_touch_hd”

Поиск элементов по ID

Локаторы Playwright основаны на HTML-тегах или атрибутах, присвоенных каждому элементу. Однако у такого подхода есть недостаток: эти теги, например роли или атрибуты, могут со временем измениться. Если это произойдёт, тесты начнут падать и их придётся перерабатывать под новые условия.

Чтобы избежать таких проблем, тестовые идентификаторы (Test ID) считаются самым надёжным способом взаимодействия с элементами веб-приложения. Тестировщики могут явно задавать Test ID для нужных элементов. Использование этих идентификаторов в локаторах обеспечивает стабильную работу тестов даже в случае изменения роли, текста или заголовка элемента.

В Playwright предусмотрен локатор get_by_test_id() для поиска элементов по предопределенным идентификаторам тестов. По умолчанию система ищет по атрибуту data-testid. Это поведение можно легко изменить, установив кастомный атрибут для поиска playwright.selectors.set_test_id_attribute("data-pw").

Нахождение элементов с помощью CSS и XPath

Playwright предлагает полную гибкость в выборе локаторов. Несмотря на то, что рекомендуется использовать встроенные локаторы, в некоторых случаях — по личным предпочтениям или требованиям проекта — может потребоваться использование CSS или XPath-селекторов. В таких ситуациях применяется метод page.locator(), в который передаётся селектор, описывающий, как найти нужный элемент на странице.

Ниже приведены примеры создания локаторов с помощью метода page.locator() с использованием CSS и XPath. При этом можно опустить префиксы CSS и XPath, и всё будет по-прежнему корректно работать.

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_display_count_of_all_elements_with_title_htc_touch_hd(cloud_grid_page):    
    cloud_grid_page.goto(
        "https://ecommerce-playground.lambdatest.io/index.php?route=product/product&path=18&product_id=28"
    )
    alt_text_locator = cloud_grid_page.get_by_title(text=re.compile("htc touch hd", re.IGNORECASE))
    expect(alt_text_locator).to_have_count(20)

Как видно из приведённых выше примеров, локаторы на основе CSS и XPath тесно связаны с моделью документа (DOM) и зачастую становятся сложными для чтения, поддержки и ненадёжными. Поскольку DOM может изменяться, локаторы, завязанные на него, приводят к нестабильным и хрупким тестам.

Поэтому оптимально создавать тесты с использованием рекомендуемых встроенных локаторов, таких как по роли или тексту, а ещё лучше — определять явные тестовые контракты с помощью Test ID.

Поиск нескольких элементов с помощью регулярных выражений

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

Можно использовать регулярные выражения для поиска нескольких элементов сразу. Рассмотрим пример.

Сценарий теста:

• На странице товара в LambdaTest eCommerce Playground бренд HTC должен упоминаться несколько раз.
• Должно быть десять упоминаний.

Имплементация:

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_product_name_to_appear_more_than_once(cloud_grid_page):    
    cloud_grid_page.goto(
        "https://ecommerce-playground.lambdatest.io/index.php?route=product/product&path=57&product_id=28"
    )
    brand_name_locator = cloud_grid_page.get_by_text(re.compile("htc", re.IGNORECASE))
    expect(brand_name_locator).to_have_count(10)

Прохождение по коду:

1. При просмотре страницы бренд “htc” упоминается 10 раз.
2. В локаторе используется модуль Python re для сопоставления всех вхождений и IGNORECASE.
3. После expect() мы вызываем метод to_have_count(), чтобы завершить наш тест.

Выполнение теста:

Запустим тест с помощью следующей команды:

pytest -v -k “test_product_name_to_appear_more_than_once”

Все указанные выше примеры кода можно найти в открытом репозитории:

Поиск элементов с помощью генератора тестов

Ранее все тесты были написаны человеком, который мануально исследовал DOM-структуру страницы. Но раз речь идёт об автоматизации, логично, что Playwright предлагает инструмент, который поможет автоматизировать и упростить процесс поиска элементов на веб-странице. Такой инструмент — Test Generator (генератор тестов).

Единственное, что может смутить — это названия: команда запуска называется codegen, а само окно генератора — Playwright Inspector. Было бы здорово, если бы Microsoft согласовала одно название для упрощения работы.

Чтобы запустить генератор тестов, достаточно воспользоваться командой, показанной ниже:

playwright codegen https://ecommerce-playground.lambdatest.io/

Замените URL на адрес веб-сайта, для которого вы собираетесь писать тесты.

Test Generator автоматически сгенерирует код на основе ваших действий на странице. При этом можно выбрать язык программирования. Для этой статьи я выбрал Python, но Playwright позволяет выбрать любой язык из выпадающего списка (обведённого красным).

В зависимости от выбранного языка, Test Generator напишет для вас соответствующий код.

Нам нужно найти строку поиска, ввести mobile и нажать кнопку Search. Ниже приведён снимок выполненных действий и код, который Генератор тестов сгенерировал для нас с использованием всех локаторов. После этого мы можем использовать эти локаторы для запуска тестов с помощью ассерта expect().

Генератор тестов Playwright также предлагает множество встроенных опций для эмуляции устройств, таких как размеры окна просмотра, цветовые схемы, геолокация, часовые пояса и прочее:

• Эмуляция размера окна просмотра: обратите внимание, как Playwright автоматически генерирует весь необходимый шаблонный код для установки размера viewport в виде фикстуры.

playwright codegen --viewport-size=800,600 https://ecommerce-playground.lambdatest.io/

• Эмуляция устройств: обратите внимание, как Playwright генерирует весь код для установки выбранного для тестирования устройства в качестве фикстуры.

playwright codegen --device=”iPhone 14 Pro Max” https://ecommerce-playground.lambdatest.io/

Фильтрация и последовательный поиск локаторов

В современном софтверном развитии, где важны повторное использование кода и принципы, такие как «Не повторяйся» (DRY), часто возникает необходимость уточнить поиск, чтобы точно определить нужные элементы.

Для эффективного сужения результатов Playwright предоставляет возможности фильтрации и цепочки локаторов.

Фильтрация помогает сузить поиск элементов на странице, задавая дополнительные условия. Например, с помощью filter(has_text=...) можно найти элемент, содержащий конкретный текст.

Цепочка локаторов позволяет комбинировать несколько локаторов в одном поиске. Например, можно использовать одновременно get_by_text() и get_by_role(), чтобы найти элемент с определённым текстом и определённой ролью.

Фильтрация локаторов

Локаторы Playwright можно фильтровать по тексту. Поиск нечувствителен к регистру и может выполняться с помощью регулярных выражений. Также можно фильтровать по отсутствию текста. Для обоих случаев используется метод locator.filter().

Фильтрация по тексту

Для примера фильтрации по тексту воспользуемся сайтом LambdaTest Selenium Playground, на котором есть список с большим количеством текста, содержащего слово Table.

Сценарий теста:

• Найдите список, содержащий слово Table.
• Убедитесь, что в списке пять элементов.

Имплементация:

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_locator_filter_by_text(cloud_grid_page):
    cloud_grid_page.goto(
        "https://www.lambdatest.com/selenium-playground/"
    )
    base_locator = cloud_grid_page.get_by_role("listitem")
    table_list_locator = base_locator.filter(
        has_text=re.compile("table", re.IGNORECASE)
        )    
    expect(table_list_locator).to_have_count(5)

Прохождение по коду:

1. Шаги по настройке base_locator остаются прежними.
2. Вместо того чтобы использовать другой фильтр, основанный на локаторе, мы фильтруем по text='table', передавая его в метод filter().
3. Проверка сайта ясно показывает, что список таблиц состоит из пяти элементов, что мы отображается в assert-методе except().

Выполнение теста:

Запустим тест с помощью следующей команды:

pytest -v test_playwright_locators.py::test_locator_filter_by_text

Фильтрация по отсутствию текста

Чтобы понять, как фильтровать, не имея текста, давайте воспользуемся сайтом LambaTest Selenium Playground, на котором есть красивый блок, содержащий элементы списка.

Сценарий теста:

• Найдите список, содержащий формы ввода.
• Отфильтруйте и найдите элемент списка Input Form Submit.

Имплементация:

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_locator_filter_by_another_locator(cloud_grid_page):
    cloud_grid_page.goto(
        "https://www.lambdatest.com/selenium-playground/"
    )
    base_locator = cloud_grid_page.get_by_role("listitem")
    list_heading_locator = base_locator.filter(
        has=cloud_grid_page.get_by_text(text=re.compile("input form submit", re.IGNORECASE))
        )    
    expect(list_heading_locator).to_have_text('Input Form Submit')

Прохождение по коду:

1. Мы формируем base_locator , используя локатор get_by_role() и элемент списка ролей ARIA.
2. Этот базовый локатор будет содержать все элементы списка (<li>) на странице.
3. Далее сужаем поиск, вызывая метод filter() на base_locator.
4. В фильтре рекомендуется использовать локатор get_by_text(), а также стоит корректно обработать чувствительность к регистру с помощью регулярных выражений, ища текст ‘input for submit’. Отфильтрованный локатор мы сохраняем как list_heading_locator.
5. На list_heading_locator вызываем проверку через except() и убеждаемся, , что был найден только тот элемент списка, который соответствует нужному элементу (в нашем случае — пункту списка, связанному с отправкой формы).

Выполнение теста:

Запустим тест с помощью следующей команды:

pytest -v -k “test_locator_filter_by_another_locator”

Последовательный поиск локаторов

Не всегда возможно найти нужный элемент на веб-странице с помощью одного локатора. В таких случаях на помощь приходит последовательный поиск локаторов (chaining) — это второй способ сузить область поиска до конкретного элемента путём комбинирования нескольких локаторов Playwright.

Сценарий теста:

• Найдите в навигационной цепочке HTC Touch HD на сайте электронной коммерции LambdaTest.
• Ожидается, что цепочка локаторов будет видна.

Имплементация:

# Замените cloud_grid_page на local_grid_page, чтобы прогнать тесты локально
def test_locator_chaining(cloud_grid_page):    
    cloud_grid_page.goto("https://ecommerce-playground.lambdatest.io/index.php?route=product/product&path=18&product_id=28")
    breadcrumb_locator = cloud_grid_page.get_by_label("breadcrumb").get_by_text("HTC Touch HD")    
    expect(breadcrumb_locator).to_be_visible()

Прохождение по коду:

1. Первый локатор get_by_label("breadcrumb") найдет раздел навигационной цепочки.
2. Функция get_by_text("HTC Touch HD") отфильтрует именно его из трех видимых.
3. Наконец, ассерт except() проверяет, видна ли цепочка навигации.

Выполнение теста:

Выполним тест с помощью следующей команды:

pytest -v -k “test_locator_chaining”

Изучив возможности фильтрации и цепочки локаторов в Playwright, важно понять ключевую роль селекторов в этом процессе. Селекторы Playwright — это базовые инструменты, позволяющие точно взаимодействовать с элементами веб-страницы. Используя различные типы селекторов — такие как CSS, XPath и текстовые селекторы — вы можете эффективно находить элементы, дополняя методы фильтрации и цепочки.

Селекторы играют важную роль в повышении точности и эффективности автотестов, обеспечивая их устойчивость даже при увеличении сложности приложения.

Заключение

Локаторы Playwright позволяют находить и взаимодействовать с элементами на веб-странице, используя такие характеристики, как атрибуты, роли, текст, метки, альтернативный текст и др. Понимание принципов работы локаторов, а также методов фильтрации и цепочки — ключ к созданию эффективных и надёжных автотестов на Playwright.

Кроме того, генератор тестов Playwright (Test Generator) помогает быстро создавать шаблонный код для поиска элементов. Экономя время и усилия, вы сможете сосредоточиться на действительно важных задачах — написании устойчивых тестов и повышении покрытия.

Часто задаваемые вопросы

Как получить список локаторов в Playwright?

Чтобы получить список локаторов в Playwright, вы можете использовать метод locator, предоставляемый классом ElementHandle. Этот метод возвращает объект Locator, который представляет текущее расположение элемента на странице.

Можно ли использовать XPath в Playwright?

Да, Playwright поддерживает XPath для поиска элементов на веб-странице. Для этого можно воспользоваться методом $x(expression), который позволяет выполнить XPath-выражение и вернуть список элементов, соответствующих этому выражению.

В чем разница между локаторами и селекторами в Playwright?

Локатор в Playwright – это объект, представляющий конкретный элемент на странице. Он возвращается такими методами, как page.locator(selector), elementHandle.locator() и locator.locator(selector). С помощью локатора можно выполнять действия с элементом, кликать по нему, вводить текст или проверять его свойства.

Селектор – это строка, описывающая правила поиска элементов на странице. Селекторы используются для поиска всех элементов, соответствующих определённому критерию. Их можно передавать в методы типа $$(селектор) и $x(выражение), чтобы получить список элементов.

Как получить текст из локатора в Playwright?

Вы можете получить текст из локатора с помощью метода textContent(). Например, const text = await locator.textContent();.

Перевод статьи «How to Use Playwright Locators: A Detailed Guide».