Учебник: Тестирование пользовательского интерфейса с помощью Jest и Puppeteer

1. Тестирование пользовательского интерфейса с Jest и Puppeteer: настройка проекта
2. Тестирование пользовательского интерфейса с Jest и Puppeteer: написание реального теста
3. Тестирование с Jest и Puppeteer: тестирование внешнего интерфейса и некоторые другие
4. Тестирование с Jest и Puppeteer: куда идти отсюда
5. Бонус: тестирование с Jest и Puppeteer, визуальная отладка

Я начал рассматривать тестирование с Jest и Puppeteer сразу после выхода библиотеки. Кукловод имеет довольно интересный API.

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

Мы будем тестировать с Jest и Puppeteer. Даже если он все еще находится в стадии разработки и API может подвергнуться изменениям, Puppeteer останется здесь.

В прошлый день я писал несколько тестов, и в то же самое время я наткнулся на пост Кента С. Доддса.

« Обеспечение устойчивости ваших тестов пользовательского интерфейса к изменениям Объясняет, как использовать атрибут data- *, чтобы сделать тестирование пользовательского интерфейса менее хрупким.

Атрибуты data- * - это в основном пользовательские атрибуты данных, которые вы можете определить практически для каждого элемента HTML. Это полезно, особенно для обмена данными с Javascript.

Кент пришел в нужное время, потому что, честно говоря, я делал что-то вроде:

await page.waitForSelector ("# contact-form"); ожидайте page.click ("# имя"); await page.type ("# name", user.name);

(Вы знаете, я больше на стороне вещей)

Хотя я до сих пор не согласен с использованием data- * для тестирования, я должен признать, что, тем не менее, это хороший подход. Это полезно для больших приложений, но сейчас я буду придерживаться классического способа выбора элементов.

Psst .. ты думаешь Интеграционное тестирование ? Проверьте Cypress >> Лучшее Javascript сквозное тестирование с Cypress

Моя цель - протестировать контактную форму.

Учти это:

Он имеет следующие элементы:

1. ввод имени
2. ввод по электронной почте
3. телефонный вход
4. текстовая область
5. флажок конфиденциальности
6. кнопка отправки

Что я хочу проверить?

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

Тестирование пользовательского интерфейса с Jest и Puppeteer: настройка проекта

Давайте посмотрим на инструменты.

Шутка : рамки тестирования от Facebook. Jest предоставляет платформу для автоматического тестирования вместе с базовой библиотекой утверждений (Expect).

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

обманщик : библиотека Node.js для генерации случайных данных. Имена, телефоны, адреса. Да, это как Faker для PHP.

Если у вас уже есть проект, установите библиотеки с помощью:

Npm я шучу кукловод фейкер --save-dev

Установка Puppeteer займет некоторое время, потому что он поставляется с собственной версией Chromium.

Chromium - это браузер с открытым исходным кодом, стоящий за Chrome. Chromium и Chrome обладают практически одинаковыми функциональными возможностями, за исключением некоторых деталей лицензии.

После установки настройте Jest в package.json. Команда test должна указывать на исполняемый файл Jest:

"scripts": {"test": "jest"}

Также в Jest я хотел бы написать:

импортный кукловод из "кукловода";

Для этого нам нужен Babel для Jest. Давайте вытянем зависимости с помощью:

npm и babel-core babel-jest babel-preset-env --save-dev

и создайте новый файл с именем .babelrcinside в папке вашего проекта:

{"presets": ["env"]}

Имея это в виду, мы можем начать писать простой тест.

Тестирование пользовательского интерфейса с Jest и Puppeteer: написание реального теста

Для начала создайте новый каталог в папке вашего проекта: это может быть спецификация тестера. Затем создайте новый файл с именем form.spec.jsinside в том же каталоге.

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

Для того, чтобы импортировать Faker и Puppeteer:

импорт фейкер из "фейкер"; импортный кукловод из "кукловода";

