Начало работы с автоматизацией тестирования веб-сайтов

Экосистема разработки программного обеспечения находится в постоянном движении. Это особенно верно, когда речь идет о создании веб-сайтов и других приложений. Меняются не только используемые технологии, но и требования и критерии приемки. Именно здесь такие технологии, как безголовая архитектура, могут помочь в непрерывной интеграции и непрерывной доставке (CI/CD).

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

Безголовое браузерное тестирование

Прежде всего, давайте объясним, что такое безголовое браузерное тестирование. Безголовое браузерное тестирование позволяет автоматически управлять веб-страницей без графического интерфейса пользователя (GUI). Это позволяет тестировщику/пользователю/QA/разработчику проводить автоматизированное тестирование веб-приложения без необходимости вручную тестировать функциональность браузеров, которые мы визуально видим на своих мониторах. Представьте себе, что робот тестирует ваше приложение за вас! Это практически то же самое, что и тестирование без браузера, только зачастую это простой скрипт. Безголовое браузерное тестирование ускоряет процесс тестирования, а также обеспечивает быструю обратную связь во время разработки.

Puppeteer и безбраузерное тестирование

Итак, вы, возможно, думаете, как Puppeteer и Browserless вписываются в это уравнение?

Puppeteer предоставляет отличный высокоуровневый API для управления Chrome (как безголовым, так и головным). Puppeteer поддерживается командой Chrome DevTools. Большинство вещей, которые можно сделать вручную в браузере, можно выполнить с помощью Puppeteer. Это позволяет нам легко выполнять действия для тестирования функциональности нашего пользовательского интерфейса. Puppeteer также позволяет создавать скриншоты и PDF-файлы страниц при выполнении действий в приложении для тестирования.

Puppeteer сам по себе является отличным инструментом для автоматизации тестирования веб-сайта. Однако Browserless может вывести автоматизацию тестирования сайта на новый уровень. Допустим, вы хотите запускать тесты в производственной среде, но не хотите добавлять Puppeteer в качестве дополнительной зависимости. Здесь на помощь приходит Browserless. С Browserless нет необходимости устанавливать дополнительные пакеты или зависимости, и он совместим с Puppeteer. Все, что вам нужно сделать, это подключить и играть. Это снимает огромную нагрузку с вашего приложения. Вы можете запускать тесты с помощью Puppeteer в dev-окружении, а тем временем запускать Browserless в prod-окружении, не беспокоясь о дополнительном багаже.

Настройка

Прежде чем мы перейдем к примерам, давайте настроим наши окружения. К счастью, нам не нужно устанавливать много зависимостей. Есть только одна … Puppeteer.

npm i puppeteer
Вход в полноэкранный режим Выйти из полноэкранного режима

После выполнения этой команды вы можете приступать к работе!

Самое замечательное в другом инструменте, который мы используем, Browserless, это то, что не нужно ничего настраивать, кроме создания учетной записи. Давайте перейдем на сайт www.browserless.io и создадим учетную запись. После создания учетной записи вы попадете на приборную панель Browserless.

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

Я также должен упомянуть, что Browserless предоставляет отличный онлайн-инструмент отладчика, который позволяет вам протестировать ваши скрипты, чтобы увидеть, как они работают. Если вы не хотите возиться с настройкой локальной машины, это отличный вариант для использования.

Пример 1:

В этом примере мы собираемся проверить функциональность классного сайта, созданного Тимом Холманом (@twholman) и Тобиасом ван Шнайдером (@vanschneider) под названием «The Passive Aggressive Password Machine». Их сайт просит вас ввести пароль и сообщает, насколько хорош ваш пароль. Этот тест будет очень простым. Мы проверим функциональность сайта, используя Puppeteer для ввода пароля в область ввода. Затем мы сделаем снимок экрана, чтобы убедиться, что сайт дал пользователю обратную связь. Снимок экрана — это простейшая форма проверки. Если вы хотите сделать этот тест еще более надежным, вы можете программно проверить, что сайт выдает обновленную обратную связь по введенному паролю.

Смотрите код для примера 1 ниже. Обратите внимание на закомментированную секцию в строке 5. Именно здесь вы должны добавить токен API Browserless, чтобы запустить тест в среде Browserless.

const puppeteer = require("puppeteer");

const scrape = async () => {
    const browser = await puppeteer.launch({headless: false});
    // const browser = await puppeteer.connect({ browserWSEndpoint: 'wss://chrome.browserless.io?token=[ADD BROWSERLESS API TOKEN HERE]' })

    const page = await browser.newPage();

    await page.goto('https://trypap.com/');

    await page.setViewport({ width: 1920, height: 1080 });

    await page.type('input[placeholder="Please Enter a Password"]', 'BrowserlessIsCool1234');

    await page.waitForTimeout(2000);

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

    await browser.close();
};
scrape();
Вход в полноэкранный режим Выход из полноэкранного режима

Как только вы установите этот скрипт на локальной машине, запустите node [название вашего скрипта] в терминале, и вы получите скриншот, выведенный в корень вашей директории.

Вот как это выглядит:

Поздравляем! Вы официально выполнили простой тест пользовательского интерфейса.

Пример 2:

В этом примере я хочу продемонстрировать API /stats, который предоставляет нам Browserless. API /stats работает на базе проекта Lighthouse от Google и предоставляет вам метрики о производительности, доступности, размере и многом другом. Как указано в документации, API /stats довольно прост в использовании. Чтобы собрать эти данные, отправьте запрос POST на https://chrome.browserless.io/stats с простой полезной нагрузкой JSON, содержащей действительный URL. В результате будет выведен большой объем данных, около 370 кб. Вы можете сузить круг выводимых данных, добавив объект config с определенными категориями, которые вы хотите видеть. Это похоже на то, как вы используете API узла Lighthouse. В нашем примере мы будем проверять только категорию производительности.

Для получения результатов мы запустим команду curl, но если вы хотите выполнить это на JavaScript, вы можете сделать то же самое с помощью fetch API. Для этого примера мы запустим тесты Lighthouse на сайте Passive Aggressive Password Machine, который мы использовали в первом примере. Ниже приведена команда curl.

curl -X POST 
  https://chrome.browserless.io/stats?token=[ADD BROWSERLESS API TOKEN HERE] 
  -H 'Cache-Control: no-cache' 
  -H 'Content-Type: application/json' 
  -d '
{
  "url": "https://trypap.com/",
    "config": {
        "extends": "lighthouse:default",
        "settings": {
            "onlyCategories": ["performance"]
        }
    }
}'  
Войти в полноэкранный режим Выйти из полноэкранного режима

Это должно вернуть объект JSON с оценкой производительности Lighthouse. На момент написания этой статьи trypap.com получил 0,9 балла производительности (по шкале от 0 до 1). Довольно неплохо!

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

Оцените статью
devanswers.ru
Добавить комментарий