Question

在赛普拉斯中，.contains命令会产生所有匹配的元素，因此对于单击带有文本的下拉项，.contains可以正常工作。但是我遇到了一个问题，我需要单击文本为“导航标签”的下拉菜单项：问题出在同一下拉菜单中的另一个选项称为“新导航标签”，而正在按它首先出现。

是否可以单击与所需文本完全匹配的元素？

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

我使用.last()部分地解决了该问题，但是我发现该解决方案非常模糊，因为我试图使我的步骤尽可能地可重用，并且这只是一个补丁，使其可以解决特定问题。

请注意，无法对下拉列表中的每个特定项目进行数据测试，因为这些项目是直接从语义用户界面呈现的。

Answer 1

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

.contains() allows for regex因此，您可以进行仅匹配整个字符串的正则表达式（使用^和$）。这样，任何带有多余字符的内容都将不匹配（例如“新导航标签”）。因此，例如，您可以这样做：

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

在使用变量（例如option变量）构建表达式时，Regex有点棘手。在这种情况下，您会build a regular expression这样：

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

因此要与.contains()完全匹配：

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

Answer 2

您可以使用下面的代码段单击具有确切文本的元素。这将像魅力一样工作，如果您遇到任何问题，请告诉我。

您必须像下面在cypress中一样处理，这与硒webdriver中的getText（）等效。

clickElementWithEaxctTextMatch(eleText) {
  cy.get(".className").each(ele => {
    if (ele.text() === eleText) {
      ele.click();
    }
  });
}

在赛普拉斯中单击完全匹配的文本

2 个答案: