Тестирование Playwright: как запустить его в облаке с помощью Browserless?

Что такое Playwright?

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

Автоматизация Playwright поддерживает Chromium, Firefox и WebKit, что позволяет вам тестировать в разных браузерах. Она поддерживает языки программирования, такие как Java, Python, C# и NodeJS. Playwright распространяется по лицензии Apache 2.0 и наиболее популярен в NodeJS и Javascript/Typescript.

Что такое Browserless?

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

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

У вас есть замечательные идеи или сомнения по поводу веб-скрапинга и Browserless?
Давайте посмотрим, что другие разработчики делятся на Discord и Telegram!

Почему стоит выбрать Playwright Automation?

Преимущества Playwright Automation включают в себя:

1. Поддержка кросс-браузерности: Playwright работает с Chromium, Firefox и WebKit, что позволяет тестировать в нескольких браузерах с использованием одной платформы.

2. Тестирование «от конца до конца»: Она поддерживает тестирование полного стека от взаимодействий на стороне клиента до API на стороне сервера.

3. Безголовый режим: Playwright может запускать тесты в безголовом режиме для более быстрого выполнения и лучшей эффективности использования ресурсов.

4. Управление несколькими вкладками и браузерами: Она позволяет одновременно управлять несколькими вкладками и браузерами.

5. Автоматические ожидания: Playwright автоматически ожидает готовности элементов, прежде чем взаимодействовать с ними, что сокращает количество нестабильных тестов.

6. Перехват сети: Она может перехватывать сетевые запросы, что упрощает имитацию различных сетевых условий или подделку API.

7. Поддержка кроссплатформенности: Playwright работает в Windows, macOS и Linux, что делает его универсальным для различных сред.

8. Поддержка интеграции CI/CD: Playwright поддерживает интеграцию CI/CD. Он даже предоставляет Docker-образы для некоторых языковых привязок.

9. Поддержка TypeScript "из коробки": Поддержка языка TypeScript не требует никакой конфигурации, так как он может понимать ваш код TypeScript и JavaScript.

10. Поддержка инструментов отладки: Тесты Playwright поддерживают различные варианты отладки, чтобы сделать его удобным для разработчиков. Некоторые из вариантов отладки включают Playwright Inspector, отладчик VSCode, инструменты разработчика браузера и журналы трассировки в консоли просмотра.

Фреймворк автоматизированного тестирования Playwright

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

Основные компоненты и процессы

1. Клиент (сценарий автоматизации):

Playwright изначально поддерживает JavaScript и TypeScript, а также предоставляет привязки для Java, Python и C#, что позволяет пользователям писать сценарии автоматизации на этих языках.
Пользователи пишут тестовые сценарии на своем предпочитаемом языке, включая тестовые случаи, интерактивные команды и утверждения. JSON часто используется для конфигурации и обмена данными, чтобы обеспечить эффективную передачу данных.

2. WebSocket-соединение:

• Pукопожатие: При выполнении тестового сценария клиент устанавливает соединение с сервером Playwright (Node.js) и выполняет первоначальное рукопожатие, чтобы гарантировать установление связи.

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

• Открытое и постоянное соединение: Соединение WebSocket будет оставаться открытым и постоянным на протяжении всей сессии, что позволит тестовому сценарию продолжать взаимодействовать с браузером.

• Закрытие соединения: По завершении теста клиент или сервер может закрыть соединение, что означает окончание сессии.

3. Сторона сервера (Node.js):

• Сервер Node.js: Сторона сервера управляется приложением Node.js и координирует взаимодействие между клиентским скриптом и браузером.
• Обработка команд и событий: Сервер Node.js получает команды от клиента, обрабатывает и преобразует их в инструкции для браузера, отслеживает события от браузера и пересылает их клиенту.

4. Автоматизация браузера (CDP и CDP+):

• CDP (Протокол инструментов разработчика Chrome): Playwright использует CDP для взаимодействия с браузерами на основе Chromium. CDP управляет рендерингом браузера, сеансом и сетевыми процессами, чтобы обеспечить плавный рендеринг страниц, управление сеансами и сетевые взаимодействия.
• CDP+: Для браузеров, таких как Firefox и WebKit (Safari), Playwright использует расширение протокола, подобное CDP, чтобы обеспечить согласованность API между различными браузерами. Каждый процесс браузера (например, рендеринг и сеть) точно управляется, чтобы имитировать реальное взаимодействие пользователей.

Как запустить автоматизацию Playwright в облаке с помощью Browserless?

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

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

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

1. Получите API KEY и перейдите на страницу меню Browserless в клиенте Nstbrowser, или вы можете нажать здесь для доступа

Определение цели тестирования

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

