ATS E2E Library

This library is meant to be used as a way to centralize generic code that can be used with all the e2e projects for the ATS system.

How to install the library

First you need to have a cypress project already configured: Cypress Getting Started.

Then you just need to add the library as a dependency

$ npm install ats-e2e-library

Cucumber configuration

After that it's necessary to configure the cucumber directories in your package.json, as a convention for our project we will use them as follows:

"cypress-cucumber-preprocessor": {
  "stepDefinitions": "./cypress/integration/steps-definitions/",
  "cucumberJson": {
    "generate": true,
    "outputFolder": "cypress/cucumber-json",
    "filePrefix": "",
    "fileSuffix": ".cucumber"
  }
}

According with this configuration the step definitions should be added in the folder cypress/integration/steps-definitions/. The features should be added in the folder cypress/integration/features.

Npm scripts

It's recommended to add the following npm scripts to your package.json

"scripts": {
  "cy:open": "cypress open",
  "cy:run": "npm run rm && cypress run",
  "cy:run:report": "npm run cy:run; npm run cy:report",
  "rm": "rimraf ./cypress/results ./cypress/cucumber-json ./cypress/reports ./cypress/screenshots",
  "cy:report": "generate-report"
}

The rm script uses the rimraf to clear the output files, so it's necessary to add it as a devDependency. It's also needed to install the npm-run-all to run commands sequentially in a platform independent manner.

Open Cypress

$ npm run cy:open

Run Cypress (default browser)

$ npm run cy:run

Run Cypress (specific browser)

$ npm run cy:run -- --browser chrome

Generate report after run

$ npm run cy:report

Run cypress (default browser) and generate report

$ npm run cy:run:report

Configure Cypress

Add the following to your cypress/plugins/index.ts:

import * as cucumber from 'ats-e2e-library/lib/cucumber';

const config: Cypress.PluginConfig = (on, _config) => {
  cucumber.configure(on);
};

export default config;

The function cucumber.configure(on) configures all the important parts of Cypress with Typescript and Cucumber integrations. You should not need anything but those lines.

Configure typescript

Create a tsconfig.json file in the cypress folder:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"],
    "strict": true,
    "outDir": "../dist/",
    "sourceMap": true
  },
  "include": ["**/*.ts"]
}

Utils

How to configure the language of the ATS's frontend

To set the language add the following line to the cypress/support/index.ts file:

atsSetDefaultLanguage();

This function will configure the language of the application before every test. The default language was agreed to be pt.

How to configure default headers/options for all the requests of Cypress (cy.request only)

It's possible to define global default options for all the cy.request calls. Add this to the cypress/support/command.ts file:

configureDefaultRequestOptions({
  headers: {
    'accept-language': 'pt-BR',
  },
});

In this example all requests created by cypress will have the accept-language header with the value 'pt-br'.

Custom Commands

Cypress allows the creation of custom commands. Check the docs for more information.

PO-UI

The component library PO-UI will be used to build the frontend of the ATS systems therefore creating reusable custom commands to interact with those components will centralize the logic and improve maintainability. All the custom commands for this end should be added to the folder src/commands/e2e/po-ui. Remember to use a file for each component. Follow this example: /src/commands/e2e/po-ui/po-select.commands.ts.

Custom command typing

Follow this documentation to add the typings for the created custom commands. Follow this example: /src/commands/e2e/po-ui/po-select.commands.ts.

The types for the custom commands should be added to the the corresponding definition in the types file (src/commands/e2e/types.ts for the e2e, src/commands/api/types.ts for the api).