У нас есть много фреймворков для тестирования, которые можно использовать для автоматизированных тестов пользовательского интерфейса. В этой статье я покажу базовый проект, использующий фреймворк Puppeteer в паре с инструментом Cucumber.JS.

Я буду использовать редактор кода Visual Studio.

Весь код проекта можно найти в репозитории GitHub.

Прежде чем мы начнем, давайте в нескольких словах расскажем об инструментах.

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

Puppeteer – это библиотека Node, предоставляющая высокоуровневый API для управления безголовым Chrome или Chromium по протоколу DevTools. Его также можно настроить для использования полного (не безголового) Chrome или Chromium.

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

  • Создавайте скриншоты и PDF-файлы страниц.
  • Просканируйте SPA (одностраничное приложение) и сгенерируйте предварительно отрендеренный контент (т. е. «SSR» (рендеринг на стороне сервера)).
  • Автоматизируйте отправку форм, тестирование пользовательского интерфейса, ввод с клавиатуры и т. д.
  • Создайте современную автоматизированную среду тестирования. Запускайте тесты непосредственно в последней версии Chrome, используя новейшие функции JavaScript и браузера.
  • Запишите временную трассировку вашего сайта, чтобы помочь диагностировать проблемы с производительностью.
  • Протестируйте расширения Chrome.

Официальную документацию можно найти здесь.

Создайте специальную папку и откройте ее в редакторе Visual Studio Code.

Инициализация проекта

Прежде всего, нам нужно создать в нашем проекте файл package.json. Этот файл будет содержать наши зависимости, тестовые скрипты и т.д. Для того, чтобы начать создание файла, выполните следующие действия:

  • Откройте новый терминал:

  • В открывшемся терминале напишите следующую команду:
npm init -y
  • Убедитесь, что файл «package.json» создан в корневом каталоге.

  • Измените файл «package.json» самостоятельно. Пример на скриншоте ниже:

Добавление зависимостей в проект

Мы добавим следующие зависимости:

  • Кукольник
  • Чай
  • Cucumber-Html-Reporter
  • @supercharge/строки

Для того, чтобы добавить эти зависимости, напишите в терминале следующую команду:

npm install puppeteer cucumber-html-reporter chai @supercharge/strings

Затем нажмите «Enter», чтобы начать загрузку зависимостей.

Загрузка займет некоторое время, потому что кукловод также загрузит браузер Chromium.

Убедитесь, что зависимости были загружены, проверив вывод терминала, а также перейдите к файлу package.json и проверьте, были ли добавлены зависимости в файл:

Также нам нужно установить огурец как dev-зависимость:

Выполните следующую команду:

npm install --save-dev @cucumber/cucumber

Убедитесь, что зависимости были загружены, проверив вывод терминала, а также перейдите к файлу package.json и проверьте, были ли добавлены dev-зависимости в файл:

Также убедитесь, что в корневой каталог добавлены файл package-lock.json и папка node-modules.

Кроме того, в моем проекте я использую инструмент Prettier, который помогает форматировать код.
Давайте создадим файл «.prettierrc» в нашем корневом проекте.

Я добавил несколько конфигураций:

Вы можете найти дополнительные опции в официальной документации.

Теперь нам нужно добавить некоторые настройки в наш огуречный репортер.

Давайте создадим файл «reporter.js» в нашем корневом каталоге.

Я добавил несколько конфигураций:

Вы можете найти дополнительные опции в официальной документации.

Структура проекта

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

  • В корневой папке создайте папку «features».
  • В указанной папке создайте следующие папки:
    - 'lib' — в этой будут файлы наших утилит.
    - 'support' — в этой один будет содержать файлы сопоставленных элементов.
    - 'tests' — этот будет содержать тестовые файлы.

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

Затем в каталоге support я создал дополнительные каталоги для хранения элементов по их типу:

  • components — будут содержать сопоставленные компоненты сайта, такие как панели навигации, меню и т. д.
  • generalDefinitions — будут содержать общие шаги (см. в следующих разделах).
  • страницы — будут содержать сопоставленные страницы с сайта.
  • windows — будут содержать сопоставленные элементы окна с сайта.

Конечно, проект можно разделить по вашему логическому принципу. В моем случае — у меня есть следующее дерево:

Кроме того, я создам файл «utils.js» в каталоге lib. Он будет содержать методы (такие как click, getText и т. д.)

После создания файла дерево каталогов должно быть таким:

Варианты огурцов

