如果您对Cypress系列感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于Cypress系列的详细内容，我们还将为您解答15-Cypress元素定位选择器的相关问题，并且为您

如果您对Cypress系列感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于Cypress系列的详细内容，我们还将为您解答15- Cypress 元素定位选择器的相关问题，并且为您提供关于Cypress 元素定位选择器、Cypress系列（0）- 如何学习 Cypress、Cypress系列（100）- cypress-file-upload 插件, attachFile() 命令详解、Cypress系列（10）- Cypress 编写和组织测试用例篇 之 动态跳过测试用例的有价值信息。

• Cypress系列（15）- Cypress 元素定位选择器（元素定位contains）
• Cypress 元素定位选择器
• Cypress系列（0）- 如何学习 Cypress
• Cypress系列（100）- cypress-file-upload 插件, attachFile() 命令详解
• Cypress系列（10）- Cypress 编写和组织测试用例篇 之 动态跳过测试用例

Cypress系列（15）- Cypress 元素定位选择器（元素定位contains）

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

前言

• 做 UI 自动化测试，每个测试用例都会包含对元素的操作
• 健壮、可靠的元素定位策略可以保障测试成功率的提高
• 相对于其他测试框架来说，Cypress 提供了特别的定位策略，让你无须过多担心因定位失败而导致的测试失败

做元素定位时，你是否曾遇到过以下难题

• 元素 ID 或 class 是动态生成的
• 你使用了 CSS选择器去定位，但开发把元素CSS样式改掉了

这种情况下通常会测试失败

Cypress 如何解决上述难题

提供了 data-* 属性，包含了下面三个定位器

1. data-cy
2. data-test
3. data-testid

重点

• 它们都是 Cypress 专有的定位器，仅用来测试
•  data-* 属性和元素的行为或样式无关，意味着即使 CSS 样式或 JS 行为改变，也不会导致测试失败
• 注意：在实际项目中，需要自己将 data-* 属性加到元素中，意味着你得有权限修改代码

html 前端代码

测试文件代码

常规选择器

会点前端的童鞋应该都知道，在 css 里面怎么写， 这里就怎么写，敲简单 的啦

#id 选择器

通过元素的 id 属性来定位

cy.get("#main1").click()

.class 选择器

通过元素的 class 属性来定位

cy.get(".btn").click()

属性选择器

通过元素的各种属性来定位

cy.get("button[id='main2']").click()

:nth-child(n) 选择器

html 代码栗子

测试代码

cy.get("ul>li:nth-child(2)").click()

Cypress.$定位器

针对难以用普通方式定位的元素，Cypress 还提供了 JQuery 选择器（对我来说简直是福音）

格式： Cypress.$(selector) 

Cypress.$('#main2')
// 等价于
cy.get('#main2')

拓展

对于更多的 css 选择器写法，可以看看这篇文章：https://www.cnblogs.com/poloyy/p/12629662.html

只需要关注选择器那一列就好啦

结尾

本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文，并附上了自己的理解

对书籍感兴趣的，大家可以参考本篇博客：https://www.cnblogs.com/poloyy/p/13052972.html，考虑自身需求进行购买

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

Cypress 元素定位选择器

        健壮可靠的元素定位策略是测试成功的保障。Cypress 提供了多种定位策略能够使你聚焦在和元素的交互上而无须过多担心因定位而导致的测试失败。在以往的测试中，一定遇见过以下类似问题。

1. 应用元素的ID 或者 类是动态生成的。
2. 使用了CSS 定位策略，但在开发过程中CSS样式发生了改变

        这种情况下通常测试会失败。

        为解决这个问题， Cypress 提供了 data-* 属性。 data-* 属性包含如下3 个定位器：

• data-cy
• data-test
• data-testid

       它们都是Cypress 专有的定位器，仅用来测试。data-* 属性与元素的行为样式无关，这意味着即使CSS样式或JS 行为改变也不会导致测试失败。

举例来说

为 button 添加 data-test 属性

<button id="main" aui-button="primary"data-test="BUTTON/创建配置字典">
<span> 创建配置字典 </span>
</button>

       在测试用例中，采用如下方法与元素交互

