在 Cypress 中使用 2 个条件和 IF 语句

Posted 2023-02-18

【中文标题】在 Cypress 中使用 2 个条件和 IF 语句

【英文标题】：Using 2 conditions with an IF statement in Cypress

【发布时间】：2021-05-04 13:57:28

【问题描述】：

您好，我正在尝试运行以下代码，但不知何故它不起作用。如果我简单地将 IF 语句分隔在 2 中并将其嵌套，则相同的代码将起作用。 我的意图是从下拉列表中仅选择一个元素，但使用包含购买，我得到 2 个结果；这就是为什么我试图添加一个额外的条件。

cy.get("#autocomplete").type("ne");
    cy.get(".ui-menu-item").each(($el) => 
      if ($el.text().includes("Netherlands" && $el.text().length === 11))        
        cy.wrap($el).click();
      

你知道这是为什么吗？有更好的方法吗？谢谢

【问题讨论】：

只是括号不合适，应该是$el.text().includes("Netherlands") && $el.text().length === 11。或者节省一些输入并使用完全匹配的$el.text() === "Netherlands"。

【参考方案1】：

我有一个类似的问题，我想在自定义选择组件中选择一个项目（所以不是原生 select 元素）。

我使用了最受好评的答案的推导来实现这一点：

cy.get('my-component .ng-dropdown-panel .ng-option')
      .filter((_, el) => 
        return el.querySelector('span.badge-location')?.textContent === locationName
          && el.querySelector('span.platform-name')?.textContent === platformName;
      )
      .should('have.length', 1)
      .click();

代码循环遍历所有可能的选项元素并找到我要查找的选项并单击该选项。

【参考方案2】：

您可以使用带有函数参数的.filter() 来实现。

赛普拉斯文档中目前没有此变体，但他们在后台使用 jQuery，因此请参阅此处jQuery docs, filter(function)。

注意该函数接收原始 DOM 元素，因此请使用 innerText 而不是 jQuery .text()。

您可以添加多个条件，但使用 === 它会检查完全匹配并且不需要长度检查。

cy.get("#autocomplete").type("ne");
cy.get('.ui-menu-item')                                   // all items
  .filter((index, el) => el.innerText === "Netherlands")  // precise match
  .eq(0)                                                  // take the first
  .click();                                               // select it

【参考方案3】：

文本荷兰后缺少)，您必须添加它，并且在11 之后添加了一个额外的括号)，您必须删除它。所以，你的代码应该是：

cy.get("#autocomplete").type("ne");
    cy.get(".ui-menu-item").each(($el) => 
      if ($el.text().includes("Netherlands") && $el.text().length === 11)        
        cy.wrap($el).click();