在Cypress中单击完全匹配的文本 [英] Click an exact match text in Cypress

问题描述

在Cypress中，.contains命令会生成所有匹配的元素，因此对于单击带有文本的下拉项，.contains可以很好地工作。但我面临的问题是，我需要单击文本为"导航标签"的下拉项：问题出现在同一下拉菜单中的另一个选项中，称为"新建导航标签"，而且它是按下的，因为它是首先出现的。

是否有办法单击与所需文本完全匹配的元素？

Given('I click on the {string} drop down option', option => {
  cy.get(`[data-test="dropdown"]`)
    .find('.item')
    .contains(option)
    .click();
});

我使用.last()部分解决了该问题，但我发现此解决方案相当含糊，因为我试图尽可能保持步骤的可重用性，而这只是使其在此特定问题中发挥作用的一个补丁。

请注意，不可能对下拉列表中的每个特定项目进行数据测试，因为项目是直接从语义UI呈现的。

推荐答案

正则表达式在这里可以很好地工作。

.contains()allows for regex，因此您可以执行仅与整个字符串匹配的正则表达式(使用^和$)。这样，任何包含额外字符的内容都不会匹配(如新导航标签)。例如，您可以这样做：

  cy.get(`[data-test="dropdown"]`)
    .find('.item')
    .contains(/^Navigation Label$/)
    .click();

当您使用变量(例如，您的option变量)。在本例中，您将build a regular expression如下所示：

  cy.get(`[data-test="dropdown"]`)
    .find('.item')
    .contains(new RegExp("^" + option + "$", "g"))
    .click();

要获得与.contains()的完全匹配：

cy.contains(new RegExp(yourString, "g"))

这篇关于在Cypress中单击完全匹配的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！