Cypress cho SPA hiện đại: auto-wait, retry-ability & time-travel

1. Cypress là gì và giải quyết bài toán nào

Cypress là một framework kiểm thử end-to-end (E2E) chạy trực tiếp trong trình duyệt, ra đời để giải bài toán kiểm thử ứng dụng web hiện đại một trang (SPA) như React, Vue hay Angular. Trong một hệ thống TMĐT thật, mỗi lần deploy có thể ảnh hưởng tới luồng tìm kiếm, thêm giỏ hàng và thanh toán; kiểm thử thủ công không kịp và không đáng tin. Cypress cho phép viết kịch bản mô phỏng đúng thao tác người dùng: mở trang, gõ ô tìm kiếm, bấm nút, rồi khẳng định kết quả trên giao diện. Điểm khác biệt lớn nhất so với các công cụ đời trước là Cypress chạy cùng vòng lặp sự kiện với ứng dụng, nên nó thấy mọi thứ app thấy. Nhờ đó việc chờ đợi bất đồng bộ được xử lý tự động, giảm mạnh loại lỗi 'chập chờn' vốn là ác mộng của automation.

• Chạy trong trình duyệt: truy cập trực tiếp DOM, fetch/XHR, storage.
• Tự động chờ (auto-wait) và thử lại (retry-ability) trước khi báo lỗi.
• Time-travel debugging: xem lại từng bước trong Test Runner.
• Chỉ hỗ trợ JavaScript/TypeScript — không đa ngôn ngữ như Selenium.

2. Kiến trúc: vì sao chạy trong browser lại khác biệt

Hầu hết công cụ cũ như Selenium điều khiển trình duyệt từ bên ngoài qua giao thức WebDriver, gửi lệnh qua mạng và chờ phản hồi. Cypress lật ngược mô hình: mã kiểm thử được nạp thẳng vào trang cùng ứng dụng, chạy trong cùng tiến trình JavaScript. Vì thế Cypress không phải 'đoán' xem app đã sẵn sàng chưa mà có thể quan sát trực tiếp DOM và các yêu cầu mạng. Bên cạnh đó luôn tồn tại một tiến trình Node nền để làm các việc ngoài trình duyệt: đọc file, seed dữ liệu, gọi API hệ thống, và ghi báo cáo. Hai phần này giao tiếp qua cơ chế nội bộ, cho bạn cả sức mạnh trong trang lẫn khả năng chạm vào hệ điều hành khi cần.

// cypress/e2e/smoke.cy.js — bài test đầu tiên
describe('Trang chủ TMĐT', () => {
  it('hiển thị tiêu đề và ô tìm kiếm', () => {
    cy.visit('/');                       // mở app
    cy.contains('h1', 'Cửa hàng').should('be.visible');
    cy.get('[data-cy="search"]').should('exist');
  });
});

3. Auto-wait & retry-ability — trái tim của Cypress

Trong SPA, dữ liệu tới bất đồng bộ: bấm 'Thêm giỏ' xong, badge số lượng chỉ cập nhật sau khi API trả về. Với công cụ cũ bạn phải rải sleep để chờ, dẫn tới test vừa chậm vừa dễ hỏng. Cypress giải quyết bằng retry-ability: mỗi lệnh truy vấn như cy.get hay cy.contains sẽ tự động truy vấn lại DOM nhiều lần cho tới khi phần tử xuất hiện, và assertion cuối cùng cũng được thử lại tới khi đúng hoặc hết thời gian chờ mặc định (defaultCommandTimeout, thường 4 giây). Nhờ vậy bạn viết code như thể mọi thứ đồng bộ, còn Cypress lo phần chờ đợi. Đây là lý do các bài test Cypress viết đúng cách rất ít 'chập chờn'.