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

Posted 2023-02-15

【中文标题】单击赛普拉斯中的完全匹配文本

【英文标题】：Click an exact match text in Cypress

【发布时间】：2019-10-19 23:43:39

【问题描述】：

在 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 呈现的。

【问题讨论】：

您可以使用regex，这可以与开始和结束锚点完全匹配。

在这个例子中我如何使用正则表达式？我在想像.contains(/^(option)/g) 这样的东西可以工作，但我不知道该怎么做，这不是option 部分。

嗯，这会从字面上匹配单词选项，而不是该变量的内容。也许阅读如何从变量创建正则表达式？

const exp = new RegExp(`^($option)`, "g"); 这终于使它对我有用。谢谢老哥！

【参考方案1】：

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

.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"))

【讨论】：

在这种情况下似乎不需要 g 标志。

这对我有用，因为@rooby 建议 g 标志似乎没有必要

不确定为什么会收到此警告：参数类型 RegExp 不可分配给参数类型字符串 |号码 | RegExp 类型 RegExp 不能分配给 RegExp 类型

【参考方案2】：

您可以使用下面的代码 sn-p 单击具有精确文本的元素。这就像魅力一样，如果您遇到任何问题，请告诉我。

您必须在 cypress 中进行如下处理，这相当于 selenium webdriver 中的 getText()。

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