M

MLOG

Tiếng Việt

Hướng dẫn toàn diện về Cypress, framework kiểm thử end-to-end mạnh mẽ, bao gồm cài đặt, viết test, gỡ lỗi, tích hợp CI/CD và các phương pháp hay nhất.

Cypress: Hướng Dẫn Toàn Diện về Kiểm Thử End-to-End cho Ứng Dụng Web

Trong bối cảnh phát triển web đang phát triển nhanh chóng ngày nay, việc đảm bảo chất lượng và độ tin cậy của các ứng dụng web là vô cùng quan trọng. Kiểm thử End-to-End (E2E) đóng một vai trò quan trọng trong việc xác minh rằng tất cả các thành phần của một ứng dụng hoạt động liền mạch với nhau từ góc độ của người dùng. Cypress đã nổi lên như một framework kiểm thử E2E hàng đầu, mang lại trải nghiệm thân thiện với nhà phát triển, các tính năng mạnh mẽ và hiệu suất xuất sắc. Hướng dẫn toàn diện này sẽ dẫn dắt bạn qua mọi thứ cần biết để bắt đầu với Cypress và kiểm thử hiệu quả các ứng dụng web của bạn.

Cypress là gì?

Cypress là một công cụ kiểm thử front-end thế hệ mới được xây dựng cho web hiện đại. Không giống như các framework kiểm thử truyền thống chạy thử nghiệm trong một trình duyệt, Cypress hoạt động trực tiếp trong trình duyệt, cho phép bạn kiểm soát và có cái nhìn sâu sắc chưa từng có về hành vi của ứng dụng. Nó được thiết kế để nhanh, đáng tin cậy và dễ sử dụng, khiến nó trở thành lựa chọn phổ biến của các nhà phát triển và kỹ sư QA trên toàn thế giới. Cypress được viết bằng JavaScript và thực thi bên trong trình duyệt, giúp nó có hiệu suất rất cao và cung cấp quyền truy cập tuyệt vời vào các thành phần bên trong của ứng dụng.

Các lợi ích chính khi sử dụng Cypress

Cài đặt và Thiết lập

Bắt đầu với Cypress rất đơn giản. Dưới đây là cách cài đặt nó:

  1. Điều kiện tiên quyết: Đảm bảo bạn đã cài đặt Node.js và npm (Node Package Manager) trên hệ thống của mình. Bạn có thể tải chúng từ trang web chính thức của Node.js.
  2. Cài đặt Cypress: Mở terminal hoặc command prompt của bạn, điều hướng đến thư mục dự án và chạy lệnh sau:
    3. npm install cypress --save-dev
  3. Mở Cypress: Sau khi cài đặt hoàn tất, bạn có thể mở Cypress Test Runner bằng cách chạy:
    4. npx cypress open

    Lệnh này sẽ khởi chạy Cypress Test Runner, cung cấp một giao diện đồ họa để chạy và gỡ lỗi các bài kiểm thử của bạn.

Viết bài kiểm thử Cypress đầu tiên của bạn

Hãy tạo một bài kiểm thử đơn giản để xác minh rằng trang chủ của một trang web tải đúng. Tạo một tệp mới có tên `example.cy.js` trong thư mục `cypress/e2e` của dự án của bạn.


// cypress/e2e/example.cy.js

