Hello everyone, my name is Linh. As we all know, in the past, testers often test the functionality of a web app manually, called manual testing. But manual testing often repeats familiar operations such as login, register, press any button, ... And that will continue to happen every time the developer updates a new feature, the tester must try to re-test from the beginning the entire function, so manual testing will not bring much efficiency to the workflow. Since then, there have been many types of automated testing such as unit tests, E2E along with testing tools like Selenium, Cypress, Playwright. One of the most popular tools we use is Cypress. Let's explore it together.

1. Common forms of testing:

E2E

End to End (E2E) testing is a testing method to test the flow of an application from start to finish. The purpose of E2E testing is to simulate the scenario of a real user, confirming the system under test and its components for data integrity and integration.

Unit test:

Unit testing is the smallest level of testing in the software testing process. Unit testing tests the smallest units in the source code such as methods, classes, modules, etc. Therefore, unit testing aims to check the source code of the programs, the individual functions are working properly or not.

Unit testing is done by programmers.

2. What is Cypress:

Cypress is a front end testing tool built for modern Web applications. This is an effective support tool for developers and QA in modern Web application testing. Cypress is quite similar to selenium, but more powerful, easy to use because it is written in Javascript, supports many different types of tests.

Cypress supports us:

Write unit tests, e2e,…
Run multiple test cases.
Review the results of each test step

3. Setup and run the Cypress console:

Node.JS version 16 or higher required
Recommended to use package manger is yarn instead of npm
Open terminal and run the following command to install cypress:

mkdir cypress-tool && cd cypress-tool
yarn add cypress -dev

Open the cypress GUI with the following command:

npx cypress open

The cypress GUI appears, the screen to choose the type of test appears, there will be two types of test forms available: unit test and component test. We will choose the test form as Unit Test, and choose the browser to test as Chrome.

The test case management interface will open in a new chrome window with the address http://localhost:64478/__/#/specs
The left toolbar will include:
- Specs: Manage test case files, can save test cases in specific folders to easily manage and run code. In addition, we can also create sample test cases from Scaffold example specs.

Runs: A place to view testcase logs available from Cypress's cloud service, track and debug failed test cases with visual graphs and powerful analysis tools
Settings: This is the place to configure the project such as: Configure the testcase file extensions that cypress can read ('cypress/e2e/**/*.cy.{js,jsx,ts,tsx}'). Experiment with advanced features such as memory management, webkit support, etc. Proxy configuration, cypress cloud configuration.

4. Create a simple test case:

Before starting to create test cases, let's take a look at the folder structure of the demo project that we created in step 1:

Testcase ending in .cy.js will be saved in the e2e folder.

Let's create a test file cypress/e2e/1-getting-started/todo.cy.js:

/// <reference types="cypress" />
/// <reference types="cypress" />


describe('example to-do app', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/todo')
  })

  it('displays two todo items by default', () => {
    cy.get('.todo-list li').should('have.length', 2)
    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
    cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
  })

  it('can add new todo items', () => {

    const newItem = 'Feed the cat'
    cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)

    cy.get('.todo-list li')
      .should('have.length', 3)
      .last()
      .should('have.text', newItem)
  })

  it('can check off an item as completed', () => {

    cy.contains('Pay electric bill')
      .parent()
      .find('input[type=checkbox]')
      .check()


    cy.contains('Pay electric bill')
      .parents('li')
      .should('have.class', 'completed')
  })

  context('with a checked task', () => {
    beforeEach(() => {
      cy.contains('Pay electric bill')
        .parent()
        .find('input[type=checkbox]')
        .check()
    })

    it('can filter for uncompleted tasks', () => {

      cy.contains('Active').click()

      cy.get('.todo-list li')
        .should('have.length', 1)
        .first()
        .should('have.text', 'Walk the dog')

      cy.contains('Pay electric bill').should('not.exist')
    })

    it('can filter for completed tasks', () => {

      cy.contains('Completed').click()

      cy.get('.todo-list li')
        .should('have.length', 1)
        .first()
        .should('have.text', 'Pay electric bill')

      cy.contains('Walk the dog').should('not.exist')
    })

    it('can delete all completed tasks', () => {
      cy.contains('Clear completed').click()

      cy.get('.todo-list li')
        .should('have.length', 1)
        .should('not.have.text', 'Pay electric bill')

      cy.contains('Clear completed').should('not.exist')
    })
  })
})

Looking at the above lines of code, we can see that the code for each step of testcase execution usually starts with cy. So we will have a list of functions to perform web page interactions such as:

cy.visit('URL'): This is the navigation method for Cypress. It calls the given URL
cy.get('locator'): This method takes one argument, the
cy.get('locator').should('attribute or data', value): This method allows you to check that one or more element objects that you are querying contain an attribute or value that satisfies the result. i wish.
cy.find('locator'): This method is similar to document.querySelector, allowing us to query an element by id, class name or xpath.

To run the above code, we just need to go to the Specs menu in the sidebar and select the test file just now, the test process will run step by step with the most detailed information about the test run.

4. Automated testcase creation with Chrome Recorder:

If we have ever used Selenium IDE, we will be familiar with the recorder function to automatically record mouse and keyboard actions when we interact with any website to automatically generate test code files for languages. Various programming like python, C#, Javascript. The Cypress GUI does not have that feature, but we can still generate test code for cypress automatically using the Chrome Recorder tool. For more details, you can watch more video tutorials from the document below:

https://www.youtube.com/watch?v=-RJuZrq-wOk

5. Conclusion:

Cypress is a useful tool that makes testing easier for developers and QA especially in Integration Testing. It not only saves time, but also saves costs during product quality assertion. Quickly bring satisfaction to customers.

Basic cypress tutorial for beginners

Share