如何用Cypress更简便统计表格中指定内容的出现次数？

我有一个3列的ag-grid表格，想要统计其中“India”的出现次数。我尝试了以下代码：

cy.get('ag-grid-table').contains(country).its('length').as("countrylength");
cy.get('@countrylength').then((ccc) => {
  cy.log(ccc)
})

但这个方法总是返回1，因为contains()只会找到第一个匹配的元素。我还有一个可行的方案：

let count = 0;
cy.get('ag-grid-table div.ag-row').each(($el, index, $list) => {
  if($el.text().includes(country)) {  
    count ++;    
  }      
})

但我想知道是否可以用带length()的单行命令实现这个统计？

解决方案 #

为什么第一种方法失效 #

cy.contains()的特性是仅返回第一个匹配文本内容的元素，所以即便表格内有多个“India”，它也只会获取到第一个，its('length')自然返回1。

单行实现的正确写法 #

直接使用CSS的:contains()选择器，结合cy.get()选中所有包含目标文本的行，再通过its('length')获取数量：

cy.get(`ag-grid-table div.ag-row:contains("${country}")`).its('length').then(count => {
  cy.log(count);
});

如果不需要后续复用统计结果，还能更简洁：

cy.get(`ag-grid-table div.ag-row:contains("${country}")`).its('length').log();

补充说明 #

• :contains()是大小写敏感的，若需要忽略大小写，可结合filter()命令实现：

cy.get('ag-grid-table div.ag-row')
  .filter((index, el) => el.textContent.toLowerCase().includes(country.toLowerCase()))
  .its('length')
  .then(count => cy.log(count));

• 你之前的each循环方案是可行的，但如果需要在后续命令中使用统计结果，建议将其存入Cypress别名：

let count = 0;
cy.get('ag-grid-table div.ag-row').each(($el) => {
  if($el.text().includes(country)) count++;
}).then(() => {
  cy.wrap(count).as('countryCount');
});
// 后续使用统计值
cy.get('@countryCount').then(count => cy.log(count));

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