Cypress 基础 - 元素的定位

2021-12-13 12:35:05 阅读：223 来源： 互联网

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的原创文章，尽在："汪子熙":

标签：定位,get,Cypress,元素,选择,cy,select
来源： https://www.cnblogs.com/sap-jerry/p/15682734.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Cypress 基础 - 元素的定位

Selecting a single element

Select elements by filtering

Finding elements