Playwright vs Selenium - детальное сравнение

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

Обзор Playwright

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

Ключевые особенности Playwright

• Встроенный тестовый фреймворк: Playwright поставляется в комплекте с Playwright Test, предоставляя полноценный фреймворк для автоматизации тестирования, который включает выполнение тестов, отчетность, ассерты (проверки и условия) и многое другое.
• Механизм автоматического ожидания (Auto-Wait): Playwright интеллектуально ожидает готовности элементов перед взаимодействием с ними, что сводит к минимуму необходимость в добавлении ручных ожиданий (wait statements).
• Кроссбраузерное тестирование: Поддерживает Chromium, Firefox и WebKit, что критически важно для всестороннего тестирования в разных браузерах.
• Параллельное выполнение: Встроенная поддержка параллельного запуска тестов значительно сокращает общее время выполнения.
• Trace Viewer: Инструмент для отладки, который записывает ход выполнения теста, позволяя инспектировать поведение и выявлять проблемы. Мы в Pingera недавно добавили трассировки во все наши проверки с Playwright.
• Headless Mode: Возможность запускать тесты в “безголовом” режиме для повышения скорости выполнения и интеграции в CI/CD пайплайны.

Как запустить тесты Playwright

• Установите Playwright с помощью npm:

npm install --save-dev playwright

• Создайте тестовый скрипт, используя @playwright/test:

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

test('пример теста', async ({ page }) => {
  await page.goto('https://example.com')
  const title = await page.title()
  expect(title).toBe('Example Domain')
})

• Запустите тест с помощью Playwright CLI:

npx playwright test

Обзор Selenium

Selenium является основой автоматизации браузеров уже более десяти лет. Он широко используется в индустрии и поддерживает множество языков, включая Java, Python, C# и JavaScript. Важно отметить, что Selenium — это, прежде всего, инструмент для автоматизации браузера, а не полноценный фреймворк для тестирования. Это означает, что для ассертов, отчетности и параллельного выполнения тестов вам потребуется интегрировать дополнительные библиотеки.

Ключевые особенности Selenium

• Мультиязыковая поддержка: Selenium поддерживает широкий спектр языков программирования, что делает его гибким для команд с разнообразными технологическими стеками.
• Кроссбраузерное тестирование: Работает со всеми основными браузерами, включая Chrome, Firefox, Safari и Edge.
• Протокол WebDriver: Selenium использует протокол WebDriver, который является стандартом для автоматизации браузеров.
• Поддержка реальных устройств: Хорошо интегрируется с облачными сервисами для тестирования на реальных устройствах.
• Обширная экосистема: Доступно большое количество плагинов, библиотек и ресурсов.

Настройка и запуск тестов Selenium

Пример того, как запустить тест Selenium на Node.js:

• Установите Selenium WebDriver

Вы можете добавить Selenium WebDriver в ваш проект с помощью NPM:

npm install selenium-webdriver

Selenium WebDriver — это библиотека, которая позволяет вашим тестам взаимодействовать с браузерами.

Написание базового теста Selenium

• Импортируйте модуль Selenium WebDriver

В вашем тестовом файле (например, test.js) импортируйте пакет selenium-webdriver:

const { Builder, By, until } = require('selenium-webdriver');

• Настройте драйвер браузера

Используйте Builder для настройки тестовой среды. Вот простой пример:

async function exampleTest() {
  // Инициализируем новый экземпляр браузера
  const driver = await new Builder().forBrowser('chrome').build();

  try {
    // Переходим на веб-сайт
    await driver.get('https://www.example.com');

    // Выполняем действия или ассерты
    const title = await driver.getTitle();
    console.log('Page Title:', title);

    // Находим элемент и взаимодействуем с ним
    const element = await driver.findElement(By.name('exampleInput'));
    await element.sendKeys('Test Input');

    // Ждем выполнения условия, если это необходимо
    await driver.wait(until.titleIs('Expected Title'), 5000);
  } finally {
    // Завершаем работу и закрываем браузер
    await driver.quit();
  }
}

// Запускаем тест
exampleTest();

Запуск теста

Чтобы запустить ваш тест, выполните команду node test.js в терминале.

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

Playwright против Selenium: Ключевые различия

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

Примеры кода Playwright и Selenium

Пример Selenium

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

