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

Обзор Playwright

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

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

npm install --save-dev playwright

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')
})

npx playwright test

Обзор Selenium

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

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

npm install selenium-webdriver

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

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

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();

Запуск теста

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

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 против Selenium: Плюсы и Минусы

Playwright

Selenium

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

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

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

Заключение