3Cypress测试框架概述3.1Cypress默认文件结构 在Cypress安装完成后，其生成的默认文件目录如下所示：3.1.1Fixtures Fixture又称之为测试夹具，通常配合cy.fixture命令使用，主要用于存储测试用例的外部静态数据。其默认位置位于cypress\fixtures中，也可以根据需要配置到其他目录。Fixtures里面的静态数据通常存储在json文件中，而这部分数据通常是某个网络请求对应的响应部分，如HTTP状态码和返回值等。Fixture的应用场景通常为，当测试需要对某些外部接口进行访问并依赖于其返回值时，可以使用fixture而无需访问这些接口。3.1
4测试用例编写和组织4.1用例结构 Cypress是建立在Mocha和Chai之上，因此同时支持Chai的BDD和TDD两种风格。如果你熟悉JavaScript风格的代码，那么在Cypress中写测试用例是很容易上手的。Mocha是一款适用于Node.js和浏览器的测试框架，可使用异步测试变得简单灵活。 Cypress的测试风格继承于Mocha，提供了describe()、context()、it()、specify()四个关键字，对于一条可执行的测试而言，必须包含以下两个组成部分:describe()和context()等效，均表示一个测试套件或测试集it()和specify()等效，均
4测试用例编写和组织4.1用例结构 Cypress是建立在Mocha和Chai之上，因此同时支持Chai的BDD和TDD两种风格。如果你熟悉JavaScript风格的代码，那么在Cypress中写测试用例是很容易上手的。Mocha是一款适用于Node.js和浏览器的测试框架，可使用异步测试变得简单灵活。 Cypress的测试风格继承于Mocha，提供了describe()、context()、it()、specify()四个关键字，对于一条可执行的测试而言，必须包含以下两个组成部分:describe()和context()等效，均表示一个测试套件或测试集it()和specify()等效，均
5元素交互 元素识别和操作是UI自动化测试的基础，下面一起来学习一下在Cypress中的元素交互操作吧。5.1元素定位器选择 每一个测试用例都包含对元素的定位识别和操作等。因为一个好的测试用例，必须保证健壮和可靠的元素定位策略。在实际项目中，经常会遇到以下问题：元素ID或类是动态生成若使用CSS定位，而在实际开发过程中CSS或JS行为发生更改等 为避免出现以上失败情况，我们可以采取以下策略不建议使用基于CSS属性的定位方式，如id,class,tag不建议使用基于易发生变化的文本内容添加data-*属性，使其更加容易定位元素Cypress提供三个data-*属性，分别是data-cy、d
5元素交互 元素识别和操作是UI自动化测试的基础，下面一起来学习一下在Cypress中的元素交互操作吧。5.1元素定位器选择 每一个测试用例都包含对元素的定位识别和操作等。因为一个好的测试用例，必须保证健壮和可靠的元素定位策略。在实际项目中，经常会遇到以下问题：元素ID或类是动态生成若使用CSS定位，而在实际开发过程中CSS或JS行为发生更改等 为避免出现以上失败情况，我们可以采取以下策略不建议使用基于CSS属性的定位方式，如id,class,tag不建议使用基于易发生变化的文本内容添加data-*属性，使其更加容易定位元素Cypress提供三个data-*属性，分别是data-cy、d
12调试 Cypress的测试代码和被测试程序在同一生命周期中的浏览器中，也就是意味着，可以使用浏览器的开发者工具直接参与调试。Cypress提供了几种调试方法，分别为：debugger、debug、pause和开发者工具12.1使用debugger 我们先来看看一份代码：describe('验证测试Debugger',()=>{it('测试debugger调试',()=>{cy.visit("http://www.baidu.com/")cy.get("#kw")debugger//这里的调试不会运行});}); 以上代码并没有满足你的期望，因为Cypress的命令是异步执行，所以并不
12调试 Cypress的测试代码和被测试程序在同一生命周期中的浏览器中，也就是意味着，可以使用浏览器的开发者工具直接参与调试。Cypress提供了几种调试方法，分别为：debugger、debug、pause和开发者工具12.1使用debugger 我们先来看看一份代码：describe('验证测试Debugger',()=>{it('测试debugger调试',()=>{cy.visit("http://www.baidu.com/")cy.get("#kw")debugger//这里的调试不会运行});}); 以上代码并没有满足你的期望，因为Cypress的命令是异步执行，所以并不
13截图和录频13.1概述 Cypress允许在运行时，生成截图和录频，方便快速问题所在原因或位置。支持cypressopen、cypressrun和CI。在以cypressrun运行时，如果出现失败，会自动进行截图，并保存至默认目录：cypress\screenshots和cypress\videos。在使用cypressopen不会自动截图。通过配置screenshotOnRunFailure:false，也可以禁用在失败后自动截图。在每次执行cypressrun，会自动清除之前保存的截图，通过配置trashAssetsBeforeRuns:false，也可以禁用 如果需要在代码中自定
13截图和录频13.1概述 Cypress允许在运行时，生成截图和录频，方便快速问题所在原因或位置。支持cypressopen、cypressrun和CI。在以cypressrun运行时，如果出现失败，会自动进行截图，并保存至默认目录：cypress\screenshots和cypress\videos。在使用cypressopen不会自动截图。通过配置screenshotOnRunFailure:false，也可以禁用在失败后自动截图。在每次执行cypressrun，会自动清除之前保存的截图，通过配置trashAssetsBeforeRuns:false，也可以禁用 如果需要在代码中自定
7TestRunner7.1概述 TestRunner是Cypress非常重要一个组件，其主要作用为运行测试、更改配置、将运行的测试结果写入控制台等等。 打开CypressTestRunner的方式如下所示：npmruncypressopen或npxcypressopen 打开Cypress后，点击其中一个测试文件，运行完成测试后，截图如下所示： Cypress的TestRunner主要组成可以查看前面4.9相应的介绍。7.2常用功能 本节将介绍一下TestRunner中非常实用的功能，如下所示：7.2.1在IDE中打开文件 在测试状态菜单下面点击链接，即可使用默认的IDE打开测试
