Cypress: Kiểm thử End-to-End trên trình duyệt
/cypress
Hãy chọn Cypress nếu bạn kiểm thử một web app và muốn test viết nhanh, dễ debug bằng hình ảnh và xem lại được khi nó hỏng trong CI. Bỏ qua nếu bạn cần Safari/WebKit như một mục tiêu hạng nhất, bạn kiểm thử các luồng trải trên nhiều tab hoặc nhiều tên miền không liên quan, hoặc bạn muốn chạy song song miễn phí — Cypress Cloud tính phí cho việc đó.
Vì sao test E2E hay bị mang tiếng xấu
Test end-to-end nổi tiếng là hay flaky, chậm và khó debug khi hỏng trong CI với duy nhất một stack trace. Công cụ đời cũ như Selenium chạy bên ngoài trình duyệt và nói chuyện với nó qua WebDriver, thêm nhiều mắt xích và khoảng trễ về thời gian. Cypress chạy trong cùng vòng lặp sự kiện với ứng dụng của bạn, nên nó có thể chờ trên chính DOM thật và đưa cho bạn hình ảnh từng bước về chuyện đã xảy ra khi một test thất bại.
Test chạy ngay trong event loop của trình duyệt
Cypress kiểm thử end-to-end là một framework JavaScript mã nguồn mở (MIT) để kiểm thử bất cứ thứ gì chạy trong trình duyệt. Nó cài như một dev dependency của npm, mở một runner thực thi các spec bên trong một Chrome, Edge, Firefox hoặc Electron thật, và hiển thị từng lệnh khi nó chạy kèm ảnh chụp DOM mà bạn có thể lùi lại từng bước. Ngoài E2E, nó còn làm component testing cho React, Vue, Angular và Svelte qua các testing library của chúng, theo topics và README của repo.
Trải nghiệm debug mà team thực sự muốn
Cypress trở thành câu trả lời mặc định của nhiều đội cho câu hỏi 'làm sao test frontend mà không phải vật lộn với Selenium.' Sức hút nằm ở trải nghiệm lập trình viên: bạn xem test chạy, time-travel qua từng bước, và có Test Replay trong Cypress Cloud để thấy chính xác chuyện gì xảy ra khi CI hỏng. Repo cũng đẩy mạnh component testing trên các framework lớn, nên cùng một công cụ phủ cả một component được mount lẫn một luồng người dùng đầy đủ.
Snapshot time-travel và tự động chờ
- ✓Chạy spec bên trong một trình duyệt thật (Chrome, Edge, Firefox, Electron), trong cùng vòng lặp với ứng dụng của bạn
- ✓Debug time-travel: rê chuột lên từng lệnh để xem ảnh chụp DOM ngay tại thời điểm đó
- ✓Tự động chờ và thử lại assertion, cắt bớt nhiều cái flaky kiểu sleep() thủ công của công cụ cũ
- ✓Component testing cho React, Vue, Angular và Svelte, không chỉ là các lượt chạy end-to-end toàn trang
- ✓Test Replay và bảng điều khiển lượt chạy qua Cypress Cloud để chẩn đoán lỗi CI (README có các badge cho phần này)
- ✓Cài như một dev dependency npm/yarn/pnpm duy nhất — runner, assertion và mocking gói chung
Thêm Cypress làm dev dependency
Cài Cypress như một dev dependency trong một dự án Node: `npm install cypress --save-dev` (hoặc `yarn add cypress --dev`, hoặc `pnpm add cypress --save-dev`). Nó phát hành binary dựng sẵn cho macOS, Linux và Windows, nên không có WebDriver riêng phải quản lý. README trỏ tới on.cypress.io/install cho các bước chạy lần đầu.
Mở runner và viết spec đầu tiên
Mở runner tương tác bằng `npx cypress open`, hoặc chạy headless trong CI bằng `npx cypress run`. Spec là các file JavaScript hoặc TypeScript, nơi bạn truy cập một trang rồi nối chuỗi lệnh và assertion, ví dụ `cy.visit('/login')` rồi `cy.get('input[name=email]').type('[email protected]')`. Toàn bộ tham chiếu lệnh và công thức nằm ở on.cypress.io.
Bộ test regression, component và cổng CI
- •Kiểm thử hồi quy các luồng người dùng quan trọng (đăng nhập, thanh toán, biểu mẫu) trên một web app đang chạy
- •Test cấp component cho React, Vue, Angular hoặc Svelte trong lúc phát triển
- •Chặn pull request trong CI, với Test Replay để chẩn đoán lỗi sau đó
- •Thay thế một bộ Selenium dễ vỡ cho các đội đã sống trong JavaScript và TypeScript
Cypress vượt trội Selenium ở đâu
- ✓Debug thực sự tốt: runner trực quan, ảnh chụp time-travel và Test Replay cho lỗi CI
- ✓Ít flaky theo thiết kế — nó tự chờ trên DOM thay vì bạn rải các độ trễ cố định khắp spec
- ✓Một lần cài phủ cả kiểm thử end-to-end lẫn component trên các framework frontend lớn
- ✓Hệ sinh thái lớn và tài liệu kỹ; cấp phép MIT nên dễ tìm câu trả lời
Không có Safari và khoảng trống đa tab
- △Nó chạy bên trong trình duyệt, nên các luồng trải trên nhiều tab không được hỗ trợ — bạn phải né đi
- △Mô hình same-origin khiến các luồng đa tên miền (như một chuyển hướng OAuth của bên thứ ba) trở nên vụng; cy.origin có giúp nhưng thêm ma sát
- △Độ phủ trình duyệt là họ Chromium, Firefox và Electron; Safari/WebKit chỉ ở mức thử nghiệm, nên thiếu kiểm thử Safari thật sự
- △Chạy song song và Test Replay đi qua Cypress Cloud, một sản phẩm trả phí vượt ngoài tier miễn phí — riêng runner mã nguồn mở sẽ không chạy song song cho bạn
- △Spec chỉ dùng JavaScript/TypeScript; nếu đội của bạn không ở trong hệ sinh thái đó thì khó thuyết phục hơn một công cụ độc lập ngôn ngữ
Playwright, Selenium và WebdriverIO
Team JavaScript chán cảnh Selenium chập chờn
Các đội frontend và full-stack làm việc trong JavaScript hoặc TypeScript muốn có test end-to-end và component với khả năng debug mạnh và ít flaky. Nếu bạn buộc phải test Safari/WebKit như mục tiêu hạng nhất, cần luồng đa tab hoặc đa tên miền, hoặc muốn chạy song song miễn phí trong CI, hãy cân nhắc Playwright kỹ trước khi chọn Cypress.
Câu hỏi thường gặp về Cypress
Cypress là một framework JavaScript mã nguồn mở, cấp phép MIT, để kiểm thử end-to-end và component cho web app. Nó chạy spec của bạn bên trong một trình duyệt thật và hiển thị từng bước kèm ảnh chụp DOM có thể xem lại.
Với các đội JavaScript và TypeScript, Cypress thường viết nhanh hơn và dễ debug hơn nhiều vì nó chạy trong trình duyệt và tự chờ. Selenium thắng ở độ rộng ngôn ngữ và độ phủ trình duyệt, gồm cả Safari.
Nó chạy Chrome, Edge, Firefox và Electron ngay từ đầu. Hỗ trợ Safari/WebKit đang ở mức thử nghiệm, nên nếu độ phủ Safari quan trọng với bạn thì đó là một khoảng thiếu thật cần tính trước.
Test runner miễn phí và mã nguồn mở dưới MIT. Cypress Cloud — thứ thêm chạy song song, Test Replay và bảng điều khiển lượt chạy — là sản phẩm trả phí với một tier miễn phí giới hạn.
Có. Bên cạnh test end-to-end, nó mount và test component cho React, Vue, Angular và Svelte, theo topics và README của repo.
Repo liên quan
cypress có đáng để bạn bỏ thời gian?
ChatGPT, Claude và Perplexity đều đọc được trang này. Hỏi thử xem họ nghĩ gì về cypress.