Cypress basics: Selecting elements

Selecting a single element

语法：

cy.get('.selector')

首先，让我们看看 .selector 部分的内容。 Cypress 通过查询 DOM 来选择元素。 如果您曾经玩过 CSS 或使用过 jQuery，或者如果您熟悉 JavaScript 中的 document.querySelector 命令，您可能已经熟悉此类选择器。 让我们看看这是什么意思。 作为一个例子，我们可以查看一个看起来像这样的页面：

页面代码如下：

<h1>Shapes:</h1>
<div class="square"></div>
<div id="circle"></div>
<div shape="triangle"></div>

我们可以使用 h1 标签选择一个元素。 如果我们想选择我们的一个形状，我们可以使用类、id 或属性来选择单个元素。

cy
  .get('h1') // select by tag
  .get('.square') // select by class
  .get('#circle') // select by id
  .get('[shape="triangle"]'); // select by attribute

要按类选择元素，您需要使用 . 前缀并通过它选择一个元素，你应该在 id 前面加上#。 您可能会在页面上找到的最常见属性是输入的占位符，甚至是测试 ID，其中您的选择器以方括号开始和结束。 如果选择我们选择在我们的页面上多次找到的元素，例如我们的 div 元素，Cypress 将选择所有三个。

Select elements by filtering

这是一个比较有用的操作。

一旦你选择了多个元素（例如通过 .get(‘li’) 命令，它返回 7 个元素），你可以根据另一个选择器在这些元素中进行过滤。 下面的代码将只选择红色、绿色和蓝色，因为这些是原色并且它们有一个类 .primary。

cy
  .get('li')
  .filter('.primary') // select all elements with the class .primary

要做完全相反的事情，您可以使用 .not() 命令。 使用此命令，您将选择除红绿蓝之外的所有颜色。

cy
  .get('li')
  .not('.primary') // select all elements without the class .primary

Finding elements

您可以通过首先选择要在其中搜索的元素来指定选择器，然后向下查看 DOM 结构以找到您要查找的特定元素。

cy
  .get('.list')
  .find('.violet') // finds an element with class .violet inside .list element

如果您已经在使用属性来标记您的元素，这里有一个提示。 您可以创建一个自定义命令，该命令将通过例如选择您的元素 数据-cy 属性：

Cypress.Commands.add('getById', (input) => {
  cy
    .get(`[data-cy=${input}]`)
})

消费：

cy
  .getById('indigo')

下图是 SAP 电商云 Spartacus UI Cypress 的一个例子：

在使用 click 方法触发 continue button 点击事件之前，我们先得检查其是否处于可点击状态，即 disabled 属性必须为 null.