1. Посещение целевого веб-сайта https://www.airbnb.com/.
2. Нажатие на "Панель личного кабинета" в правом верхнем углу.
3. Нажатие на кнопку "Продолжить" в форме для запуска отправки формы.
4. Просмотр информации об ошибках.

Инициализация проекта

Выполните следующие действия, чтобы установить Playwright и запустить тестовый скрипт

Шаг 1: Создайте новую папку в Vs code

Шаг 2: Откройте терминал Vs code и выполните следующую команду

npm init -y
npm install playwright @playwright/test

Шаг 3: Создайте связанные файлы

1. Файл playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  //  тестовые файлы для запуска
  testDir: './tests',

  // тайм-аут для каждого теста
  timeout: 30 * 1000,

  // тайм-аут для всего запуска теста
  expect: {
    timeout: 30 * 1000,
  },

  // Отчетчик для использования
  reporter: 'html',

  // Шаблоны glob или регулярные выражения для игнорирования тестовых файлов.
  testIgnore: '*test-assets',
  
  // Шаблоны glob или регулярные выражения, соответствующие тестовым файлам.
  testMatch: '*tests/*.spec.ts',
});

2. tests/browserless.spec.ts тестовые скрипты

• Запуск браузера требует передачи соответствующей конфигурации (полная конфигурация доступна в LaunchNewBrowser)
• Параметр proxy обязателен

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

let page: Page;

async function createBrowser() {
  const token = 'your api token'; // обязателен
  const config = {
    proxy:
      'your proxy', // обязателен; формат ввода: схема://пользователь:пароль@хост:порт например: http://пользователь:пароль@localhost:8080
    // platform: 'windows', // поддержка: windows, mac, linux
    // kernel: 'chromium', // поддержка только: chromium
    // kernelMilestone: '124', // поддержка: 113, 120, 124
    // args: {
    //   '--proxy-bypass-list': 'detect.nstbrowser.io',
    // }, // аргументы браузера
    // fingerprint: {
    //   userAgent:
    //     'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.85 Safari/537.36',
    // },
  };
  const query = new URLSearchParams({
    token: token, // обязателен
    config: JSON.stringify(config),
  });

  const browserWSEndpoint = `ws://less.nstbrowser.io/connect?${query.toString()}`;
  const browser = await chromium.connectOverCDP(browserWSEndpoint);
  const context = await browser.newContext();
  const page = await context.newPage();

  return page;
}

function logger(text: string) {
  console.log(text);
}

test.beforeEach(async () => {
  if (!page) {
    page = await createBrowser();
  }
  await page.goto('https://www.airbnb.com/');
});

test.describe('Browserless Test', () => {
  test('Verify Airbnb Website Login Error Message', async () => {
    try {
      logger(`go to the target page ${await page.url()}`);
      
      // Проверяем заголовок страницы
      const title = await page.title();
      logger(`Заголовок страницы: ${title}`);

      // Ожидаем появления кнопки с атрибутом aria-label="Main navigation menu"
      await page.waitForSelector('[aria-label="Main navigation menu"]');
      // Нажимаем на кнопку с атрибутом aria-label="Main navigation menu"
      await page.click('[aria-label="Main navigation menu"]');

      // Ожидаем появления ссылки с текстом "Sign up"
      await page.waitForSelector('a:has-text("Sign up")');
      // Нажимаем на ссылку с текстом "Sign up"
      await page.click('a:has-text("Sign up")');

      await page.click('span:has-text("Continue")');

      // // Получаем сообщение об ошибке с id="phone-number-error-phone-login"
      const text = await page.textContent('#phone-number-error-phone-login');
      logger(`Сообщение об ошибке: ${text}`);
      expect(text).toBe('Phone number is required.');

      await page.close();
      await page.context().close();
    } catch (error) {
      console.error(error);
    }
  });
});

Структура файла проекта выглядит следующим образом

Выполнение проекта

После инициализации проекта выше, мы можем начать запуск нашего проекта! Теперь откройте терминал Vs code и выполните:

npx playwright test

Команды здесь можно в основном разбить на

• Используйте команду npx, чтобы выполнить команду playwright
• Playwright найдет файл конфигурации playwright.config.ts текущего проекта и получит базовую информацию о конфигурации
• Основываясь на содержимом файла конфигурации, найдите соответствующий тестовый файл в текущем каталоге проекта и запустите выполнение

Вывод результата

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

Мы можем просмотреть отчет о тестировании, выполнив следующую команду:

npx playwright show-report

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

Подведем итоги

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

В этом полном пошаговом руководстве мы узнали:

1. Мощь Browserless
2. Как легко извлекать данные с помощью Browserless
3. Анализ осмысленных результатов

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

Начните пользоваться мощью Browserless прямо сейчас!