Сконфигурируйте URL-адрес формы (вы можете проверить версию разработки на localhost, а не связываться с реальным веб-сайтом):

const APP = "https://www.change-this-to-your-website.com/contact-form.html";

Создайте поддельного пользователя с помощью Faker:

const lead = {name: faker.name.firstName (), электронная почта: faker.internet.email (), телефон: faker.phone.phoneNumber (), сообщение: faker.random.words ()};

Определите некоторые переменные для кукловода:

пустить страницу; пусть браузер; постоянная ширина = 1920; постоянная высота = 1080;

Определите, как должен вести себя кукловод:

beforeAll (async () => {browser = await puppeteer.launch ({headless: false, slowMo: 80, args: [`--window-size = $ {width}, $ {height}`]}); page = await browser.newPage (); await page.setViewport ({ширина, высота});}); afterAll (() => {browser.close ();});

И beforeAll, и afterAll являются методами Jest. Вкратце, перед запуском любого теста мы должны запустить браузер с Puppeteer. Затем можно открыть новую страницу с помощью browser.newPage ().

Когда тестовый набор заканчивается, браузер должен быть закрыт с помощью browser.close ().

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

Несколько замечаний по поводу приведенного выше кода:

Вы можете видеть, что я запускаю Chrome в своем собственном окне с заголовком: false. Это потому, что мне нужно было записать видео, чтобы показать вам, как работает тест.

В реальной жизни вы не хотите видеть реальный браузер. Просто удалите все параметры из метода launch ().

То же самое для setViewport (), вы можете удалить его. Или, что еще лучше, вы можете создать две разные среды: одну для визуальная отладка и другой для безголового тестирования. Узнать, как ,

Теперь мы готовы определить реальный тест:

description ("Форма контакта", () => {test ("лидер может отправить запрос на контакт", async () => {await page.goto (APP); await page.waitForSelector ("[data-test = contact- form] "); await page.click (" input [name = name] "); await page.type (" input [name = name] ", lead.name); await page.click (" input [name = email ] "); await page.type (" input [name = email] ", lead.email); await page.click (" input [name = tel] "); await page.type (" input [name = tel] ", lead.phone); await page.click (" textarea [name = message] "); await page.type (" textarea [name = message] ", lead.message); await page.click (" input [type = checkbox] "); await page.click (" button [type = submit] "); await page.waitForSelector (". modal ");}, 16000);});

Обратите внимание, как можно использовать Асинхронное ожидание в Jest , Предполагая, что вы используете одну из последних версий Node.js.

Давайте разберем вышеупомянутый тест. Вот что делает Chrome без головы при тестировании с Jest и Puppeteer:

1. перейти на страницу, определенную внутри приложения
2. дождитесь появления контактной формы
3. нажмите и заполните каждый ввод
4. установите флажок
5. отправить форму
6. подождите пока появится модал

Еще одно замечание: обратите внимание, что тайм-аут (16000) передан Жасмин в качестве второго аргумента в test (). Это полезно, когда вы хотите, чтобы Chrome взаимодействовал со страницей.

Если не в режиме без головы, если вы не настроите тайм-аут, вы получите следующую ошибку:

Тайм-аут - Асинхронный обратный вызов не был вызван в течение времени ожидания, указанного в jasmine.DEFAULT_TIMEOUT_INTERVAL

В любом случае, вы можете удалить тайм-аут, когда Chrome работает в режиме без головы.

Теперь запустив тест с:

тест npm

Я вижу, как происходит волшебство:

ПРИМЕЧАНИЕ для себя : видео было записано с помощью recordmydesktop в Fedora со следующими параметрами :

recordmydesktop - ширина 1024 - высота 768 -x 450 -y 130 - нет звука

Но ждать!! Есть больше!

Тестирование с Jest и Puppeteer: тестирование внешнего интерфейса и некоторые другие

Теперь, когда я доволен своей контактной формой, я могу перейти к тестированию некоторых других элементов на странице.

Каждая веб-страница должна иметь осмысленный заголовок, верно?

