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.

更多Jerry的原创文章，尽在："汪子熙":