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

Бонус: если вам нравится наш контент и эта статья Тест веб-автоматизации, вы можете присоединиться к нашему сообществу Slack по автоматизации веб-браузера.

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

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

Без браузера и Puppeteer легко интегрируются в ваш проект и позволяют вам оставаться на вершине тестирования, а также меняющихся требований. Мы рассмотрим, что представляют собой оба инструмента, и рассмотрим несколько простых примеров.

Кстати, многие крупные бренды используют Browserless для автоматизации тестирования своих сайтов, например, вот как это реализовала Samsara.

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

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

Кукловод и без браузера

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

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

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

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

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

npm i puppeteer

Как только вы запустите эту команду, все готово!

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

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

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

Пример автоматизации тестирования сайта 1:

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

См. код примера 1 ниже. Обратите внимание на закомментированный раздел в строке 5. Здесь вы должны добавить свой токен API без браузера для запуска в вашей среде без браузера.

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 [title of your script] в своем терминале, и вы должны получить снимок экрана, выведенный в корень вашего каталога.

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

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

Пример автоматизации тестирования сайта 2:

В этом примере я хочу показать /stats API, который предоставляет нам Browserless. API /stats основан на проекте Google Lighthouse и предоставляет вам показатели производительности, доступности, размера и многое другое. Как упоминалось в документации, 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). Довольно хорошо!

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

Если вам нравится наш контент, вы можете проверить, как наши клиенты используют браузер без браузера для различных вариантов использования: