cypress（一）元素定位的常見問題解決方法

• 動態ID/class

  這種情形下，無法使用傳統的定位方式直接定位，但是可以通過其他方式：

  cy.xpath("//*[starts-with(@id,'MultipleTextBox')]")      //找id以MultipleTextBox開頭的元素

  cy.xpath("//*[ends-with(@id,'Box')]")   //找id以Box結尾的元素

  cy.xpath("//div[contains(text(),'總計')]"  //找內容中包含“總計”的元素

  　　

• 根據xpath定位到了多個元素，只想獲取其中一個
  • 獲取的元素后用first()，來獲取第一個元素
    

    cy.xpath("//td[text()='order12345678']").first()

  • 如果想要獲取第二個或第三個，可以用eq(指定序號)，注意序號是從0開始
    

    //根據xpath可以得到多個元素，eq(1)是獲取第二個
    cy.xpath("//*[starts-with(@id,'MultipleTextBox')]").eq(1)　

  • 用last()來獲取最后一個元素
    

    cy.xpath("//*[starts-with(@id,'MultipleTextBox')]").last()

如果確定表達式寫的沒有問題，就是定位不到，怎么辦？

以下均以cypress為例：

• 增加等待時間

  1 cy.wait(10000)

• 查看是否在不同的frame中
  cypress如果要使用iframe: 元素被隱藏了 

  • 需要先安裝iframe插件
    

    npm install --save-dev cypress-iframe

  •  在cypress\support\commands.js中添加引用
    

    require('cypress-iframe')

  •  在js代碼中，按照以下方式調用：
    

    cy.iframe().find('#username').type("test")

• 最近測試的產品中，要定位左側菜單的輸入框，但是左側菜單是鼠標移動過去才會顯示的，所以用到了trgger模擬鼠標操作

  1 cy.get('#navigator').should('not.be.visible')
  2 cy.xpath('/html/body/div[4]').trigger("mouseover")
  3 cy.get('#navigator')
  4    .should('be.visible')