如何使用 Cypress 測試“HOVER”（.trigger('mouseover') 不起作用）

Question

我想知道是否可以使用賽普拉斯測試可覆蓋的下拉菜單欄。

For example, when you go to Ebay( https://www.ebay.com ), you'll see the alert icon at the top-right corner of the page and if you hover on that element, sign-in notification box will出現。

這是我的代碼，我按照賽普拉斯告訴我的操作，但我得到了一個錯誤，比如......

AssertionError 重試超時：應找到元素：#ghn-err，但從未找到它。

 it('ebay hover test', () => {
        cy.visit('https://www.ebay.com')
        // 1. alert icon hover test.
        cy.get('#gh-Alerts-i').trigger('mouseover')
        cy.get('#ghn-err').should('be.visible')
        // 2. This is my another test.
        // cy.get('#gh-eb-My > .gh-menu > .gh-eb-li-a > .gh-sprRetina').trigger('mouseover')
        //cy.get('#gh-eb-My-o > .gh-eb-oa thrd').should('be.visible')
    })

Answer 1

對我來說，鼠標懸停有效。 這是一個有待解決的已知 Cypress 錯誤。 但是，試試這些：

cy.get('#gh-Alerts-i').trigger('onmouseover')
cy.get('#gh-Alerts-i').trigger('mouseenter')
cy.get('#gh-Alerts-i').invoke('trigger', 'contextmenu')
cy.get('#gh-Alerts-i').rightclick();

Answer 2

我遇到了同樣的問題，我終於找到了這個插件，它完全符合我的要求：做真實事件而不是模擬事件（模擬 == 使用 javascript 啟動）。

https://github.com/dmtrKovalenko/cypress-real-events#cyrealhover

只需安裝它，在cypress/support/index.js文件中添加一行（不要忘記！請參閱頁面頂部的“安裝”段落）並使用cy.get(<element>).realHover() 。

Answer 3

https://github.com/dmtrKovalenko/cypress-real-events#readme

使用上面的 package，它應該可以工作。

注意：這僅適用於 chrome 瀏覽器。

Answer 4

如果.trigger()對您不起作用，也可能是您的顯示邏輯是通過 CSS 控制的（例如使用.class:hover ）。 然后，您可以重新設計顯示邏輯，以使用mouseenter和mouseleave事件來切換 class。