Создавайте действующие сценарии с огурцом за секунды с помощью кабачка
Необходимые знания:
- Самые базовые знания JavaScript (если они вообще есть, поскольку мы начинаем с рабочих примеров)
- Селекторы CSS (или xpath для более сложных ситуаций)
Ознакомьтесь с этим учебным ресурсом: https://flukeout.github.io/
Если вы раньше сталкивались с Cucumber на каком-либо языке, возможно, вам показалось, что вам пришлось написать много кода, чтобы проверить самые тривиальные из счастливых путей в вашем приложении, например, с необходимостью писать свои собственные определения шагов и реализацию селена. код и создание структуры для того, чтобы вещи были СУХИМИ и организованными (возможно, с помощью объектной модели страницы или какого-либо другого шаблона / абстракции). Кроме того, если владельцы продукта не будут писать или даже не смотреть на ваши сценарии, вы, вероятно, задаетесь вопросом, был ли выбран правильный инструмент.
Однако даже вы, разработчик или инженер по качеству, вероятно, предпочтете читать, писать и поддерживать свои тестовые сценарии на английском языке, а не кучу кода на выбранном вами языке программирования. Но если вам нужно писать код под капотом для каждого шага теста, вы можете не увидеть преимущества использования Cucumber.
Представляем Кабачок…
Courgette дает вам набор предопределенных определений шагов, таких как Given I am on the 'login' page и When I click the 'contact link' для общих действий и утверждений, и предоставляет простую и масштабируемую структуру для работы с использованием композиции с шаблоном объектной модели страницы для размещения ваших локаторов и методов комбинированных шагов. Он также предоставляет фрагменты для вашей IDE, чтобы быстро писать сценарии. Он сочетает в себе Cucumber.js, Protractor, protractor-cucumber-framework и некоторые инструменты для создания отчетов из коробки. ChromeDriver используется по умолчанию, но его можно настроить вместе со многими другими параметрами.
Давайте настроим и запустим пример
Установите node.js, если у вас еще нет https://nodejs.org/en/download/ и Google Chrome.
Вставьте следующее в терминал на вашем Mac (обратите внимание, что каждая строка имеет хэш-комментарий, объясняющий, что каждый делает):
# make yourself a project folder if you don’t already have one mkdir yourProjectName # go into that folder cd yourProjectName # create a package json so you can install node.js packages npm init -y # install Courgette npm install courgette # run the sample npm run ct # and that’s all there is to it… press enter if you copied this line
В Windows вставьте следующее:
md yourProjectName cd yourProjectName npm init -y npm install cucumber-protractor node node_modules\cucumber-protractor\scripts\setup.js npm run ct
Все идет хорошо, вы должны увидеть следующий вывод в терминале (обратите внимание, что я использую iTerm2, а не программу терминала Mac по умолчанию):
Синтаксис Gherkin (шаги Given, When, Then) в выходных данных выше находится внутри файла функций в uiTests/features/google.feature, который был сгенерирован во время установки:
@google-feeling-lucky Scenario: Clicking I’m Feeling Lucky... Given I am on the 'Google Home' page When I click 'I’m Feeling Lucky' Then I expect the url to contain 'google.com/doodles'
Текущие поддерживаемые шаги (выделенные выше биты после ключевых слов Given, When, Then) стандартно перечислены здесь: определения шагов.
Для того, чтобы это работало, требуется объект страницы. Объект страницы представляет элементы на странице, которую мы тестируем или с которой взаимодействуем. Мы сгенерировали один ранее в нашей настройке, который находится в uiTests/pages/google-home.js. Бит Google Home в приведенном выше шаге переводится в google-home.js и загружается из папки страниц для использования в следующих шагах (наши Whens, Thens, Ands, Но). Определение I am on the 'PAGE_NAME' page шага также приводит нас к pagePath в нашем объекте страницы, выделенном жирным шрифтом ниже:
const createPage = require('cucumber-protractor/uiTestHelpers/createPage');
const fileName = createPage.getFileName(__filename);
module.exports = (world) => {
const pagePath = 'https://www.google.com/';
const locators = {
'I’m Feeling Lucky': by.css('[name="btnI"]'),
};
return createPage(fileName, world, pagePath, locators);
};
Давайте пока сосредоточимся на pagePath и локаторах, выделенных полужирным шрифтом выше.
PagePath в идеале должен быть путем к странице, например. '/contact-us', который будет добавлен к baseUrl в conf.js при использовании любого из определений шагов url, но это всего лишь быстрый пример. Это сделано для того, чтобы вы могли протестировать несколько сред, например. ваша промежуточная среда находится в другом домене.
Локаторы находят на странице элементы, с которыми мы хотим взаимодействовать или проверять содержимое. Обратите внимание, что имя локатора 'I’m Feeling Lucky' совпадает с именем в определении шага Gherkin: I click 'I’m Feeling Lucky', а значение локатора [name="btnI"] - это просто селектор css (получение элемента по атрибуту имени) в виде строки, переданной методу by.css.
Если вы индивидуально или в команде отвечаете за создание HTML-кода, вы можете добавить свои собственные атрибуты, например data-test="my-button", тогда ваш селектор будет[data-test="my-button"], и если он существует на главной странице Google, мы могли бы добавить новый локатор:
const createPage = require('cucumber-protractor/uiTestHelpers/createPage');
const fileName = createPage.getFileName(__filename);
module.exports = (world) => {
const pagePath = 'https://www.google.com/';
const locators = {
'I’m Feeling Lucky': by.css('[name="btnI"]'),
'my button': by.css('[data-test="my-button"]'),
};
return createPage(fileName, world, pagePath, locators);
};
Таким образом, в 90% случаев использования для тестирования страницы вы можете просто добавить локаторы, а затем написать сценарии с многоразовыми определениями шагов (в указанном порядке). Чтобы убедиться, что вы используете точные слова и интервалы, что важно, рекомендуется скопировать и вставить их или добавить фрагменты в вашу среду IDE, выполнив одну из команд здесь: https://github.com/canvaspixels / cucumber-protractor # snippets
Дополнительную документацию и советы по настройке см. На странице github.
Измените свои локаторы и сценарии, затем снова запустите все сценарии:
npm run ct
или только один сценарий по тегу:
npm run ct @google-feeling-lucky
Если вы не укажете тег, все ваши файлы функций будут запускаться параллельно, бок о бок, и вывод консоли будет выглядеть немного иначе.
Объединение шагов
Хотя все примеры шагов с огурцами в этом репозитории представляют собой отдельные действия и утверждения, вы можете легко объединить несколько шагов в один.
Например, в сценарии, который включает следующие шаги:
Scenario: I expect to see items in the dashboard menu Given I am on the 'twitter login' page When I set 'username' to 'peoplesvote_uk' And I set 'password' to 'password~1' And I submit the 'login form' Then I expect to be on the 'dashboard' page When I click the 'dashboard menu' Then I expect the 'dashboard menu items' to be visible
мы могли бы упростить его, объединив их в один, чтобы было более очевидно, что мы собираемся тестировать:
Scenario: I expect to see items in the dashboard menu Given I am logged in When I click the 'dashboard menu' Then I expect the 'dashboard menu items' to be visible
Это позволяет вам перестать повторяться с шагами входа в систему, что делает их более пригодными для повторного использования. Также это делает тест более читаемым и фокусируется на предмете теста. Это предварительное условие, что мы должны войти в систему, а не то, что мы тестируем. Если вы контролируете свои макеты и можете имитировать состояние входа в систему, например, с помощью файлов cookie, то это предпочтительнее, так как на выполнение потребуется гораздо меньше времени. Но если вы, например, проводите системные тесты в промежуточной среде, вам, возможно, придется войти в систему, как пользователь, через форму входа. Не забывайте хранить свои учетные данные в хранилище!
Чтобы добавить Give I am logged in шаг, нам нужно создать собственное определение шага. Добавьте это в конец uiTests/stepDefinitions/common-step-definitions.js и измените имя пользователя и пароль для учетных данных twitter:
Given(/^I am logged in$/, async function() {
await this.goToPage('twitter login');
await this.setInputFieldValue('username', 'peoplesvote_uk');
await this.setInputFieldValue('password', 'password~1');
await this.submitForm('login form');
await this.checkUrlIs('https://twitter.com');
});
Создайте себе новый файл функции, назовите его twitter-dashboard-menu.feature и сохраните его в папке uiTests/features. Вставьте в него следующее:
@twitter-dashboard-menu
Feature: Test feature
@twitter-dashboard-menu-items
Scenario: I expect to see items in the dashboard menu
Given I am logged in
Затем запустите этот сценарий: npm run ct @twitter-dashboard-menu-items
Взгляните на доступные методы, которые вы можете использовать, чтобы объединить свои шаги.
Осушение ваших селекторов на страницах с помощью объектов-компонентов
Если вы тестируете одни и те же компоненты на нескольких страницах, вы можете переместить указатели для элементов в этих компонентах на компонент страницы.
Внутри uiTests создайте папку с именем components и создайте внутри файл с именем banner.js (то есть uiTests/components/banner.js) и вставьте следующее:
const createComponent = require('cucumber-protractor/uiTestHelpers/createComponent');
const fileName = createComponent.getFileName(__filename);
module.exports = (world) => {
const locators = {
'main banner': by.css('[data-test="main-banner"]'),
};
return createComponent(fileName, world, locators);
};
Обратите внимание, что сейчас мы импортируем createComponent, и у нас нет pagePath, поскольку компоненты не являются страницами, это просто повторно используемые части страниц.
Затем мы импортируем и добавим баннер, чтобы локаторы и любые методы страницы были добавлены к нашим страницам:
const createPage = require('cucumber-protractor/uiTestHelpers/createPage');
const fileName = createPage.getFileName(__filename);
const banner = require('../components/banner');
module.exports = (world) => {
const pagePath = 'https://www.google.com/';
const locators = {
'I’m Feeling Lucky': by.css('[name="btnI"]'),
'my button': by.css('[data-test="my-button"]'),
};
return createPage(fileName, world, pagePath, locators)
.addComponents([banner]);
};
Локаторы в объекте компонента не могут совпадать ни с одним из локаторов в нашем объекте страницы. Вот и все.
В итоге
Courgette предоставляет упорядоченный способ структурирования ваших функциональных тестов пользовательского интерфейса, который уменьшает человеческую ошибку, связанную с необходимостью написания большого количества базового кода за сопоставителями определения шагов. Это дает вам возможность сосредоточиться на организации ваших локаторов в объектах вашей страницы и на поддержании вашего набора сценариев, что позволяет вам, например, тратить свое время на настройку кроссбраузерной автоматизации.
Загрузите пакет подсветки синтаксиса для своего текстового редактора / IDE, чтобы избежать ошибок и сделать свою жизнь ярче.
дальнейшее чтение
Чтобы узнать больше о синтаксисе Gherkin, см .: https://docs.cucumber.io/gherkin/reference/
Прочтите документацию на Странице README Courgette