// 在页面定位到具有data-test 属性且值等于 "BUTTON/创建配置字典"的元素，单击
cy.get(''[data-test="BUTTON/创建配置字典"]'').click()

        除了Cypress 专有选择器外，还可以利用一下常规选择器来定位元素。

•  #id 选择器

        id 选择器通过HTML元素的 id 属性选取指定的元素

// 在页面定位到id 是 main 的元素，单击
cy.get("#main").click()

• .class 类选择器

        类选择器通过 HTML 元素的 class 属性选取指定的元素

// 在页面定位 具有 class属性且值等会 btn 的元素，单击
cy.get(".btn").click()

• attributes 属性选择器

        属性选择器通过 HTML 元素的属性选取指定的元素

// 在页面定位button 元素且 ID="main" 的元素单击
cy.get(''button[id="main"]'').click()

• :nth-child(n) 选择器

        nth-child(n) 选择器匹配属于其父元素的第n 个子元素，不论元素的类型

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

# Cypress 查找元素
cy.get("li:nth-child(2)").click()

Cypress系列（0）- 如何学习 Cypress

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

前言

• Cypress 未来很有可能会火的一塌糊涂，那么我们又应该如何进行学习呢？
• 目前国内 Cypress 可以学习的资源并不多，你百度只搜 Cypress 还可能出现硬件的东西哈哈哈
• 虽然目前官网提供了中文版的官方文档，但感觉翻译的还是一般般

隆重推荐

• 目前国内可以说是第一本关于 Cypress 的书，博主整个系列的文章都是基于这本书的，阅读->敲代码->写博客->巩固知识
• 它就是蔡超老师写的《Cypress 从入门到精通》，博主认为这本书可以很好的帮助你入门 Cypress，并且能帮助你学习进阶的内容
• 所以也帮蔡老师打打广告，希望更多的童鞋跟我们一起学习 Cypress啦！
• 下面附上了当当旗舰店的二维码啦！现在超便宜的。。我买的时候还要50呢。。

买不了吃亏买不了上当啦啦啦~快来跟我一起学习吧！！

Cypress系列（100）- cypress-file-upload 插件, attachFile() 命令详解

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

官方地址

https://github.com/abramenal/cypress-file-upload

安装方式

npm

npm install --save-dev cypress-file-upload

项目导入插件

在 cypress/support/commands.js 文件下添加下面语句

import 'cypress-file-upload';

实际栗子

测试代码

运行结果

注意事项

• 因为这里用的是 mock，命令是 cy.route() ，但如果换成最新的 cy.intercept() 会失败
• 可以观察下实际项目中是否存在这个问题（主要是上传文件的接口的域名需要和网站同源）

Cypress系列（10）- Cypress 编写和组织测试用例篇 之 动态跳过测试用例

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

前言

• 上一节只讲了如何跳过执行 or 只执行某些测试用例集 or 测试用例
• 在实际项目中，可能存在需要在运行中动态地去决定某个测试是否需要执行

如何动跳过执行某些测试用例

测试代码

运行以下命令

进入 Cypress 安装目录，cmd敲

yarn cypress:open --env flag=1

打开 Cypress Test Runner 之后运行上面的代码文件

测试结果

当 flag != 1 时的测试结果

知识点

• 我们可以通过指定环境变量来动态判断是否执行指定的测试用例
• 设置环境变量有很多种方法，这里用的是命令行方式，格式： --env key=val1,key2=val2 ，若需要指定多个环境变量则需要逗号来隔开，而不是空格
•  this.skip() ，当测试用例内调用该方法时，方法后面的代码都不会执行，方法前面若是调用 Cypress 的方法则也不会执行（如： cy.visit() 、 cy.log() ），只有非 Cypress 方法才会执行（如： console.log("1234") ）

备注：后面再讲环境变量不同的配置方式

今天关于Cypress系列和15- Cypress 元素定位选择器的介绍到此结束，谢谢您的阅读，有关Cypress 元素定位选择器、Cypress系列（0）- 如何学习 Cypress、Cypress系列（100）- cypress-file-upload 插件, attachFile() 命令详解、Cypress系列（10）- Cypress 编写和组织测试用例篇 之 动态跳过测试用例等更多相关知识的信息可以在本站进行查询。