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

Cypress 基础 - 元素的定位相关推荐

游戏场景设计思维：至关重要的基础元素
关于讲师:卢东彪,腾讯互动娱乐魔方工作室群高级游戏美术师. 导语在本期分享中,我们进入场景思维的中期构图阶段,聚焦对推进画面风格至关重要的场景基础元素刻画,并细化讲解实际技巧,进一步探讨风格化在场景 ...
day15 Ui自动化元素的定位
day15 元素的定位Ui自动化元素的定位1.火狐浏览器安装try xpath2.元素定位思路:(1)查看页面元素,确认能够唯一定位到元素的属性,比如id,文案3.学习xpath cssSelecto ...
【转】探索基础元素---基于WebGL的H5 3D游戏引擎BabylonJS
原文地址:https://blog.csdn.net/AceWay/article/details/51472823 介绍在本教程, 我们将学习如何使用Babylon.js创建基础元素, 比如盒子, ...
11. 前端基础--CSS盒子定位
文章目录前端基础--CSS盒子定位 1. 再看CSS 布局的三种机制 2. 为什么使用定位? 3. 定位详解 3.1 边偏移 3.2 定位模式 (position) 静态定位(static) -了解 ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）...
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
Qt_QML基础元素对象
基本元素(Basic Elements) 元素可以被分为可视化元素与非可视化元素.一个可视化元素(例如矩形框Rectangle)有着几何形状并且可以在屏幕上显示. 一个非可视化元素(例如计时器Time ...
Selenium的元素八大定位写法详解-图文并茂
Selenium的元素八大定位详解老鸟有兴趣可以移步Selenium元素定位神器工具谷歌浏览器插件-SelectorsHub介绍.安装和使用目录 Selenium的元素八大定位详解 1.id定位 ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...

Cypress 基础 - 元素的定位

Selecting a single element

Select elements by filtering

Finding elements

Cypress 基础 - 元素的定位相关推荐

最新文章

热门文章