В тесте я использовал несколько сильных сторон огурца.

Я создам два файла javascript, которые будут содержать общие функции определения браузера, создания объекта «страница» и т. д.

В каталоге support создадим два файла:

  • world.js — изолированный контекст для каждого сценария, доступный для хуков и шагов как «это».
  • hooks.js — используется для настройки и демонтажа среды до и после каждого сценария.

Дерево каталогов должно выглядеть так:

Создание файлов шагов

Один из плюсов Cucumber в том, что весь тестовый сценарий написан на обычном английском языке. Но под этой красивой оболочкой нам нужно определить некоторый код, который будет работать. Для этого нам нужно определить файлы steps, которые будут содержать шаги, написанные на английском языке, а также будут содержать их реализацию с помощью языка программирования. Я создам файл generalSteps.js, который будет содержать общие шаги. Их можно использовать в любом тесте. Файл будет создан в папке generalDefinitions.

После создания файла каталог должен выглядеть так:

Создание теста

Сайт, использованный в примере:

https://www.demoblaze.com/index.html

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

Создание специальной папки и файлов для теста

Чтобы логически разделить наши файлы, я создам отдельную папку для каждого тестового сценария. Папка будет содержать файл огурца «.feature», содержащий шаги, написанные на английском языке, а также связанный с ним файл steps.

В соответствии с нашим примером я создам каталог signUp в папке tests. В созданном каталоге я создам файл signUp.feature, а также файл signUpSteps.js. После создания, как указано выше, дерево каталогов должно выглядеть так:

Создание специального файла сопоставления

Чтобы хранить элементы логично, я создам файлы, которые будут содержать локаторы элементов (локаторы со страниц, панели навигации и т. д.).

В этом случае я создам специальный файл для верхней панели навигации, содержащий ссылку «Зарегистрироваться». Я создам файл «UpperNavigationBar.js» в папке «components». Смотрите скриншот ниже:

Я использую следующую структуру — созданный файл будет содержать все элементы внутри JS-объекта, а затем весь объект будет экспортирован через функцию «module.exports». См. пример ниже:

Написание теста

Как упоминалось выше, мы создали специальную папку для теста «SignUp».

Теперь приступим к написанию самого теста. Как упоминалось выше, для каждого теста нам нужен файл «feature», а также файл «steps».

Файл функции

В Cucumber пример называется сценарием. Сценарии определяются в файлах «.feature».

Первая строка этого файла начинается с ключевого слова Feature:, за которым следует имя. Вы можете использовать имя, похожее на имя файла.

Затем у нас есть краткое описание функции. Cucumber не выполняет эту строку, потому что это документация.

Затем у нас есть Scenario:, который представляет собой конкретный пример, иллюстрирующий, как должно вести себя программное обеспечение.

Последние — это строки, начинающиеся с Given, And, Whenи Then, которые являются шагами нашего сценария. Это то, что Cucumber выполнит.

Пример файла характеристик:

Мы можем определить каждый сценарий как сфокусированный с помощью аннотации @focus :

Его можно использовать, если мы хотим выполнить конкретный тест (позже я покажу, как определить для этого специальный скрипт).

Файл шагов

Теперь нам нужно перевести наши строки из файла feature в некоторый код, который будет выполняться. Для этого мы напишем наши функции в файлах steps и соединим их со строками из файла feature.

Чтобы начать работать с методами огурца, нам нужно импортировать их в наши файлы steps. Кроме того, нам нужно импортировать другие необходимые файлы (такие как методы utils, файлы сопоставления элементов и т. д.). Пример импорта на скриншотах ниже:

Теперь я свяжу следующее предложение:

К коду Javascript:

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

Скрипты

Теперь я определю несколько скриптов для выполнения нашего теста/действий.

  • Запустить все тесты
    Этот скрипт запустит все тесты из файлов «функций».
"test": "cucumber-js -f json:cucumber_report.json"
  • Запуск сфокусированных тестов
    Этот скрипт запустит все тесты из «функции» с аннотацией @focus.
"test:focus": "cucumber-js --tags @focus -f json:cucumber_report.json",
  • Создать отчет
    Этот скрипт запустит все тесты из «функциональных» файлов.
"generate:report": "node report.js"

В моем случае разделы «scripts» выглядят следующим образом:

Осталось запустить скрипт через команду npm, например:

После выполнения тестов вы можете создать отчет (см. команду выше). Сформированный отчет выглядит следующим образом:

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

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

Хорошего дня и продолжайте учиться и программировать!