赛普拉斯：使用带有 OR 条件的多项选择答案

【问题标题】：Cypress: Using multiple selector wih OR condition赛普拉斯：使用带有 OR 条件的多项选择
【发布时间】：2022-01-26 05:40:48
【问题描述】：

我有多个登录页面：

第一个登录页面

输入元素为：

<input placeholder="name@email.com" class="input" name="email" type="text" value="">

Cypress 选择器如下：

cy.get('input[name="email"]').as('email').click();

第二次登录页面：

输入元素为：

<input id="email" type="email" required="required" class="input">

Cypress 选择器如下：

cy.get('input[id="email"]').as('email').click();

如果我们注意到，第一个输入元素有name=email，而第二个输入元素有id=email。
有没有办法编写一个柏树选择器，它可以在其中查找选择器input[name="email"]，如果找不到它会查找input[id="email"]？

【问题讨论】：

@Awaji-mitop N. Gilbert 的回答会奏效，但我想问一下您为什么要针对这种情况进行条件测试？这不像是您需要有条件地检查 ID 的情况，而是绝对可以检查 id 或名称，并且可以明确控制您所在的页面。
嗨@agoff，如果我理解你的话，那么是的，我们可以分别对两个页面进行 2 次不同的测试。此外，根据用例，登录表单可以被唯一标识，因此，我们绝对可以测试知道何时根据 id 或 name 查询元素。但是，整体代码结构尚不清楚，所以我相信一个直接的答案是检查查询是否找到了一个项目，然后对该项目执行操作。基本上，重新排列代码会更好，不需要条件测试，但这又取决于大局。
@Awaji-mitopN.Gilbert 是的！正是我所说的——你的回答完全没问题，我只是想挑战 OP，他们为什么要写一个条件测试。

标签： javascript html testing automated-tests cypress

【解决方案1】：

是的，有。根据docs，它被称为cypress条件测试。

根据您的需要，有多种方法可以完成此操作，如文档中所示。

下面是我们可以做的事情

  cy.get('input[name="email"]').then(($btn) => {
    if ($btn.length) {
      // do something if it's active
      $btn[0].click();
    } else {
      // do something else
      cy.get('input[id="email"]').as('email').click();
    }
  })

【讨论】：

【解决方案2】：

如果您使用 css 选择器，您可以使用逗号 , 执行 OR 条件。比如：

cy.get('input[name="email"],input[id="email"]').click()

【讨论】：