Создание платформы автоматизации тестирования с использованием Cypress.io  — «Подведение итогов! (Часть 6)

Теперь, когда у нас есть поддержка нескольких сред, имеет смысл организовать наши тестовые прогоны на основе этих сред для лучшей видимости. Поэтому для достижения этого мы внесем изменения в наш runner.js, добавив механизм для определения того, какую среду будет использовать наш тестовый запуск, на основе аргумента configFile

//mechanism to identify which environment is being used
...

// get environment from args..
const environment = getEnvironment(args);
...

// identify an environment; default is "qa"
function getEnvironment(args){

 let environment;

  if(args.env){
    if(args.env === true){
    // if --env flag is passed from CLI but without following any   arguments
        environment = "qa";
        return "qa";
    }

  const getEnv = args.env.split(",");
 
  getEnv.map((curr, index) => {

    const envProperty = curr.split("=");

    if(envProperty[0] === 'configFile'){
        environment = envProperty[1];
    }
    
// if --env flag is passed from CLI, but doesn't contain any 'configFile' argument
    if(index >= getEnv.length && environment === undefined){
      environment = "qa";
    }

 })

 return environment;

} else{
// if no --env flag is passed from CLI
    environment = "qa";
    return "qa";
 }
}

а затем замените все существующие пути к файлам в runner.js, что выглядит так:

«отчеты/Тестовый запуск -»с«отчеты/» + среда + «/» + «Тестовый запуск -»

Это все, что нам нужно сделать. После этого изменения наш каталог /reports будет выглядеть следующим образом:

Вандербар!!

Создание команд Better Run, также известных как Run Scripts

На данный момент наша полномасштабная команда запуска выглядит следующим образом:

node runner.js cypress run --env configFile=dev TAGS="@UI"

это много ключевых слов, если вы спросите кого-нибудь. Мы собираемся оптимизировать эти команды, используя скрипты package.json.

мы можем написать сценарий запуска для среды DEV как cy:test:dev для полной строки:

node runner.js cypress run — env configFile=dev

//package.json run scripts
"scripts": {
    ...
    "cy:test:dev": "node runner.js cypress run --env configFile=dev",
    "cy:test:qa": "node runner.js cypress run --env configFile=qa"
  },

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

npm run cy:test:dev

или, если нам нужно предоставить какие-либо дополнительные аргументы — env, мы можем добавить их, как показано ниже, верно? Но нет, следующее не будет работать:

npm run cy:test:dev TAGS="@UI" //TAGS part won't work

С этим подходом есть только одна проблема, то есть мы должны предоставить все аргументы — env в одном месте, разделенные запятой, как показано ниже:

//grouping together different type of — env arguments, separated by comma
node runner.js cypress run --env configFile=dev,TAGS="@UI"

Добавление журналов отчетов:

В наших отчетах Mochawesome, отчетах, которые мы видели до сих пор, содержится информация о том, пройден или нет тестовый сценарий или причина отказа.

Теперь, что мы хотели бы, чтобы в наших отчетах было больше информации о регистрации, например:

• Гибкость для добавления информации журнала по мере необходимости в нашем тестовом выполнении.
• Статус каждого шага теста Сценария и продолжительность выполнения этого шага

Для достижения целей ведения журнала отчетов мы будем использовать addContext(); предоставлено Mochawesome.

Гибкость добавления информации журнала по мере необходимости в нашем тестовом выполнении:

Мы напишем несколько Cypress Custom Commands вместо того, чтобы использовать их непосредственно в нашем коде. Итак, мы собираемся создать наши команды в cypress/support/commands.js.

const addContext = require('mochawesome/addContext');

Импорт addContext из Mochawesome

После импорта addContext() из Mochawesome создайте команду

//Following command logs only subject in Report file
Cypress.Commands.add("reportLog", (context) => {
  cy.once("test:after:run", (test) => addContext({ test }, context))
});
//Following command logs only Context,Value as KEY-VALUE in Report file
Cypress.Commands.add("reportLogKV", (context, value) => {
  cy.once("test:after:run", (test) => addContext({ test }, {
    title: context,
    value: value
  }))
});

Теперь используем 2 команды, которые мы добавили в cypress/support/commands.js.

//using addContext from custom commands inside stepDefinition classes
cy.reportLog("This is Subject");
cy.reportLogKV("This is key!","This is value!");

Они будут показаны в конце тестового запуска в Отчете о выполнении следующим образом:

Статус каждого шага теста Сценария и продолжительность выполнения этого шага:

Поскольку наши тестовые наборы — это тестовые наборы BDD, было бы неплохо увидеть подробности выполнения каждого шага теста в отчете о выполнении:

Чтобы получить подробную информацию о выполнении каждого шага, мы должны использовать состояние Cypress window.testState.

Мы добавим этот код для поддержки статуса шага в событии Cypress test:after:run в файле cypress/support/index.js.

...
const addContext = require('mochawesome/addContext');
...
//Runs after a test completes
Cypress.on('test:after:run', (test, runnable) => {
...
  let scenarioName = window.testState.currentScenario.name;
  let stepResult = window.testState.stepResults;
window.testState.scenarioSteps[scenarioName].forEach(function(currStep,index)   { 
    addContext({ test }, {
      title: currStep.keyword + " " +  currStep.text,
      value: stepResult[index].status + " " + stepResult[index].duration
    })
  });
...

Как только этот код будет добавлен в cypress/support/index.js, он будет запускаться после каждого теста и будет добавлять детали выполнения шагов BDD в рамках теста, как показано ниже:

Несмотря на то, что Mochawesome прямо сейчас ограничивает отображение reportLogs в наших отчетах, мы надеемся, что в будущем Mochawesome позволит нам интегрировать код HTML вaddContext(), чтобы мы могли видеть эту информацию в лучший визуальный формат

Добавление поддержки XPath:

Чтобы иметь поддержку x-path в нашей структуре, мы будем полагаться на Cypress-Xpath

npm install cypress-xpath --save-dev

Включить cypress-xpath в cypress/support/index.js

require('cypress-xpath')

добавление импорта в cypress/support/index.js

Чтобы использовать XPATH в нашей структуре, мы добавим новый локатор XPATH в pages/HomePage/element.js.

//adding xpath locator in pages/HomePage/element.js
SEARCH_TXTBOX_XPATH: "//input[contains(@name,'q')]"

Теперь в наших pages/HomePage/HomePage.js мы заменимSEARCH_TXTBOX на SEARCH_TXTBOX_XPATH в функции typeInSearchTxtBox(). как показано ниже:

//Using XPATH locator in page object
...
  typeInSearchTxtBox(value) {
    return cy.xpath(elements.HOMEPAGE.SEARCH_TXTBOX_XPATH).type(value);
  }

Дас ист все.

В этой серии статей мы создали платформу автоматизации тестирования на базе Cypress.io. Это был забавный и познавательный опыт создания вещей в рамках этой серии статей. Я буду продолжать добавлять новые вещи в эту структуру и буду продолжать каталогизировать вещи в этом пространстве. Прост!

Вперед!

Репозиторий GitHub: https://github.com/far11ven/Cypress-TestFramework/tree/develop/Part 06

Первоначально опубликовано на https://kushalbhalaik.xyz/blog 9 октября 2020 г.