CODEWITHSUNDEEP
cypress
Daniel Hao
Daniel Hao

Reputation: 4970

General practice to organize a new End-to-end test in Cypress

Just starting a new UI testing project, and wonder if there is any best practice to organize the Cypress end-to-end test structure? For example - 1) embedded inside the source (under integration/...) or 2) separate file folder for this project?

Looking for some general guidelines and best practice. Thanks.

Upvotes: 2

Views: 1367

Answers (2)

user14903560
user14903560

Reputation:

It's obviously a matter of opinion, but here's what guides me

  • end-to-end tests are not as tightly coupled to source files as unit tests, so it makes sense to place them in a separate folder structure

  • you tend to work on a bunch of source files to build a feature, then write an e2e to test that feature, which points to a feature hierarchy

  • Cypress allows for non-standard test location, but be wary as third party plugins (which you may add late in the project) may not

  • Cypress commands are quite expressive, so it does not make sense to write custom commands for everything (simple is better than complex)

  • named selectors are expressive, but keep them local (inside the spec file) as they will differ subtly from one page to another. Better still, ditch selectors and use a search tool like cypress-get-it

Upvotes: 0

Alapan Das
Alapan Das

Reputation: 18650

It is up to you where you want to keep your test files there is no one single rule (Read this). In case you're writing the tests under integration folder, you don't have to do add any additional configurations as cypress by default searches for the test suite files from inside the integration folder. Also, in case if you decide to write your tests inside some other folder, you can add the required configurations in your cypress.json file and you are good to go.

This is how my folder structure inside integration folder looks like:

cypress folder structure

  • Locators contain all locators, so that they can be managed from a single place. Inside that I have a file called selectors.js
  • Module 1 and Module 2 contains the test suites asper the modules.

Example of the selectors.js file:

export default {

  toDoBtn: 'button[type="submit"]',
  input: 'form > input',
  listItems: 'ul > li'
};

Example of the test suite:

import selectors from '../../integration/Locators/selectors.js';

describe('Add Items in todo list and Validate', () => {

    before(function () {
        cy.pageIsLoaded(selectors.toDoBtn) //This is a custom command
    })

    beforeEach(function () {
        cy.fixture('testdata.json').then(function (testdata) {
            this.testdata = testdata
        })
    })

    it('Add Items', function () {
        cy.addItems(selectors, this.testdata) //This is a custom command
    })

    it('Validate Added Items', function () {
        cy.validateItems(selectors, this.testdata) //This is a custom command
    })
})

Upvotes: 1

Related Questions