Как запускать автоматизированные тесты с Puppeteer и Browserless?

Puppeteer: Что это и его возможности

Puppeteer — это библиотека Node.js. С помощью Puppeteer вы можете тестировать свои веб-сайты во всех браузерах на базе Chromium, включая Chrome, Microsoft Edge Chrome и Chromium. Кроме того, Puppeteer можно использовать для веб-скрапинга, автоматизации и тестирования.

Поскольку Puppeteer взаимодействует только через протокол DevTools, поддерживаются только браузеры, реализующие этот протокол. Таким образом, Safari (WebKit), Firefox и IE пока не поддерживаются.

Что такое тестирование с помощью бессерверного браузера?

Тестирование с помощью бессерверного браузера позволяет автоматически управлять веб-страницами без использования графического интерфейса (GUI).

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

По сути, тестирование с помощью бессерверного браузера работает именно так, хотя обычно это делается с помощью простого скрипта. Это ускоряет процесс тестирования и обеспечивает быструю обратную связь во время разработки.

Что такое Browserless?

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

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

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

Почему Puppeteer лучше, чем аналогичные платформы тестирования?

• Мощный набор функций: Puppeteer обеспечивает полный контроль над браузерами Chrome и Chromium, поддерживая автоматизированные задачи, такие как навигация по страницам, заполнение форм, создание скриншотов, генерация PDF-файлов и т.д. Он может имитировать операции пользователя в браузере для очень сложного тестирования.
• Бессерверный режим: Puppeteer поддерживает бессерверный режим браузера, что делает его более эффективным и легким при выполнении автоматизированных задач в фоновом режиме, без загрузки графического интерфейса, что повышает скорость и использование ресурсов.
• Поддержка кросс-браузерного тестирования: Помимо Chromium, Puppeteer также поддерживает кросс-браузерное тестирование через протокол WebDriver, с высокой совместимостью и адаптивностью к различным средам браузеров.
• Поддержка сообщества и полная документация: Puppeteer имеет активное сообщество разработчиков и подробную документацию, позволяя разработчикам быстро приступить к работе и получить поддержку от сообщества.
• Тесная интеграция с Chrome: Глубокая интеграция Puppeteer с Chrome/Chromium делает его превосходным в задачах автоматизации браузера, особенно в мониторинге производительности страниц и точности сканирования.

Автоматизированные тесты Puppeteer с Browserless

Давайте протестируем функцию входа в систему панели управления Nstbrowser. Нам нужно

• посетить Nstbrowser Client
• затем заполнить учетную запись и пароль с помощью программы автоматизации puppeteer
• и, наконец, нажать кнопку входа в систему, чтобы войти в систему

Шаг 1: Установка Puppeteer.

Здесь мы выбираем более легкий puppeteer-core:

pnpm install puppeteer-core

Шаг 2: Получите свой API Key.

Вы можете найти свой API Key на панели Browserless:

Шаг 3: Подключение к Browserless

import puppeteer from "puppeteer-core";

const token = "your api key";

const config = {
    proxy: 'your proxy', // required; input format: schema://user:password@host:port eg: http://user:password@localhost:8080
    // platform: 'windows', // support: windows, mac, linux
    // kernel: 'chromium', // only support: chromium
    // kernelMilestone: '128', // support: 128
    // args: {
    //     "--proxy-bypass-list": "detect.nstbrowser.io"
    // }, // browser args
    // 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', // userAgent supportted since v0.15.0
    // },
};

const query = new URLSearchParams({
  token: token, // required
  config: JSON.stringify(config),
});

const browserWSEndpoint = `https://less.nstbrowser.io/connect?${query.toString()}`;

const getBrowser = async () =>
  puppeteer.connect({
    browserWSEndpoint,
    defaultViewport: null,
  });

const main = async (req, res) => {
  try {
    const browser = await getBrowser();
    const page = await browser.newPage();
    await page.goto("https://app.nstbrowser.io/login");
  } catch (error) {
    console.error(error);
  }
};

main();

Теперь, когда мы успешно подключились к Browserless и получили доступ к нашему целевому сайту, давайте завершим тестовый поток и проверим результаты, сделав снимки экрана.

await page.waitForSelector('input');

const inputs = await page.$$('input');

await inputs[0].type('*****', { delay: 100 }); // your email 
await inputs[1].type('*****', { delay: 100 }); // your password

const buttons = await page.$$('button');
await buttons[1].click();

await page.waitForResponse((req) => {
  const url = "https://api.nstbrowser.io/api/v1/passport/login";
  if (req.url() === url) {
    return true;
  }
});

await page.screenshot({ fullPage: true, path: "./nstbrowser.png" });

Мы видим, что мы успешно вошли в систему Nstbrowser и перенаправлены на панель управления, что означает, что наш тест прошел.

Разница между Puppeteer и другими платформами

Вот подробное сравнение Puppeteer с различными другими платформами тестирования:

1. Puppeteer vs. WebKit/Blink:

• Puppeteer — это библиотека Node.js, предоставляющая высокоуровневый API для управления бессерверными браузерами Chrome или Chromium.

• WebKit и Blink — это движки компоновки, используемые браузерами Safari и Chromium соответственно. Они отвечают за отрисовку веб-страниц, в то время как Puppeteer управляет браузером для автоматизации задач.

2. Puppeteer vs. Selenium:

• Puppeteer напрямую взаимодействует с Chrome/Chromium через протокол отладки, что делает его тесно интегрированным с этими браузерами.

• Selenium использует Chromedriver для управления и контроля браузеров, что позволяет ему поддерживать несколько браузеров (например, Firefox, Safari, Edge). Puppeteer, с другой стороны, ориентирован на Chrome/Chromium.

3. Puppeteer vs. PhantomJS:

• Puppeteer — это современная библиотека на основе Node.js, которая управляет бессерверным Chrome/Chromium.

• PhantomJS — это бессерверный браузер на основе WebKit/Blink. Однако PhantomJS устарел и больше не поддерживается активно, что делает Puppeteer более надежным и эффективным выбором для большинства задач автоматизации.

4. Puppeteer vs. Nightmare.js:

• Puppeteer использует протокол Chrome DevTools для управления Chrome/Chromium, что дает ему глубокий доступ к функциональности браузера.

• Nightmare.js — это библиотека JavaScript, которая использует Electron для отрисовки веб-страниц. Он был создан для простоты использования, но ему не хватает производительности и поддержки современных браузеров, которые предлагает Puppeteer.

5. Puppeteer vs. Cypress:

• Puppeteer — это библиотека Node.js, которая автоматизирует задачи браузера, такие как веб-скрапинг, генерация PDF-файлов и захват скриншотов.

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

Заключительные мысли

Puppeteer — это мощный и замечательный инструмент для завершения веб-тестирования. С помощью Browserless вы можете использовать Puppeteer для выполнения любых задач автоматизации.

Надеюсь, эта статья откроет для вас совершенно новый мир автоматизации веб-тестирования. Как всегда, обязательно ознакомьтесь с блогами Nstbrowser и учебными пособиями по документации для получения более интересного контента по автоматизации веб-браузеров! Счастливого кодинга!