使用賽普拉斯處理鼠標懸停在菜單上

Question

我最近偶然發現了e2e工具Cypress.io 。 我目前正在為與我合作的公司進行POC，以對React應用程序進行端到端測試。 像大多數Web應用程序一樣，它具有一個懸停菜單。

一個例子 ：

網址： 電影

我試圖從懸停中單擊菜單項，但測試失敗， display未設置為none 。

在Selenium中，我們使用moveElement方法轉到該元素，然后執行需要做的任何事情。 但是，我無法使用賽普拉斯來實現。

考慮到當前菜單，我寫了這個

it('goes to specific element in Genre',()=>{
        cy.get('#menu').within(()=>{
            cy.get('ul').within(()=>{
                cy.contains('Family').click();
            });
        });
    }); 

錯誤：

Answer 1

賽普拉斯具有獨特的工作流，該工作流基於將盡可能多的測試烘烤為默認行為。 在模擬包含“ Family”的元素的點擊之前，它會檢查操作性 。 這是一個內置測試，如果該元素被隱藏， display:none （在這種情況下），大小為0,0等，則將失敗。只有通過該測試后，它才會模擬對包含“ Family”的元素的操作。

您可以使用.click({force:true})覆蓋可操作性檢查，但隨后您將無法保證用戶實際上能夠找到並單擊該元素。

進行此測試的正確方法是觸發下拉菜單，以使該元素變得可見，然后單擊。 如果要查找“流派”菜單項，顯示下拉菜單，然后單擊“家庭”項，則將執行以下操作：

describe('Hover Menu',()=>{
    it('can click on a genre sub-menu item',()=>{
        cy.get('#menu').contains('Genre').next('.sub-menu').then($el=>{
            cy.wrap($el).invoke('show')
            cy.wrap($el).contains('Family').click()
        })
    })
})

在這里， show是一個jQuery方法，該方法修改CSS屬性以使該元素可見。

cy.wrap($el)將jQuery元素轉換為Cypress Chainer，然后可以在其上調用Cypress命令。