Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

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

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

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

тестирование с Jest и Puppeteer

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

Мы будем тестировать с 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.

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

Похожие

Windows 10 Mobile в Elegance: тестирование Lumia 650
Все хорошие вещи 3: после Microsoft с
68K мгновенных сообщений
(Последнее обновление 4 августа 2009 г.) Вступление Мгновенный обмен сообщениями действительно тяжело на Mac 68K. Это еще сложнее на эмулированном Mac 68K. В ICQ и AIM есть старые неподдерживаемые клиенты, которые могут работать на реальном Macintosh, но мне не удалось использовать их на моем эмулируемом компьютере под управлением System 7.5.5 ( обновление : пользователь SSS на форуме описал
Настройка стилей CSS с помощью JavaScript
... стилизации некоторого контента, наиболее распространенным способом является создание правила стиля и его селектор для целевого элемента или элементов. Правило стиля будет выглядеть следующим образом: .batman {ширина: 100px; высота: 100 пикселей; цвет фона: # 333; } Элемент, на который будет влиять это правило стиля, может выглядеть так: <div class = "batman"> </ div> На любой веб-странице вы увидите от нескольких до многих МНОГО стилевых
Rose 3D Elegance - замечательный подарок для женщины
Красивая роза с индивидуальной преданностью - прекрасный подарок для любимого человека, родителей или бабушки с дедушкой. Он подходит для подарка на день рождения, именины, а также для свадебного подарка молодой паре вместо цветов. Это интригующее и привлекательное украшение, которое подходит для любой обстановки. Вот как на статуэтке размером 8x5x5 см выгравирована 3D-роза «Elegance» : 3D кристаллы с мотивом розы "Elegance" также
Тест ноутбука ASUS Strix GL753VE с GeForce GTX 1050 Ti
... и ноутбуки с графическими картами NVIDIA GeForce GTX 1050 и GeForce GTX 1050 Ti"> На рынке вышли ноутбуки с графическими картами NVIDIA GeForce GTX 1050 и GeForce GTX 1050 Ti. В последние недели я имел удовольствие представить несколько разных моделей с такими системами от Acer, MSI и Clevo. Этому поезду, видимо, нет конца, потому что сегодня следующим протестированным ноутбуком с GeForce GTX 1050 Ti будет ASUS Strix GL753VE. Под этим интригующим названием находятся такие компоненты, как
Как сделать простую концептуальную карту с помощью CmapTools
CmapTools - это бесплатный инструмент для создания концептуальных карт. Возможно, это не самый красивый и не самый простой в использовании, но профессора со всего мира рекомендуют его для его функций, специально предназначенных для обучения. Если это ваш случай, не бойтесь, тогда мы поможем вам создать простую концептуальную карту с помощью CmapTools. 1. Установите CmapTools CmapTools доступен для Windows
Тестовый телевизор LG 55SK8100 - Самый интересный телевизор Super UHD до 5000 зл?
Многим из вас, наверное, интересно, какой телевизор выбрать, особенно тот, который предлагает изображение Super UHD . Мы нашли очень интересную модель из конюшни LG, которая на бумаге выглядела впечатляюще по отношению к ее цене. Но что показали практические тесты ? LG 55SK8100 - С каким телевизором мы имеем дело? Однако первый взгляд на телевизор не предвещает скрытых новинок. Классический корпус, в цвете ... хм, я не знаю,
blago-tt.ru - Пиролизные котлы Blago
... сейчас! Около blago-tt.ru Название сайта: Пиролизные котлы Blago Html- версия сайта - html3 , IP-адрес - 91.218.228.13. Домен Страна : Россия
8 примеров преобразования уроков в цикле SAMR
Модель SAMR для интеграции технологий в преподавание, разработанная доктором Рубеном Пуэнтедурой, получила широкое распространение в последние годы. «SAMR» - это
Обновление программного обеспечения PS Vita System
... ия программного обеспечения 3.73 PlayStation®Vita была выпущена 16 октября 2019 года. Версия 3.73 добавляет или обновляет следующие функции. Новое за 3.73 Это обновление системного программного обеспечения улучшает производительность системы. Новое для 3.72 Это обновление системного программного обеспечения улучшает производительность системы. Новое для 3.71 Это обновление системного программного обеспечения
Создайте карту ума и мгновенно максимизируйте производительность
У вас часто возникает проблема, что вы не знаете, как правильно реализовать проект или задачу? Вы иногда задаетесь вопросом, есть ли какие-либо методы или приемы, которые могут поднять вашу производительность на новый уровень? Потому что когда дело доходит до реализации проекта, многие люди изначально паникуют. Как только дело доходит до планирования, на лбу внезапно появляются капли пота, пульс быстро нарастает, в голове распространяется туман, и начинается хаос. Это

Комментарии

Итак, вы готовитесь к гастролям после недели моды, куда вы идете и чем занимаетесь в туре?
Итак, вы готовитесь к гастролям после недели моды, куда вы идете и чем занимаетесь в туре? S. Я собираюсь поехать в Австралию, Россию, Германию ... Я начинаю свой тур в Нью-Йорке 13 февраля. Я в основном как дизайнер рок-звезд. Я создал целую вещь тура. Вместо того, чтобы заниматься творчеством в Лондоне и Париже, и во всех обычных местах, я начал брать его в места, где люди не слышали обо мне. Я просто показываю свою линию. E. Я понимаю,

А как насчет панели навигации?
El?
Как вы тестируете свои приложения?
Многие другие люди делают E2E тестирование с кукловодом , А вы?
NODE_ENV === "debug"?
Но что показали практические тесты ?
LG 55SK8100 - С каким телевизором мы имеем дело?
Вы иногда задаетесь вопросом, есть ли какие-либо методы или приемы, которые могут поднять вашу производительность на новый уровень?
Итак, вы готовитесь к гастролям после недели моды, куда вы идете и чем занимаетесь в туре?