Cypress+TypeScript中如何获取WebElements数组？

嘿，我明白从Selenium转到Cypress时会遇到的这种适配困惑——毕竟两者的设计思路确实有不小的差异！先帮你理清问题，再给出对应的解决方案：

为什么你的代码得到的长度是1？ #

你写的var rows = Array(cy.get('*[id^="row"]'))之所以返回长度为1的数组，是因为cy.get()返回的是Cypress Chainable对象（不是直接的DOM元素数组），你用Array()包装后，只是把这个Chainable对象当成了数组的唯一元素，自然长度是1。

正确获取元素集合的方法 #

在Cypress里，要获取匹配的元素集合并验证数量，你可以这样做：

方式1：直接用Cypress命令断言数量 #

Cypress的cy.get()本身就会匹配所有符合条件的元素，你可以直接链式断言长度：

cy.get('[id^="row"]').should('have.length', 3);

方式2：获取原生DOM元素数组 #

如果需要像Selenium那样拿到实际的DOM元素数组（比如做一些同步的JS逻辑处理），可以在.then()回调里操作：

cy.get('[id^="row"]').then(($rows) => {
  // $rows是jQuery对象，包含所有匹配的DOM元素
  const rowElements = Array.from($rows); // 转为原生JS数组
  expect(rowElements.length).to.equal(3);
  
  // 这里可以对rowElements做同步操作，比如遍历、过滤等
});

遍历元素并处理子元素（对应Selenium的Stream操作） #

如果你需要像Selenium那样遍历每个父元素，再访问其子元素，Cypress提供了.each()方法来处理集合中的每个元素：

cy.get('[id^="row"]').each(($row) => {
  // $row是当前遍历到的单个row元素（jQuery对象）
  // 查找当前row下的子元素
  const $purgeBtn = $row.find('#purge');
  const $commentInput = $row.find('#comment');
  
  // 对这些子元素执行Cypress操作，注意要先用cy.wrap()包装
  cy.wrap($purgeBtn).click(); // 点击清除按钮
  cy.wrap($commentInput).type('这是一条测试评论'); // 在输入框中输入内容
});

重要提示：修复你的HTML结构问题 #

你的HTML代码里有多个重复的id（比如多个id="comment"、id="purge"），这是不符合HTML规范的——id在页面中必须唯一。建议把这些重复的id改成class：

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

然后对应的选择器可以改成：

cy.get('[id^="row"]').each(($row) => {
  cy.wrap($row.find('.purge-btn')).click();
  cy.wrap($row.find('.comment-input')).type('测试内容');
});

这样不仅符合规范，也能避免潜在的选择器错误。

内容的提问来源于stack exchange，提问作者user9347168