Захват деталей и скриншотов во время теста WebdrioverIO

Проблема

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

Решение

Одним из решений является запуск пользовательских действий во время цикла выполнения. Инструменты автоматизации обычно поддерживают эти функции. Средство запуска тестов WDIO позволяет настроить срабатывание обработчиков в определенное время жизненного цикла теста. Хуки — это блоки кода, которые могут выполняться в различных точках цикла выполнения. Это позволяет выполнять настраиваемые действия, такие как запись даты и времени вместе с именем до и после теста. Этот же хук можно использовать для захвата скриншотов, если тест не пройден.

Пример, который объясняет сквозной поток решения, начиная с установки webdriverIO.

WebdriverIO предоставляет однострочную команду для создания нового проекта WebdriverIO. create-wdio работает на macOS, Windows и Linux.

% npx create-wdio ./e2e

npx — это инструмент интерфейса командной строки (CLI) для установки и управления зависимостями, размещенными в реестре диспетчера пакетов узла (npm). Вам потребуется установка узла для успешного выполнения команды npx.

% which npx
% npx -v

Доступны различные команды поддержки. Приведенная выше команда покажет текущее местоположение и версию команды npx.

% npm install -g npx

По умолчанию при установке npm по какой-то причине будет доступна команда npx Если npx недоступна, то может пригодиться команда установки.

Теперь, когда у нас есть понимание npx, давайте перейдем к команде create-wdio. Эта команда выполнит несколько задач, она начнется с создания файла package.json. Если этот файл JSON не существует в текущем каталоге. package.json — это файл JSON, который существует в корне проекта JavaScript/TypeScript. В простейшей форме этот файл JSON содержит метаданные, необходимые для управления зависимостями проекта. На следующем этапе появится интерактивный мастер, который позволит выполнить индивидуальную установку пакета WebdriverIO.

