使用 Cypress 實現滑鼠懸停操作
滑鼠懸停操作在網頁中非常常見,當我們懸停在某個元素上時,會顯示一系列元素列表。Cypress 不像 Selenium 等其他自動化工具那樣支援滑鼠懸停操作,因為它認為這種操作不穩定。
Cypress 將操作 DOM 元素以執行滑鼠懸停操作。Cypress 利用 JQuery 中的 show() 方法。show() 方法顯示隱藏的元素(具有 CSS 屬性display:none)並將其選中。此外,show() 方法僅對隱藏元素在 DOM 中的直接父級起作用。
現在,為了呼叫任何 JQuery 函式,Cypress 利用invoke() 命令,該命令用於呼叫函式。invoke() 方法不能直接與 cy 連結。
語法
.invoke(name of function) .invoke(options, name of function) .invoke(name of function, arguments..) .invoke(name of function, arguments..) .invoke(options, name of function, arguments…)
函式名稱指的是要呼叫的函式。此外,我們可以向函式呼叫傳遞其他引數,並且對引數數量沒有限制。
如下所示,可以有兩種型別的選項可以修改 .invoke() 的預設行為:
log - log 的預設值為 true。
timeout - timeout 引數的預設值為 defaultCommandTimeout(4000 毫秒)。這是等待 .invoke() 完成的持續時間。
cy.get('#txt').invoke('show')
示例
使用 JQuery show() 方法的編碼實現。
describe('Tutorialspoint Test', function () { // test case it('Test Case5', function (){ // launch the application cy.visit("https://www.amazon.com/"); // to display hidden element with invoke() with show cy.get('#nav-flyout-ya-signin').invoke('show'); //click on the hidden element cy.contains('Sign').click(); //assert to verify the url cy.url().should('include','signin'); }); });
Cypress 還有另一種解決方法來點選僅在頁面上滑鼠懸停操作時出現的隱藏元素。這是透過將選項作為引數傳遞給 Cypress 中的 click() 命令來完成的。
click({ force: true }) - 將 force 選項設定為 true [force:true] 的 click() 命令會修改隱藏元素的預設行為,我們可以點選它。
語法
cy.get('.butn').click({ force: true })
示例
使用 force 選項處理隱藏元素的編碼實現。
describe('Tutorialspoint Test', function () { // test case it('Test Case5', function (){ // launch the application cy.visit("https://www.amazon.com/"); //click on the hidden element with option force set to true cy.contains('Sign').click({force:true}); //assert to verify the url cy.url().should('include','signin'); }); });
廣告