Cypress Hover: Cách Test Hiệu Quả Khi Không Có cy.hover()

Bạn đang gặp khó khăn khi test hover trong Cypress? Mặc dù Cypress không có command cy.hover() tích hợp, nhưng đừng lo lắng! Bài viết này sẽ hướng dẫn bạn các workaround hiệu quả để mô phỏng hành vi hover một cách chính xác, giúp bạn kiểm tra các tương tác và hiệu ứng CSS liên quan đến hover một cách dễ dàng. Hãy cùng khám phá các phương pháp sử dụng trigger(), invoke(), và plugin cypress-real-events để giải quyết vấn đề này.

Tại Sao Cypress Không Có cy.hover()?

Cypress chạy trực tiếp trong trình duyệt và sử dụng JavaScript để mô phỏng các hành động của người dùng. Tuy nhiên, các event được tạo ra bởi Cypress là "untrusted events". Sự khác biệt giữa "trusted" và "untrusted events" là gì? Event do trình duyệt tạo ra (từ tương tác người dùng) được coi là "trusted" và có quyền truy cập mà event được tạo từ script không có. Do đó, hầu hết các untrusted event sẽ không kích hoạt các hành động mặc định, ngoại trừ event "click".

Thêm vào đó, không có cách nào để trực tiếp kích hoạt các CSS pseudo-classes như :hover từ JavaScript. Đây là lý do chính tại sao cy.hover() vẫn chưa xuất hiện trong Cypress kể từ năm 2015.

Các Workaround Để Test Hover Trong Cypress

Mặc dù Cypress không hỗ trợ trực tiếp việc mô phỏng hover, bạn vẫn có thể đạt được mục tiêu kiểm thử của mình bằng một số cách. Thông thường, có hai lý do chính khiến bạn muốn mô phỏng hover trong các test của mình:

• Bạn muốn tương tác với một element bị ẩn cho đến khi hover (ví dụ: dropdown, button).
• Bạn muốn kiểm tra các thay đổi về style/trạng thái trang khi hover.

1. Sử Dụng Thuộc Tính force

Nếu bạn muốn tương tác với các element bị ẩn, bạn có thể sử dụng thuộc tính force: true trong các command như click(). Điều này sẽ bỏ qua các kiểm tra về khả năng hiển thị của Cypress và thực hiện hành động, ngay cả khi element bị ẩn. Tuy nhiên, hãy cẩn thận khi sử dụng cách này, vì nó có thể dẫn đến việc kiểm tra các trường hợp không thực tế.

Ví dụ:

        
            cy.get("button").click({ force: true });
        
    

2. Sử Dụng Command invoke()

Một cách khác là sử dụng command invoke('show') để hiển thị element trước khi thực hiện hành động. invoke() cho phép bạn gọi một hàm jQuery trên element, trong trường hợp này là show(). Điều này sẽ thay đổi thuộc tính CSS display thành true.

Ví dụ:

        
            cy.get("button").invoke("show").click();
        
    

3. Mô Phỏng Event Bằng trigger()

Command trigger() cho phép bạn kích hoạt một event cụ thể trên một element. Đối với hover, bạn có thể sử dụng trigger('mouseover') hoặc trigger('mouseenter').

Ví dụ:

        
            cy.get('[data-cy="board-item"]').trigger('mouseover');
        
    

Tuy nhiên, cần lưu ý rằng các event được kích hoạt bằng trigger() là "untrusted events", vì vậy chúng có thể không hoạt động giống như các event thực tế được tạo bởi người dùng.

4. Sử Dụng Plugin cypress-real-events Để Tạo Event Thực

Cách tốt nhất để mô phỏng hover chính xác là sử dụng plugin cypress-real-events. Plugin này sử dụng Chrome DevTools Protocol (CDP) để tạo các event thực, giống như các event được tạo bởi người dùng. Plugin này hỗ trợ 4 command mới: realClick(), realHover(), realPress(), và realType().

Để cài đặt plugin, hãy chạy:

        
            npm install cypress-real-events
        
    

Sau đó, thêm dòng sau vào file cypress/support/index.js hoặc cypress/support/e2e.js:

        
            import "cypress-real-events/support";
        
    

Ví dụ sử dụng realHover():

        
            cy.get("[data-cy=hover-p]").realHover().should("have.css", "color", "rgb(255, 0, 0)");
        
    

Lưu ý: Plugin này chỉ hoạt động trên các trình duyệt dựa trên Chromium (ví dụ: Chrome, Edge).

Kết Luận

Mặc dù Cypress không có command cy.hover() tích hợp, bạn vẫn có nhiều cách để test hover một cách hiệu quả. Sử dụng trigger(), invoke(), hoặc plugin cypress-real-events sẽ giúp bạn kiểm tra các tương tác và hiệu ứng CSS liên quan đến hover một cách chính xác, đảm bảo ứng dụng của bạn hoạt động đúng như mong đợi.