+3

Tớ đã áp dụng kiểm thử bằng Cypress vào dự án như thế nào

Giới thiệu

Xin chào, vừa rồi mình có cơ hội tiếp xúc với cypress, cypress là tool kiểm thử giao diện cho web, được viết bằng JS và rất dễ sử dụng, nó có thể chạy End to End test, intergation test và unit test.

Nếu là dự án dài hơi thì nên áp dụng, thời gian đầu có thể sẽ vất vả cho việc viết test, nhưng càng về sau thì công việc càng nhàn.

Yêu cầu

  • Đầu tiên bên mình đã chọn ra những chức năng quan trọng để ưu tiên test trước, bởi vì việc viết test khá là mất thời gian.
  • Để viết test thì cần có Spec rõ dàng và test case đầy đủ, thông thường một chức năng toàn ít nhất là 5 chục case, và bạn chuyển nó thành code thì sẽ rất là dài.
  • Cuối cùng là sự kiên nhẫn :v, nếu bạn đang sài cypress bản free thì sẽ nhận ra sau khi viết test cho vài chức năng đó là rất tốn thời gian, còn khi sài tính phí thì cypress họ sẽ phân ra nhiều CI machine để thực hiện các chức năng đó thay vì tất cả chỉ chạy trên một CI machine

Thực hiện

  • Thực hiện viết test và tìm cách tối ưu, rút ngắn thời gian chạy test, bên mình chạy 6 chức năng và mất khoảng 1 giờ, cho nên việc refactor để tối ưu là cực kì quan trọng
  • Loại bỏ dữ liệu test khi kết thúc quá trình test tự động, việc test tự động có thể gây khó khăn manual test nếu như chúng ta không xóa dữ liệu test sau khi chạy xong.
  • Triển khai chạy test định kỳ, bạn không thể ngày nào cũng chạy tất cả các chức năng được, như mình nói ở trên thì việc chạy test rất là tốn thời gian.

Ưu điểm

  • Thời gian test lại ngắn hơn manual test, ngoài ra với những case giống nhau như email chẳng hạn, chúng ta có thể đưa nó thành 1 đoạn test chung và chỉ việc gọi lại.
  • Viết test nhanh hơn, dễ hơn một số loại tool khác.
  • Có thể test mọi thứ trên trình duyệt.

Nhược điểm

  • Thời gian chạy khá lâu.
  • Spec và test case bắt buộc phải đầy đủ, như vậy cần thêm thời gian viết test case, dự án của mình thì spec chưa được đầy đủ nên gặp chút khó khăn khi làm test case.
  • Việc chạy test cũng ngốn kha khá tài nguyên trên máy, và cá nhân mình cảm thấy chưa chưa ổn định.

Tính năng

  • Time travel: lưu lại snapshots, có thể xem lại command log để thấy những gì được thực hiện trong từng step.
  • Debuggability: dễ dàng biết nơi nào xảy ra lỗi và thông tin cung cấp của nó rất dễ đọc.
  • Automatic waiting: Không cần phải thêm thời gian chờ hoặc sleeps vào test. Cypress tự động chờ khi command và assertion trước khi chạy tiếp. No more async hell 😃).
  • Spies, Stubs và Clocks: Xác thực, kiểm soát thao tác của chức năng, server response, thời gian.
  • Screenshots và videos: tự động chụp lại lỗi nơi nó xảy ra, hoặc là video khi run từ CLI.
  • Consistent results: kiến trúc của nó không sử dụng Selenium hoặc WebDriver.

Setup và viết test

Chỉ cần sài node, bạn có thể cài đặt Cypress chỉ với một câu lệnh npm install cypress --save-dev, run nó , tất cả chưa tới 1 phút, ez 😃 Cypress có doc rất dễ đọc, API cũng rất tiện và dễ dùng, bạn có thể lên trang chủ của họ để tham khảo, việc viết test thì cũng rất ez, dễ viết dễ đọc dễ hiểu, và cypress chạy nhanh như trình duyệt của bạn vậy, bạn có thể xem test chạy ra sao luôn.

demo

sau khi cài đặt xong, chúng ta sẽ tự viết một file test để xem cách nó chạy nhé:

touch {your_project}/cypress/integration/sample_spec.js

Chạy ./node_modules/.bin/cypress open để mở cypress. Thêm các bước test:

describe('My First Test', function() {
  it('finds the content "type"', function() {
    cy.visit('https://example.cypress.io') // truy cập vào https://example.cypress.io
    
    cy.contains('hype') // kiểm tra xem trên trang có từ `hype` nào không
  })
})

Nhìn rất dễ đúng k 😃), nó sẽ truy cập vào đường dẫn example.cypress.io và kiểm tra xem có chữ "hype" nào không, nếu không có thì sẽ trả ra lỗi, và đây là phần hiển thị thao tác kèm theo thông báo lỗi:

Bạn cũng có thể click vào lỗi và thông tin về lỗi sẽ được hiện thị trên console log.

Sau đây là demo:

Ở bài viết này mình sẽ không đi vào chi tiết cách viết cypress, các bạn có thể tham khảo trên cypress.

Tổng kết

Trên đây là phần giới thiệu, ưu nhược điểm của cypress của mình trong quá trình tham gia phát triển dự án, hy vọng sẽ giúp ích được cho bạn trong việc áp dụng nó vào dự án. Happy coding ! ❤️


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.