Xin chào các bạn, mình là Linh đây. Như chúng ta đã biết, những người làm tester thưở ban đầu thường hay test các chức năng của một web app một cách thủ công, gọi là manual test. Nhưng mà việc test thủ công hay bị lặp đi lặp lại các thao tác quen thuộc như đăng nhập đăng ký, bấm nút bất kì, ... Và việc đó sẽ tiếp tục diễn ra mỗi khi developer cập nhật tính năng mới, tester phải chịu khó test lại từ đầu toàn bộ chức năng, thành ra manual test sẽ không mang lại nhiều hiệu quả cho quy trình làm việc. Từ đó đã có nhiều loại hình thức test tự động như unit test, E2E cùng với các công cụ test như Selenium, Cypress, Playwright. Một trong những công cụ phổ biến mà chúng ta hay dùng chính là Cypress. Chúng ta cùng nhau tìm hiểu nó.

1. Các hình thức test phổ biến:

E2E

Kiểm thử End to End (E2E) là một phương pháp kiểm thử để kiểm tra luồng hoạt động của ứng dụng từ đầu đến cuối. Mục đích của thử nghiệm E2E là mô phỏng kịch bản của người dùng thực, xác nhận hệ thống đang được thử nghiệm và các thành phần của nó để tích hợp và toàn vẹn dữ liệu.

Unit test:

Unit test là mức độ kiểm thử nhỏ nhất trong quy trình kiểm thử phần mềm. Unit test kiểm thử các đơn vị nhỏ nhất trong mã nguồn như method, class, module...Do đó Unit test nhằm kiểm tra mã nguồn của các chương trình, các chức năng riêng rẽ hoạt động đúng hay không.

Unit testing được thực hiện bởi lập trình viên.

2. Cypress là gì:

Cypress là front end testing tool được xây dựng cho các ứng dụng Web hiện đại. Đây là một công cụ hỗ trợ hữu hiệu cho developers và QA trong kiểm thử ứng dụng Web hiện đại. Cypress khá giống với selenium, nhưng mạnh mẽ hơn, dễ sử dụng vì được viết bằng Javascript, hỗ trợ nhiều hình thức test khác nhau

Cypress hỗ trợ chúng ta:

Viết unit test, e2e,…
Chạy nhiều testcase.
Xem lại kết quả của từng bước test

3. Setup và chạy giao diện điều khiển của Cypress:

Cần có Node.JS phiên bản 16 trở lên
Khuyến khích sử dụng package manger là yarn thay vì npm
Mở terminal và chạy lệnh sau để cài đặt cypress:

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

Mở giao diện cypress lên bằng lệnh sau:

npx cypress open

Giao diện cypress hiện lên, màn hình chọn loại hình thức test xuất hiện, ở đây sẽ có sẵn hai kiểu hình thức test là unit test và component test. Chúng ta sẽ chọn hình thức test là Unit Test, và chọn trình duyệt để test là Chrome.

Giao diện quản lý các test case sẽ mở ra trong cửa sổ chrome mới với địa chỉ là http://localhost:64478/__/#/specs
Thanh công cụ bên trái sẽ bao gồm:
- Specs: Quản lý các file testcase, có thể lưu các test case theo từng thư mục cụ thể để dễ dàng quản lý và chạy code. Ngoài ra, ta cũng có thể tạo test case mẫu từ Scaffold example specs.

Runs: Là nơi ta xem các bản ghi testcase có sẵn từ dịch vụ đám mây của Cypress, theo dõi và debug các testcase bị thất bại với biểu đồ trực quan cùng với các công cụ phân tích mạnh mẽ
Settings: Là nơi cấu hình project như: Cấu hình các đuôi file testcase mà cypress có thể đọc ('cypress/e2e/**/*.cy.{js,jsx,ts,tsx}'). Thử nghiệm các tính năng nâng cao như quản lý bộ nhớ, hỗ trợ webkit,… Cấu hình proxy, cấu hình cypress cloud.

4. Tạo 1 testcase đơn giản:

Trước khi bắt đầu tạo testcase, chúng ta hãy cùng nhau xem qua cấu trúc thư mục của project demo mà ta đã tạo ở bước 1:

Các testcase có đuôi .cy.js sẽ được lưu trong thư mục e2e.

Chúng ta hãy tạo 1 file test cypress/e2e/1-getting-started/todo.cy.js:

/// <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')
    })
  })
})

Nhìn qua những dòng code trên ta có thể thấy, các code cho từng bước thực hiện testcase thường bắt đầu bằng cy. Vì thế ta sẽ có danh sách các hàm để thực hiện các hành vi tương tác với trang web như:

cy.visit ('URL'): Phương thức này là phương thức điều hướng cho Cypress. Nó gọi URL đã cho
cy.get ('locator'): Phương thức này lấy một đối số là trình
cy.get('locator').should('attribute or data', value): Phương thức này cho phép ta kiểm tra một hoặc nhiều đối tượng element mà mình truy vấn được có chứa thuộc tính hoặc giá trí thoả mãn kết quả mình mong muốn.
cy.find('locator'): Phương thức này gần giống với document.querySelector, cho phép ta thực hiện truy vấn đến một phần tử element nào đó thông qua id, class name hoặc xpath.

Để chạy đoạn code trên, ta chỉ cần vào menu Specs trong sidebar và chọn file test vừa rồi, quá trình test sẽ chạy theo từng bước với các thông tin về quá trình chạy test một cách chi tiết nhất.

4. Tạo testcase tự động với Chrome Recorder:

Nếu chúng ta từng dùng qua Selenium IDE, chúng ta sẽ quen thuộc với chức năng recorder để tự động ghi lại các thao tác chuột, bàn phím khi mình tương tác với website bất kì để tự động sinh ra file code test cho các ngôn ngữ lập trình khác nhau như python, C#, Javascript. Thì bên Cypress GUI mặc dù không có tính năng ấy, nhưng ta vẫn có thể sinh code test cho cypress tự động bằng tool Chrome Recorder. Chi tiết thêm các bạn có thể xem thêm video hướng dẫn từ document dưới đây:

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

5. Kết luận:

Cypress là một công cụ hữu ích giúp cho việc kiểm thử trở nên dễ dàng hơn cho developers và QA đặc biệt là trong Integration Testing. Nó không chỉ giúp tiết kiệm thời gian, mà còn tiết kiệm chi phí trong quá trình kiểm tra chất lượng sản phẩm. Nhanh chóng mang đến sự hài lòng cho khách hàng.

Hướng dẫn cypress căn bản cho người mới bắt đầu

Chia sẻ