A sample Cypress implementation with Page Object Model

Node.js must be installed

Install project dependencies by running command:

npm install

• Open Cypress interface by running command:

npm run cy:open

• To run tests in headless mode, use command:

npm run cy:test:po

• To run tests created dynamically from a fixture file, more explanation here:

npm run cy:test:dy

or

npm run cy:test:dy:smoke

For this example of Page Object Model we have organize files as follows:

cypress.config.js
First generated by Cypress, this file contains configuration you do to set Cypress and your test environment

Here we have only define the app url:

module.exports = defineConfig({
  e2e: {
    env: {
      url: 'https://example.cypress.io'
    }
  }
});

cypress/e2e/*
This folder contains all spec file for end-to-end tests.

cypress/support/page/*
Contains page object files. Each file contains the description of a specific page of the app to be tested. There a is 'special' file, 'base.page.js' which is a description of all the common actions available to any other page of the app. In our example, all actions related the navbar header.

cypress/fixures/*
Fixtures files use to define data set used

Often we need to use the same test but with different data. To avoid to write repetitive code, we use a fixture file to define data. Then we import it in the spec file using:

const suites = require('../fixtures/dynamic.json')

We can then apply a filter on testsuiteID

suites.forEach((suite) => {
  if (suite.testsuiteID === Cypress.env('testsuiteID')) {
    context(`Test for testsuite '${suite.testsuiteID}'`, () => {
      // implement test here
    })
  })
})

testsuiteID -is set in the 'cypress.config.js' file but can also be set through the command line with option -env testsuiteID=smoke

Finally, for the suite we create a test for each data.

suite.data.forEach((testcase) => {
  it(`login for user ${testcase.name}`, () => {
    queryingPage.visit()
    queryingPage.getNameField().type(testcase.name)
    queryingPage.getMailField().type(testcase.mail)
    queryingPage.getPwdField().type(testcase.pwd)
  })
})

https://docs.cypress.io/