Playwright Inspector и генерация локаторов

Playwright Inspector — это мощный инструмент, который помогает разработчикам и тестировщикам в процессе разработки и отладки тестов с использованием Playwright. Этот инструмент позволяет интерактивно взаимодействовать с браузером, тестировать и генерировать локаторы, а также отлаживать написанные тесты.

Запуск Playwright Inspector

Playwright Inspector можно запустить, добавив кода в ваш тест. Для этого используется метод page.pause(), который при выполнении теста ставит его на паузу, предоставляя возможность открыть Inspector. Рассмотрим пример использования:

const { test, expect } = require('@playwright/test');

test('Test with inspector', async ({ page }) => {
  await page.goto('https://example.com');
  await page.pause();  // Остановит выполнение и откроет Inspector
  await expect(page).toHaveTitle('Example Domain');
});

Когда выполнение теста дойдёт до вызова page.pause(), Playwright приостановит тест, и откроется интерфейс инспектора в браузере. Это позволяет взаимодействовать с приложением, наблюдать за его состоянием, а также генерировать локаторы для элементов.

Генерация локаторов с помощью Inspector

Одна из ключевых возможностей Playwright Inspector — это автоматическая генерация локаторов. Для этого достаточно щёлкнуть правой кнопкой мыши на нужном элементе на странице в открытом окне инспектора и выбрать опцию “Copy selector”. Playwright сгенерирует локатор, который можно будет использовать в тестах.

Локаторы в Playwright могут быть разных типов, например, по CSS-селекторам, тексту, атрибутам и так далее. Инспектор автоматически анализирует структуру страницы и генерирует оптимальные селекторы для выбранных элементов.

Основные виды локаторов

  • CSS-селекторы: Наиболее часто используемый способ нахождения элементов на странице. Playwright поддерживает полный набор CSS-селекторов, что позволяет создавать гибкие и мощные локаторы. Например:

    await page.click('button.submit');

  • Текстовые локаторы: Поиск элементов по видимому тексту на странице. Это может быть полезно, когда структура DOM может изменяться, но текст остаётся стабильным. Например:

    await page.click('text="Submit"');

  • XPath-селекторы: XPath используется реже, но он полезен в случаях, когда другие методы поиска элементов не работают. XPath позволяет более точно выбрать элементы на основе их отношения к другим элементам на странице.

    await page.click('//button[text()="Submit"]');

  • Роль элементов: Playwright поддерживает поиск элементов с учётом их роли. Например, можно найти элементы, такие как кнопки или поля ввода, по их роли в DOM. Это делает тесты более надёжными, так как роль элемента в интерфейсе пользователя чаще остаётся неизменной, чем его точный CSS-селектор.

    await page.click('role=button[name="Submit"]');

Важность правильных локаторов

Правильный выбор локаторов критичен для стабильности и надёжности тестов. Использование уникальных и стойких локаторов позволяет минимизировать вероятность их поломки в случае изменений на странице. Использование таких подходов, как CSS-селекторы по классам, часто приводит к нестабильности тестов, так как классы могут меняться, особенно в сложных проектах с динамически генерируемыми классами. В этом случае лучше использовать текстовые локаторы или ролевые атрибуты.

Отладка локаторов с помощью Playwright Inspector

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

Если Playwright не может найти элемент, это может означать несколько вещей:

  • Локатор слишком общий и может совпадать с несколькими элементами.
  • Элемент ещё не загружен на странице, и нужно подождать его появления.
  • Страница изменила структуру, и локатор стал неактуальным.

Важные команды и опции инспектора

  • Выбор элемента: Щелкнув на элементе в браузере, можно увидеть его локатор в виде строки. Этот локатор можно скопировать и использовать в тестах.

  • Генерация нескольких локаторов: При работе с динамическими элементами инспектор может генерировать сразу несколько вариантов локаторов. Это удобно, если один локатор не работает на всех страницах или устройствах.

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

Пример работы с локаторами в тестах

После того как локатор был найден и сгенерирован, его можно использовать в тестах Playwright. Рассмотрим пример:

const { test, expect } = require('@playwright/test');

test('Form submission', async ({ page }) => {
  await page.goto('https://example.com/login');
  
  // Используем локатор, сгенерированный через Inspector
  await page.fill('input[name="username"]', 'user123');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');
  
  // Проверка успешного редиректа
  await expect(page).toHaveURL('https://example.com/dashboard');
});

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

Работа с динамическими элементами

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

await page.waitForSelector('text="Welcome"');
await page.click('button#logout');

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

Заключение

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

Оглавление