赛普拉斯 - .get 的行为（重用获得的元素）

Question

我将赛普拉斯与黄瓜 (Gherkin) 一起使用，这是场景：

Scenario: Open portfolio page
  Then I should see "Portfolio" in the header
  Then I should see a table with the following headers (1)
      | Header    |
      | Currency  |
      | Quantity  |
      | Companies |
  Then I should see a table with the following headers (2)
      | Header    |
      | Currency  |
      | Quantity  |
      | Companies |

现在，第一个实现 (1) 总是通过，但第二个 (2)，即“重用”“table”object 的实现总是失败。

Then('I should see a table with the following headers (1)', (dataTable) => {    
    // it calls backend to retrieve data
    cy.wait(2000) // wait 2 seconds

    cy.get('table').should('be.visible')

    for (let row of dataTable.rows()) {
        cy.get('table').find('th').should("contain", row[0])
    }
})

Then('I should see a table with the following headers (2)', (dataTable) => {    
    // it calls backend to retrieve data
    cy.wait(2000) // wait 2 seconds

    const table = cy.get('table')
    table.should('be.visible')

    for (let row of dataTable.rows()) {
        table.find('th').should("contain", row[0])
    }
})

它实际上在第二个 header、“数量”上失败了。

Timed out retrying after 4000ms: Expected to find element: th, but never found it. Queried from element: [ , 3 more... ]

为什么？

Answer 1

Cypress commands yield their results, and do not return them。我建议您重新编写测试以不要求 table 元素被返回，或者使用别名。

// Using an alias
Then('I should see a table with the following headers (2)', (dataTable) => {    
    // it calls backend to retrieve data
    cy.wait(2000) // wait 2 seconds

    cy.get('table').as('table')
    cy.get('@table').should('be.visible')

    for (let row of dataTable.rows()) {
        cy.get('@table').find('th').should("contain", row[0])
    }
})

Then('I should see a table with the following headers (2)', (dataTable) => {    
    // it calls backend to retrieve data
    cy.wait(2000) // wait 2 seconds

    cy.get('table').should('be.visible')

    for (let row of dataTable.rows()) {
        cy.get('table').find('th').should("contain", row[0])
    }
})

Answer 2

cy.get 与 $ 或 document.querySelector 有点不同。它产生了一个承诺，不能按你想要的方式使用。但是，您可以像使用 jQuery 一样查询使用它，因为 Cypress 是 jQuery 包装在承诺中的...因此，如果您想按摩您之前查询的元素，请将它们传递给 .then( ) 或给它们起别名并稍后重用。

赛普拉斯 - .get 的行为（重用获得的元素）

Cypress - Behaviour of .get (to reuse obtained element)

cypress