const { Builder, By, until } = require('selenium-webdriver');
const fs = require('fs');

async function loginAndCaptureScreenshot() {
  // Инициализируем драйвер браузера
  const driver = await new Builder().forBrowser('chrome').build();

  try {
    // Шаг 1: Переходим на страницу входа
    await driver.get('https://www.example-service.com/login');

    // Шаг 2: Вводим учетные данные
    await driver.findElement(By.id('username')).sendKeys('your-username');
    await driver.findElement(By.id('password')).sendKeys('your-password');

    // Шаг 3: Нажимаем кнопку входа
    await driver.findElement(By.id('login-button')).click();

    // Шаг 4: Ждем, пока загрузится страница транзакций
    await driver.wait(until.elementLocated(By.id('recent-transactions')), 10000);

    // Шаг 5: Загружаем последние транзакции
    const transactionsElement = await driver.findElement(By.id('recent-transactions'));

    // Проверяем, что транзакции видны (опционально)
    const isDisplayed = await transactionsElement.isDisplayed();
    console.log('Transactions loaded:', isDisplayed);

    // Шаг 6: Делаем скриншот
    const screenshot = await driver.takeScreenshot();
    fs.writeFileSync('screenshot.png', screenshot, 'base64');
    console.log('Screenshot taken and saved as screenshot.png');

  } catch (error) {
    console.error('An error occurred:', error);
  } finally {
    // Шаг 7: Закрываем браузер
    await driver.quit();
  }
}

// Запускаем тест
loginAndCaptureScreenshot()

Пример Playwright

А вот тот же самый тест, реализованный на Playwright:

const { chromium } = require('playwright');

async function loginAndCaptureScreenshot() {
    // Шаг 1: Переходим на страницу входа
    await page.goto('https://www.example-service.com/login');

    // Шаг 2: Вводим учетные данные
    await page.getByLabel('Username or email address').fill('username');
    await page.getByLabel('Password').fill('password');

    // Шаг 3: Нажимаем кнопку входа
    await page.getByRole('button', { name: 'Sign in' }).click();

    // Шаг 4: Кликаем на последние транзакции
    // Playwright автоматически ждет, пока элемент не станет видимым
    await page.getByLabel('Transactions').click()

    // Шаг 5: Делаем полностраничный скриншот
    await page.screenshot({ path: 'screenshot.png', fullPage: true });
}

// Запускаем тест
loginAndCaptureScreenshot()

Ключевые различия между двумя примерами:

• Локаторы: Playwright использует более современные CSS-локаторы вместо поиска по ID или классу. ID и классы могут измениться при визуальном обновлении сайта, что может сломать тесты. Использование локаторов, ориентированных на пользователя, таких как getByLabel или getByRole, делает тесты более устойчивыми.
• Ожидания: Playwright включает автоматическое ожидание, что устраняет необходимость добавлять ручные таймауты (await driver.wait(…)) в код.

Playwright против Selenium: Плюсы и Минусы

Playwright

• Плюсы: Легкий старт, встроенный тестовый фреймворк, быстрое выполнение, современная архитектура, прекрасная поддержка JavaScript/TypeScript.
• Минусы: Меньше поддержки “устаревших” языков (например, C#), ограниченные возможности тестирования на реальных мобильных устройствах.

Selenium

• Плюсы: Устоявшийся инструмент с огромным сообществом, поддерживает множество языков, отличная интеграция с облачными сервисами для тестирования на реальных устройствах.
• Минусы: Требует больше предварительной настройки, медленное выполнение тестов, высокая кривая обучения.

Playwright против Selenium: Какое решение выбрать?

Когда использовать Playwright

• Если вы начинаете новый проект и хотите быстро достичь покрытия тестами.
• Если ваша команда имеет опыт работы с JavaScript или TypeScript.
• Если вам нужны встроенные функции, такие как автоматическое ожидание, запись тестов, Trace Viewer и тестирование API.

Когда использовать Selenium

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

Заключение

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

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

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

Понравился пост? В Pingera мы используем Playwright-сценарии для наших Синтетических проверок, чтобы обеспечить максимально точную симуляцию поведения пользователей. Вы можете писать собственные Playwright-скрипты на JavaScript или TypeScript, чтобы мониторить критические пользовательские сценарии 24/7. Убедитесь сами на app.pingera.ru.