QA-SDET

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

---

Что такое Playwright Codegen?

Playwright Codegen — это инструмент, который позволяет автоматически генерировать тестовый код на основе действий пользователя в браузере. Вы просто открываете браузер, выполняете нужные действия (например, клики, ввод текста, навигацию по страницам), а Codegen записывает эти действия в виде кода на выбранном языке программирования (JavaScript, TypeScript, Python, C# и др.).

Основные преимущества Playwright Codegen:

1. Экономия времени: Вам не нужно вручную писать код для каждого действия. Codegen делает это за вас.
2. Удобство для новичков: Если вы только начинаете работать с Playwright, Codegen поможет вам быстро разобраться с синтаксисом и структурой тестов.
3. Поддержка нескольких языков: Вы можете генерировать код на JavaScript, TypeScript, Python, C# и других языках.
4. Интеграция с Playwright: Сгенерированный код сразу готов к использованию в ваших тестах.
5. Интерактивный режим: Вы можете видеть, как ваши действия в браузере преобразуются в код в реальном времени.

---

Установка Playwright и запуск Codegen

Установка Playwright

Прежде чем начать использовать Codegen, необходимо установить Playwright. Это можно сделать с помощью npm (Node Package Manager):

npm install playwright

Или, если вы используете Python:

pip install playwright

После установки Playwright, убедитесь, что у вас установлены браузеры:

npx playwright install

Запуск Codegen

Чтобы запустить Codegen, выполните следующую команду в терминале:

npx playwright codegen

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

---

Примеры использования Playwright Codegen

Пример 1: Автоматизация входа на сайт

Предположим, вам нужно автоматизировать процесс входа на сайт. Вот как это можно сделать с помощью Codegen:

1. Запустите Codegen: playwright codegen
2. Откроется браузер. Перейдите на сайт, например, https://example.com/login.
3. Введите логин и пароль в соответствующие поля и нажмите кнопку «Войти».
4. Codegen автоматически сгенерирует код на выбранном языке. Например, на JavaScript это будет выглядеть так:
   
   const { test, expect } = require('@playwright/test'); test('login test', async ({ page }) => { await page.goto('https://example.com/login'); await page.fill('input[name="username"]', 'your_username'); await page.fill('input[name="password"]', 'your_password'); await page.click('button[type="submit"]'); await expect(page).toHaveURL('https://example.com/dashboard'); });

1. Сохраните этот код в файл (например, login.test.js) и запустите тест: npx playwright test

Пример 2: Автоматизация поиска на сайте

Теперь рассмотрим пример автоматизации поиска на сайте:

1. Запустите Codegen:bashCopynpx playwright codegen
2. Перейдите на сайт, например, https://example.com.
3. Введите поисковый запрос в поле поиска и нажмите Enter.
4. Codegen сгенерирует код, например, на
   
   Python:playwright.sync_api import sync_playwright def run(playwright): browser = playwright.chromium.launch(headless=False) context = browser.new_context() page = context.new_page() page.goto("https://example.com") page.fill('input[name="q"]', 'Playwright Codegen') page.press('input[name="q"]', 'Enter') page.wait_for_selector('.search-results') browser.close() with sync_playwright() as playwright: run(playwright)
   
5. Сохраните код в файл (например, search.py) и запустите его:python search.py

Пример 3: Автоматизация заполнения формы

Рассмотрим пример автоматизации заполнения формы:

1. Запустите Codegen:bashCopynpx playwright codegen
2. Перейдите на сайт, например, https://example.com/form.
3. Заполните поля формы: имя, email, телефон и выберите опцию из выпадающего списка.
4. Codegen сгенерирует код, например, на TypeScript:
   
   import { test, expect } from '@playwright/test'; test('fill form test', async ({ page }) => { await page.goto('https://example.com/form'); await page.fill('input[name="name"]', 'John Doe'); await page.fill('input[name="email"]', 'john.doe@example.com'); await page.fill('input[name="phone"]', '1234567890'); await page.selectOption('select[name="option"]', 'Option 1'); await page.click('button[type="submit"]'); await expect(page).toHaveURL('https://example.com/thank-you'); });
   
5. Сохраните код в файл (например, form.test.ts) и запустите тест:bashCopynpx playwright test

---

Преимущества использования Playwright Codegen

1. Быстрое создание тестов

Codegen позволяет быстро создавать тесты, даже если вы не знакомы с синтаксисом Playwright. Это особенно полезно для новичков или для тех, кто хочет быстро прототипировать тесты.

2. Поддержка нескольких языков

Playwright Codegen поддерживает несколько языков программирования, что делает его универсальным инструментом для команд с разными предпочтениями.

3. Интеграция с Playwright

Сгенерированный код сразу готов к использованию в ваших тестах. Вы можете легко интегрировать его в существующие тестовые сценарии или использовать как основу для более сложных тестов.

4. Интерактивный режим

Codegen работает в интерактивном режиме, что позволяет вам сразу видеть, как ваши действия в браузере преобразуются в код. Это помогает лучше понять, как работает Playwright.

---

Ограничения Playwright Codegen

1. Не всегда идеальный код

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

2. Ограниченная поддержка сложных сценариев

Codegen хорошо справляется с простыми сценариями, но для более сложных тестов (например, с использованием моков, стабов или сложных проверок) вам всё равно придется дорабатывать код вручную.

3. Зависимость от структуры страницы

Если структура страницы изменится (например, изменится HTML или CSS), сгенерированный код может перестать работать. Это требует регулярного обновления тестов.

---

Советы по использованию Playwright Codegen

1. Используйте уникальные селекторы

При генерации кода убедитесь, что Playwright использует уникальные и стабильные селекторы. Это поможет избежать проблем при изменении структуры страницы.

2. Дорабатывайте сгенерированный код

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

3. Используйте Codegen для обучения

Если вы только начинаете работать с Playwright, Codegen — отличный способ изучить синтаксис и структуру тестов. Вы можете генерировать код и анализировать его, чтобы лучше понять, как работает Playwright.

---

Заключение

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

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

Пример итогового теста на TypeScript

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

import { test, expect } from '@playwright/test';

test('complex test', async ({ page }) => {
  await page.goto('https://example.com');
  await page.fill('input[name="q"]', 'Playwright Codegen');
  await page.press('input[name="q"]', 'Enter');
  await page.waitForSelector('.search-results');
  const results = await page.$$eval('.search-results li', items => items.length);
  expect(results).toBeGreaterThan(0);
});

Этот тест проверяет, что после поиска на странице отображается хотя бы один результат.

---

Playwright Codegen — это ваш надежный помощник в мире автоматизации тестирования. Используйте его с умом, и ваши тесты станут еще эффективнее!