如果您对Cypress系列和16-查找页面元素的基本方法感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解Cypress系列的各种细节，并对16-查找页面元素的基本方法进行深入的分析，此外还有关于

如果您对Cypress系列和16- 查找页面元素的基本方法感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解Cypress系列的各种细节，并对16- 查找页面元素的基本方法进行深入的分析，此外还有关于Cypress系列（100）- cypress-file-upload 插件, attachFile() 命令详解、Cypress系列（10）- Cypress 编写和组织测试用例篇 之 动态跳过测试用例、Cypress系列（11）- Cypress 编写和组织测试用例篇 之 动态生成测试用例、Cypress系列（12）- Cypress 编写和组织测试用例篇 之 断言的实用技巧。

• Cypress系列（16）- 查找页面元素的基本方法（查找页面元素的快捷键）
• Cypress系列（100）- cypress-file-upload 插件, attachFile() 命令详解
• Cypress系列（10）- Cypress 编写和组织测试用例篇 之 动态跳过测试用例
• Cypress系列（11）- Cypress 编写和组织测试用例篇 之 动态生成测试用例
• Cypress系列（12）- Cypress 编写和组织测试用例篇 之 断言

Cypress系列（16）- 查找页面元素的基本方法（查找页面元素的快捷键）

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

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

前端页面代码

后面写的 Cypress 代码，都会基于这个 html 页面来定位元素哦，文件位置随意放，代码需要手动自己敲一遍

.get(selector)

该用法用来在 DOM 树中查找 selector 对应的 DOM 元素

两种语法格式

// 以选择器定位
cy.get(selector)

 以别名定位，后续会讲到
cy.get(alias)

简单的栗子

测试结果

如果可以匹配多个元素，则返回多个元素

.find(selector)

该定位方法用来在 DOM 树中搜索已被定位到的元素的后代，并将匹配到的元素返回为一个新的 jQuery 对象【注意，不是返回元素对象】

实际栗子-测试文件代码

测试结果

解析错误信息（重点，懂了这个就不会再犯同样的错误了）

• 英文：A child command must be chained after a parent because it operates on a prevIoUs subject
• 中文：子命令需要链接到父命令之后，因为他需要作用于上一个对象
• 通俗理解：需要找到元素才能对元素执行某些命令【针对元素的操作】
• 重点：很多命令都需要通过元素去调用的，所以需要先定位到元素，才能调用那些命令，否则元素都没有，怎么操作元素呢

.contains()

该方法可用来获取包含指定文本的 DOM 元素

两种语法格式

.contains(content)
.contains(selector,content)

实际栗子-测试文件代码

测试代码

重点：只会返回第一个匹配到的元素

结尾

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

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

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

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系列（11）- Cypress 编写和组织测试用例篇 之 动态生成测试用例

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

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

前言

• 自动化测试中，数据驱动是很重要的一个点
• 实际项目中，肯定会出现这种情况：多条测试用例的执行步骤，断言步骤完全一致，只有输入和输出数据不一样
• 这个时候依靠数据驱动（数据参数化）来解决这个问题可以提升我们的测试效率
• 在 Cypress，可以通过数据来动态生成测试用例，以达到数据驱动的效果

动态生成测试用例的步骤

前提

这边用的还是 Cypress 提供的被测应用哦

# 进入被测应用的目录
cd C:\Users\user\Desktop\py\cypress-example-recipes\examples\logging-in__html-web-forms

# 启动本地服务
npm start

启动成功后，cmd窗口将显示服务器的地址和端口

创建一个数据文件

在 Cypress安装目录/cypress/integration 文件夹下，创建一个子目录 datas ，在该目录下创建一个 testLogin.data.js 文件，代码如下

export const testLoginUser = [

    {
        summary: "登录成功",username:"jane.lane"
    },{
        summary: "登录失败"文件
在 integration 文件夹下创建一个 testLogin.js 文件，代码如下

 
运行测试文件
进入 Cypress 安装文件夹，cmd执行命令

yarn cypress:open

 
单击 testLogin.js，Cypress 会启动 Test  Runner 运行测试，运行成功后，将看到运行结果页面
测试结果

可以看到第一条用例是测试通过，第二条用例是执行失败了（因为账号密码是错的，失败理所当然）
 
总结

根据测试数据动态生成测试用例，是一种数据驱动的做法
可以提升我们的测试效率，当我们测试数据本身改变时，无须更改测试代码，只要改测试数据文件

 

// 重试，直至找到3个匹配的<li.selected>
cy.get('li.selected').should('have.length',3)

 重试，直至这个input不再有disabled的class
cy.get('form').find('input').should('not.hava.class','disabled')

 重试，直至这个textarea的值为 poloyy
cy.get('textarea').should('have.value','poloyy')

 重试，直至这个span不再包含'click me'
cy.get('a').parent('span.help').should('not.contain','click me')

 重试，直至button可见
cy.get('button').should('be.visible')

 重试，直至 id=loading 元素不再存在
cy.get('#loading').should('not.exist')

 重试，直至radio状态是checked
cy.get(':radio').should('be.checked')

 重试，直至complete这个类有匹配的css为止
cy.get('.completed').should('have.css','text-decoration','line-through')

<div class="main-abc123 heading-xyz987">Introduction</div>