describe('Bài kiểm thử đầu tiên của tôi', () => {
  it('Truy cập Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Hãy phân tích bài kiểm thử này:

Chạy bài kiểm thử này trong Cypress Test Runner để xem nó hoạt động. Bạn sẽ thấy trình duyệt điều hướng đến trang web Cypress Kitchen Sink, nhấp vào liên kết "type" và xác minh URL.

Các lệnh Cypress

Cypress cung cấp một loạt các lệnh để tương tác với ứng dụng của bạn. Dưới đây là một số lệnh được sử dụng phổ biến nhất:

Đây chỉ là một vài trong số rất nhiều lệnh có sẵn trong Cypress. Hãy tham khảo tài liệu của Cypress để có danh sách đầy đủ các lệnh và tùy chọn của chúng.

Assertion trong Cypress

Assertion được sử dụng để xác minh hành vi mong đợi của ứng dụng của bạn. Cypress cung cấp một bộ phong phú các assertion tích hợp sẵn mà bạn có thể sử dụng để kiểm tra trạng thái của các phần tử, URL, tiêu đề, và nhiều hơn nữa. Các assertion được nối chuỗi sau các lệnh Cypress bằng phương thức `.should()`.

Dưới đây là một số ví dụ assertion phổ biến:

Bạn cũng có thể tạo các assertion tùy chỉnh để phù hợp với nhu cầu cụ thể của mình.

Các phương pháp tốt nhất để viết Test Cypress

Việc tuân theo các phương pháp tốt nhất có thể giúp bạn viết các bài kiểm thử Cypress dễ bảo trì, đáng tin cậy và hiệu quả hơn. Dưới đây là một số khuyến nghị:

Các kỹ thuật Cypress nâng cao

Stubbing và Mocking

Cypress cho phép bạn giả lập (stub) các yêu cầu và phản hồi mạng, cho phép bạn mô phỏng các kịch bản khác nhau và kiểm tra khả năng xử lý lỗi của ứng dụng. Điều này đặc biệt hữu ích để kiểm tra các tính năng phụ thuộc vào các API hoặc dịch vụ bên ngoài.

Để giả lập một yêu cầu mạng, bạn có thể sử dụng lệnh `cy.intercept()`. Ví dụ, đoạn mã dưới đây giả lập một yêu cầu GET đến `/api/users` và trả về một phản hồi giả:


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Sau đó, bạn có thể chờ yêu cầu bị chặn bằng `cy.wait('@getUsers')` và xác minh rằng ứng dụng của bạn xử lý phản hồi giả một cách chính xác.

Làm việc với Local Storage và Cookies

Cypress cung cấp các lệnh để tương tác với local storage và cookie. Bạn có thể sử dụng các lệnh này để đặt, lấy và xóa local storage và cookie trong các bài kiểm thử của mình.

Để đặt một mục trong local storage, bạn có thể sử dụng lệnh `cy.window()` để truy cập đối tượng window và sau đó sử dụng phương thức `localStorage.setItem()`. Ví dụ:


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Để lấy một mục từ local storage, bạn có thể sử dụng lệnh `cy.window()` và sau đó sử dụng phương thức `localStorage.getItem()`. Ví dụ:


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Để đặt một cookie, bạn có thể sử dụng lệnh `cy.setCookie()`. Ví dụ:


cy.setCookie('myCookie', 'myCookieValue')

Để lấy một cookie, bạn có thể sử dụng lệnh `cy.getCookie()`. Ví dụ:


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Xử lý Tải lên Tệp

Cypress cung cấp một plugin có tên `cypress-file-upload` giúp đơn giản hóa việc tải lên tệp trong các bài kiểm thử của bạn. Để cài đặt plugin, hãy chạy lệnh sau:

npm install -D cypress-file-upload

Sau đó, thêm dòng sau vào tệp `cypress/support/commands.js` của bạn:


import 'cypress-file-upload';

Sau đó, bạn có thể sử dụng lệnh `cy.uploadFile()` để tải lên một tệp. Ví dụ:


cy.get('input[type="file"]').attachFile('example.txt')

Làm việc với IFrame

Kiểm thử IFrame có thể phức tạp, nhưng Cypress cung cấp cách để tương tác với chúng. Bạn có thể sử dụng lệnh `cy.frameLoaded()` để chờ IFrame tải xong, và sau đó sử dụng lệnh `cy.iframe()` để lấy đối tượng document của IFrame.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress và Tích hợp Liên tục/Triển khai Liên tục (CI/CD)

Tích hợp Cypress vào quy trình CI/CD của bạn là điều cần thiết để đảm bảo chất lượng ứng dụng. Bạn có thể chạy các bài kiểm thử Cypress ở chế độ headless trong môi trường CI/CD của mình. Đây là cách thực hiện:

  1. Cài đặt Cypress: Đảm bảo Cypress được cài đặt như một dependency trong dự án của bạn.
  2. Cấu hình CI/CD: Cấu hình quy trình CI/CD của bạn để chạy các bài kiểm thử Cypress sau mỗi lần build.
  3. Chạy Cypress Headless: Sử dụng lệnh `cypress run` để chạy các bài kiểm thử Cypress ở chế độ headless.

Ví dụ cấu hình CI/CD (sử dụng GitHub Actions):


name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Cấu hình này sẽ chạy các bài kiểm thử Cypress bất cứ khi nào mã được đẩy lên nhánh `main` hoặc một pull request được tạo vào nhánh `main`. Action `cypress-io/github-action` đơn giản hóa quá trình chạy các bài kiểm thử Cypress trong GitHub Actions.

Gỡ lỗi Test Cypress

Cypress cung cấp các công cụ gỡ lỗi xuất sắc để giúp bạn xác định và khắc phục các sự cố trong bài kiểm thử của mình. Dưới đây là một số mẹo để gỡ lỗi các bài kiểm thử Cypress:

Cypress so với các Framework Kiểm thử khác

Mặc dù Cypress là một framework kiểm thử end-to-end mạnh mẽ, việc hiểu nó so sánh với các lựa chọn phổ biến khác là điều cần thiết. Dưới đây là một cái nhìn tổng quan ngắn gọn:

Việc lựa chọn framework phụ thuộc vào nhu cầu và yêu cầu cụ thể của dự án của bạn. Cypress là một lựa chọn tuyệt vời cho các ứng dụng web hiện đại yêu cầu kiểm thử end-to-end nhanh, đáng tin cậy và thân thiện với nhà phát triển.

Ví dụ thực tế về Cypress trong hoạt động

Hãy khám phá một vài ví dụ thực tế về cách Cypress có thể được sử dụng để kiểm tra các loại ứng dụng web khác nhau:

Kiểm thử một ứng dụng Thương mại điện tử

Bạn có thể sử dụng Cypress để kiểm tra các luồng người dùng khác nhau trong một ứng dụng thương mại điện tử, chẳng hạn như:

Đây là một ví dụ về bài kiểm thử Cypress xác minh rằng người dùng có thể thêm thành công một sản phẩm vào giỏ hàng của họ:


it('Thêm một sản phẩm vào giỏ hàng', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Kiểm thử một ứng dụng Mạng xã hội

Bạn có thể sử dụng Cypress để kiểm tra các tương tác của người dùng trong một ứng dụng mạng xã hội, chẳng hạn như:

Đây là một ví dụ về bài kiểm thử Cypress xác minh rằng người dùng có thể tạo thành công một bài đăng mới:


it('Tạo một bài đăng mới', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Chào, thế giới!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Chào, thế giới!')
})

Kiểm thử một ứng dụng Ngân hàng

Đối với các ứng dụng ngân hàng, Cypress có thể được sử dụng để kiểm tra các chức năng quan trọng như:

Một bài kiểm thử để xác minh việc chuyển tiền có thể trông như thế này (với việc giả lập phù hợp để bảo mật):


it('Chuyển tiền thành công', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Kết luận

Cypress là một framework kiểm thử end-to-end mạnh mẽ và linh hoạt có thể giúp bạn đảm bảo chất lượng và độ tin cậy của các ứng dụng web của mình. API thân thiện với nhà phát triển, các tính năng mạnh mẽ và hiệu suất xuất sắc của nó làm cho nó trở thành một lựa chọn phổ biến của các nhà phát triển và kỹ sư QA trên toàn thế giới. Bằng cách tuân theo các phương pháp tốt nhất được nêu trong hướng dẫn này, bạn có thể viết các bài kiểm thử Cypress hiệu quả sẽ giúp bạn phát hiện lỗi sớm trong quá trình phát triển và cung cấp phần mềm chất lượng cao cho người dùng của mình.

Khi các ứng dụng web tiếp tục phát triển, tầm quan trọng của việc kiểm thử end-to-end sẽ chỉ tăng lên. Việc áp dụng Cypress và tích hợp nó vào quy trình phát triển của bạn sẽ giúp bạn xây dựng các trải nghiệm web mạnh mẽ, đáng tin cậy và thân thiện với người dùng hơn.