在 Cypress 中如何计算包含文本的元素？

Question

在 Cypress 中，我试图计算有多少个元素（在这种情况下 li 中有多少个按钮）包含文本。当使用“contains”时，返回的项目数总是等于一个，因为“contains”只给出包含搜索文本的文档中的第一个项目。

          cy.get('li')
            .contains('button', 'Submit')
            .its('length')
            .then(elLength => {
              // I want to test here the number of all buttons in li elements containig word 'Submit'
             }

当然，这不会那样工作，因为elLength始终为 1（如果未找到项目，则为0）。

Cypress 中有没有其他方法可以返回所有带有文本的元素，我可以计算它们？

Answer 1

Cypressget()使用与 jQuery 相同的选择器。因此，您可以使用:contains获取包含文本的所有元素。
由于 Cypresscontains()仅包含可见的 DOM 元素，因此您必须添加:visible才能获得相同类型的行为。

确保只有一个可见按钮包含“提交”：

cy.get('button:visible:contains("Submit")').should('have.length', 1);

要确保“li”元素中只有一个可见按钮包含文本“Submit”：

cy.get('li button:visible:contains("Submit")').should('have.length', 1);

要计算包含一个或多个可见“提交”按钮的“li”元素：

cy.get('li:has(button:visible:contains("Submit"))').should('have.length', 1);