Cypress End-To-End Testing

A software developer, beside make software products (web, app, ...) we need to focus on product quality, which is highest value and best experience for end users.

In this article, I would like to share my experience about Cypress end-to-end test our product. To good understand Cypress, firstly we need to understand what end-to-end test.

What are end-to-end tests?

End to end testing is a testing method which is used to test the full flow of an product. The goal is to interact with product like behavior of end user. I mean, they are testers and developers.

Automated end-to-end tests that is a tool to test application from start to end flow, this will simulate a real user scenario. When using automated tool, bugs will be catch up early and save more time to test. Some cases, automation tool cannot do it, we must be manual testing.

What is Cypress?

Cypress is a testing framework for anything that runs on browser. Cypress is open-source and write in JavaScript.

Benefit of Cypress:

• Write faster
• Easier
• More reliable

Install and run Cypress test

To integrate Cypress with your project, you have to install it using the command below.

npm install cypress --save-dev
yarn add cypress --dev

cypress.config.ts

export default defineConfig({
  e2e: {
    baseUrl: process.env.CYPRESS_BASE_URL,
    supportFile: "./cypress/support/*.ts",
    specPattern: [],
    setupNodeEvents(on, config) {
      return config;
    },
  },
  env: {
  }
});

Cypress.env

CYPRESS_BASE_URL=http://localhost

Add script to execute test to pakage.json file

"script": {
   "e2e": "cypress run --browser chrome"
}

./cypress/tsconfig.json

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

The .cypress/e2e folder is where you will write your test.

Writing your first test

Create a new file with extension .cy.ts. I am going write a simple test with first-test.cy.ts file. We are going to write a quick test to ensure that the app indeed loads as the URL.

describe('First Test', () => {
  it('Test load URL', () => {
    cy.visit(process.env.CYPRESS_BASE_URL)
  });
})

• Use data selector when seleting elements

// Do
cy.get('[data-cy="login-btn"]')

// Do not
cy.get('button')          // generic
cy.get('.button')         // Coupled with styling
cy.get('#button')         // Coupled with styling or JS Event
cy.get('type="input"')    // Coupled with HTML semantics

• Using base URL

// Do
// Need to set base URL in your Cypress config file
cy.visit('about-us');

// Do not
cy.visit('http://localhost/about-us');

• Limit the use of cy.wait with a number

// Do
cy.intercept('POST', '/login').as('login');
cy.wait('@login');

// Do not
cy.wait(5000);

• Test should be able to pass independently from each other, never use state of previous test

Running test case

You can run all your Cypress test or run a special test from command line or from the Cypress test runner. To ensure Cypress run successfully, your product must be is active.
Command below, run all Cypress test.

npm run e2e
yarn e2e

If you want to run only one test, run within command below.

./node_modules/.bin/cypress run --spec cypress/e2e/first-test.cy.ts --browser chrome