Давайте проверим, что <title> </ title> правильно:

description ("Тестирование внешнего интерфейса", () => {test ("подтвердить, что <title> является правильным", async () => {const title = await page.title (); ожидаем (title) .toBe ("Gestione Сервер Dedicati | Full Managed | Assistenza Sistemistica ");}); // Вставить больше тестов, начиная с этого момента!});

А как насчет панели навигации? Там должен быть один!

Проверка наличия навигационной панели с Jest и Puppetter:

// test («утверждают, что div с именем navbar существует», async () => {const navbar = await page. $ eval (". navbar", el => (el? true: false)); ожидаем (navbar) .toBe (правда);}); //

или проверка того, что данный элемент содержит ожидаемый текст:

// test («утверждают, что основной заголовок содержит правильный текст», async () => {const mainTitleText = await page. $ eval ("[data-test = main-title]", el => el.textContent); ожидаем (mainTitleText) .toEqual ("GESTIONE SERVER, полностью управляемый");}); //

Как вы относитесь к SEO? Проверь это. Тестирование SEO касается Jest и Puppeteer, например, каноническая ссылка существует или нет:

description ("SEO", () => {test ("должен присутствовать канонический", async () => {await page.goto (`$ {APP}`); const canonical = await page. $ eval ("link [rel = canonical] ", el => el.href); ожидаем (канонический) .toEqual (" https://www.servermanaged.it/ ");});});

и так далее.

В конце дня я буду в основном счастлив из-за этих зеленых галочек:

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

И это хорошо сочетается с Джестом.

Тестирование с Jest и Puppeteer: куда идти отсюда

Вы можете не чувствовать себя комфортно с самим Puppeteer или с API Puppeteer. Я чувствую тебя.

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

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

Как вы тестируете свои приложения? Многие другие люди делают E2E тестирование с кукловодом , А вы?

Бонус: тестирование с Jest и Puppeteer, визуальная отладка

С помощью Puppeteer вы можете выбрать, запускать Chromium в режиме без головы или нет .

Мы видели это раньше:

beforeAll (async () => {browser = await puppeteer.launch ({// Режим отладки! headless: false, slowMo: 80, args: [`--window-size = 1920,1080`]}); page = await browser.newPage (); ///});

Кроме того, вы должны указать время ожидания Jasmine при запуске браузера в визуальном режиме. В противном случае тест резко остановится. Время ожидания указывается в качестве второго аргумента для test ():

description ("Форма контакта", () => {test ("лидер может отправить запрос на контакт", async () => {///// некоторые утверждения}, 16000 // <<< Jasmine timeout);}) ;

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

Кодируйте себя вспомогательной функцией. Поместите его в некоторый файл с именем testingInit.js:

экспорт const isDebugging = () => {let debugging_mode = {puppeteer: {headless: false, slowMo: 80, args: [`--window-size = 1920,1080`]}, жасмин: 16000}; вернуть process.env.NODE_ENV === "debug"? debugging_mode: false; };

Затем вы можете ссылаться на функцию внутри вашего теста:

/// import {isDebugging} из "./testingInit.js"; /// beforeAll (async () => {browser = await puppeteer.launch (isDebugging (). puppeteer)); // <<< Страница в визуальном режиме = await browser.newPage (); ///});

а также

description ("Форма контакта", () => {test ("лидер может отправить запрос контакта", async () => {///// некоторые утверждения}, isDebugging (). jasmine // <<< Тайм-аут Jasmine );});

В следующий раз вы сможете использовать тестирование без головы:

тест npm

или режим отладки:

NODE_ENV = отладка npm test

Спасибо за прочтение!

Кредит фотографии: https://unsplash.com/@shotbyjames

Я Валентино Гальярди, и я помогаю занятым людям освоить этот безумный современный JavaScript-материал. Я занимаюсь обучением и консультированием по JavaScript, React, Redux.

Давайте свяжемся!

Похожие

Комментарии