关于cypress:Cypress-基础-元素的定位

Cypress basics: Selecting elements

语法：

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 将抉择所有三个。

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

一旦你抉择了多个元素（例如通过 .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

您能够通过首先抉择要在其中搜寻的元素来指定选择器，而后向下查看 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 的原创文章，尽在：” 汪子熙 ”:

关于cypress:Cypress-基础-元素的定位

Selecting a single element

Select elements by filtering

Finding elements