? Where is your automation backend located? On my local machine
? Which framework do you want to use? mocha
? Do you want to use a compiler? TypeScript (https://www.typescriptlang.org/)
? Where are your test specs located? ./test/specs/**/*.ts
? Do you want WebdriverIO to autogenerate some test files? Yes
? Do you want to use page objects (https://martinfowler.com/bliki/PageObject.html)? Yes
? Where are your page objects located? ./test/pageobjects/**/*.ts
? Which reporter do you want to use? spec
? Do you want to add a plugin to your test setup? 
? Do you want to add a service to your test setup? chromedriver
? What is the base url? http://localhost
? Do you want me to run `npm install` (Y/n) Yes

Пакеты wdio, установленные с помощью интерактивного мастера,

  1. Local-runner. Решение WebdriverIO позволяет запустить тест в локальной среде с минимальными усилиями.
  2. Mocha-framework: — WebdriverIO обеспечивает поддержку различных тестовых фреймворков. Mocha — одна из таких многофункциональных сред тестирования, работающая на Node.js и в браузере, что делает асинхронное тестирование простым и увлекательным.
  3. Spec-reporter. Как и в случае с фреймворком, сила WebdriverIO заключается в поддержке различных инструментов отчетности. Spec-reporter — это плагин WebdriverIO для представления результатов в удобочитаемых операторах, то есть в стиле спецификаций.
  4. Chromedriver-service: — оборачивает ChromeDriver для бесперебойной работы при выполнении тестов с помощью средства запуска тестов WDIO. Эта служба не требует сервера Selenium, но использует ChromeDriver для прямой связи с браузером. Следовательно, ChromeDriver также установлен. Говоря о ChromeDriver, замечена распространенная проблема chrome.exe, а иногда и разница в поддерживаемой и фактической версиях Chrome. Большинство этих сообщений об ошибках говорят сами за себя. Если по какой-либо причине необходимо знать место установки chrome. Двоичный файл ChromeDriver для проекта можно найти по адресу /node_modules/chromedriver/lib/chromedriver/chromedriver.
  5. Ts-node: механизм выполнения TypeScript и цикл чтения-оценки-печати (REPL) для Node.js. В процессе также устанавливается машинопись. Ts-node вовремя преобразует TypeScript в JavaScript, обеспечивая прямое выполнение TypeScript на Node.js без предварительной компиляции. Настройка TypeScript для каждого проекта позволяет иметь множество проектов с разными версиями TypeScript. Пакеты, относящиеся к поддержке TypeScript, также обновлены.

По завершении установки на основе интерактивного мастера создается файл конфигурации и добавляются скрипты. А в консоли появляется сообщение о завершении настройки проекта WebdriverIO. Поскольку мы настроили проект внутри e2e, wdio предлагаем изменить каталог и команду для выполнения первого теста.

Поскольку мы выбрали автоматическое создание некоторых тестовых файлов, мы можем инициировать выполнение теста, просто указав на только что созданную конфигурацию WebdriverIO. Файл конфигурации указывает тестовые файлы, которые следует запустить. Спецификации определяются как массив файлов спецификаций и запускаются в том же или отдельном рабочем процессе. Чтобы группа спецификаций выполнялась в одном рабочем процессе, просто поместите их в массив внутри массива спецификаций. Шаблон относится к каталогу, из которого вызывается `wdio`.

e2e % cd e2e 
e2e % npm run wdio

npm, run wdio запускает произвольную команду из объекта scripts пакета. Сценарий по умолчанию будет указывать на конфигурацию WebdriverIO. Если command не указано, будут перечислены доступные сценарии.

​​”wdio”: “wdio run test/wdio.conf.ts”

Если вы попытаетесь запустить скрипт, не имея каталога node_modules, и команда завершится ошибкой, вы получите предупреждение для run npm install.

Теперь, когда мы увидели, как легко установить WebdriverIO с помощью одной мощной команды. Давайте посмотрим, как выполнить решение поставленной задачи. Как уже упоминалось в разделе о решениях, WebdriverIO предоставляет несколько хуков для вмешательства в процесс тестирования, чтобы улучшить использование хуков и построить сервисы на основе хуков. Хуком может быть одна функция или массив методов к ней. Хуки имеют параметры, специфичные для набора тестов или жизненного цикла теста. wdio.conf.ts — это место, где можно найти все крючки. Несмотря на то, что мы выбрали все параметры для настройки проекта wdio, проблема остается, когда мы открываем файл wdio.conf.ts. Это можно легко решить, удалив оператор импорта для типов.

import type { Options } from ‘@wdio/types’

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

export const config = {

Захват деталей, таких как имя, дата и время до и после каждого теста, может быть легко достигнут с помощью ловушек beforeTest и afterTest. Хук afterTest можно повторно использовать для захвата скриншотов неудавшегося теста.

перед тестом​

Это функция, которая должна выполняться перед тестом, и ее можно использовать только в Mocha/Jasmine. Нельзя полагаться на эту функцию для каркаса огурца.

beforeTest: function (test, context) {
 displayDateAndTimeWithTitle(test, “Entry”);
 },

displayDateAndTimeWithTitle() — это пользовательская функция для записи сведений о тесте в файл. Пользовательская функция помещается в файл wdio.conf.ts после константы конфига. Об асинхронном обновлении указанных данных во внешнем файле заботится метод fsPromises.writeFile(). По умолчанию файл будет заменен, если он существует. Этот метод принимает три параметра: имя файла, данные, которые будут записаны в файл, и, наконец, необязательные параметры, влияющие на вывод. Этот метод возвращает обещание, WebdriverIO будет ждать, пока это обещание не будет разрешено для продолжения. Параметр теста функции beforeTest предоставляет заголовок выполняемого в данный момент теста. Дата и время в указанном формате извлекаются из new Date()

const fsPromises = require(‘fs’).promises;
const RESULTS_FOLDER = “screenshots”;
function displayDateAndTimeWithTitle(test, stage) {
 const today = new Date();
 fsPromises.writeFile(
 `${RESULTS_FOLDER}/data.txt`,
 `${today.getDate()}-${today.getMonth() + 1}-${today.getFullYear().toString().slice(-2)} ${today.getHours()}:${today.getMinutes()}:${today.getSeconds()} ${stage}: ${test.title}\n`,
 { flag: “a+” }
 );
 }

после тестирования​

Функция, которая будет выполняться после завершения теста в среде Mocha/Jasmine. Помимо сбора сведений о тесте, эта функция просматривает результат выполнения и делает снимки экрана в случае сбоя.

afterTest: function (
 test,
 context,
 { error, result, duration, passed, retries }
 ) {
 displayDateAndTimeWithTitle(test, “Exit”);
 const f = async () => {
 if (passed === false) {
 await browser.saveScreenshot(`${RESULTS_FOLDER}/${test.title}.png`);
 }
 };
 return f();
 },

МетодsaveScreenshot() сохраняет скриншот текущего контекста просмотра. Метод saveScreenshot() делает скриншоты всего документа при использовании Geckodriver с Firefox. В случае Chromedriver с Chrome захватывается только текущее окно просмотра.

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