赛普拉斯：获取 web 元素数组

Question

这可能是一个简单的问题，也可能是无法完成的事情。但与 Selenium 资源相比，我发现网络上的 Cypress 帮助有点“落后”。此外，作为一名 Java 程序员，我很难接受我在 TypeScript 中能做什么和不能做什么（以及 Cypress 与 Selenium 相比）。

在 Cypress（和 TypeScript）中是否有可能从这样的代码中获取 WebElement 数组？

<div id="row-123">
   <span id="comment">
   <button id="purge>
   <input id="comment">
</div>
<div id="row-456">
   <span id="comment">
   <button id="purge>
   <input id="comment">
</div>
<div id="row-789">
   <span id="comment">
   <button id="purge>
   <input id="comment">
</div>

我正在尝试这个：

var rows = Array(cy.get('*[id^="row"]'));

但是当我尝试断言 rows[] 数组的长度时，它声称是 1 而不是 3。所以它不像我想象的那样工作。

在 Java 和 Selenium 中，我会这样做：

List<WebElement> rows = driver.findElements(By.id("^row"));

然后我可以使用例如 Stream() 将每个元素解析为一个类，然后访问其中的（子）元素。等等。但我觉得在 Cypress 中很难做到这一点？

Answer 1

您可以使用each() 遍历类似数组的结构（具有长度属性的数组或对象）。

let idArray = []
cy.get('*[id^="row"]').each(($el, index, $lis) => {
    //Find element based on InnerText
    if ($el.text() == 'text') {
        //Do something  
    }
    //Find element based on index position
    if (index == 1) {
        //Do something
    }
    //Save the id in the idArray
    cy.wrap($el).invoke('attr', 'id').then((val) => {
        idArray.push(val);
    })
}).then(($lis) => {
    expect($lis).to.have.length(3)
})

根据讨论，一种迭代多个 tr 和 td 并基于 innerText 找到所需元素然后采取一些操作的方法：

cy.get('tr').each(($el, index, $lis) => {
    cy.get('td').each(($el) => {
        if ($el.text() == 'text') {
            cy.log('Element found')
            return
        }
    })
})