Cypress 自动化测试学习使用
Cypress 自动化测试学习使用
安装
mkdir cypress-start
npm install
# 进入创建的项目目录 cd /your/project/path cd cypress-start
npm install cypress --save-dev
yarn add
cd /your/project/path cd cypress-start
yarn add cypress --dev
打开运行cpress
./node_modules/.bin/cypress open
或者使用npm bin
$(npm bin)/cypress open
或者使用npx
npx cypress open
或者使用yarn
yarn run cypress open
开始使用
- 创建一个
sample_spec.js
文件. - 查看 Cypress 更新我们的spec文件列表.
- 登录 Cypress 交互模式.
在 cypress/integration 目录下创建一个新的文件
touch {your_project}/cypress/integration/sample_spec.js
一旦我们创建了这个文件,Cypress测试引擎会立马在Integration Tests列表中显示出来。Cypress会监视你的spec文件,有任何的修改和更新都会立马显示出来。
即使我们还没有写任何的测试也没有关系。点击sample_spec.js
,我们会看到Cypress会自动打开浏览器并运行测试脚本。不过此时会看到No tests found in your file:/usr/local/proj/cypress-start/cypress/integration/sample\_spec.js
的提示。
编写一个简单的测试
- 编写第一个通过的测试.
- 编写第一个失败的测试.
- 关注 Cypress 实时加载.
在sample_spec.js
文件中书写如下代码:
describe('My First Test', function() { it('Does not do much!', function() { expect(true).to.equal(true) }) })
当你保存文件之后会发现,浏览器自动重新加载了。立马就会呈现出测试的结果。
尽管我们没有做一些实际的事情,但是这个测试是通过的。
接下来让我们来编写第一个失败的测试。
describe('My First Test', function() { it('Does not do much!', function() { expect(true).to.equal(false) }) })
同样的,一旦我们保存文件,浏览器立马就会刷新并呈现出一个成功和一个失败的测试结果。
从代码语法中我们能看出来
这是Cypress所依赖库的一部分。
写一个实际的测试用例
通常测试都分三个阶段:
- 设置应用的状态.
- 做一些动作.
- 断言当前应用的状态.
通俗来说就是我们设置应用的一个初识状态,然后我们做一些操作来改变这个状态值,然后再来判断结果是不是跟我们预期的一样。
接下来我们根据以下几个步骤,通过Cypress来逐步实现:
- 访问一个网页。
- 查找网页上的一个元素。
- 对这个元素进行操作。
- 断言页面的内容。
第 1 步: 访问一个网页
cy.visit() 的使用很简单,我们以访问百度首页为例:
describe('My First Test', function() { it('Visits the baidu', function() { // cy.visit('https://example.cypress.io') cy.visit('http://www.baidu.com') }) })
保存文件之后打开Cypress Test Runner就会发现,浏览器里会自动打开百度首页。需要值得注意的是我们的测试,最好是对我们可控的网站进行测试。
第 2 步: 查询页面元素
使用contains来查找包含参数内容的元素:
describe('My First Test', function() { it('Visits the baidu', function() { cy.visit('http://www.baidu.com'); cy.contains('百度一下'); }) })
我们会发现测试通过了。如果我们把cy.contains('百度一下')
修改为cy.contains('百度一下XXX')
保存文件,就会发现等待一段时间之后提示测试失败。
第 3 步: 点击一个元素
我们在第二步已经获取到了一个元素,只需要在该元素上进行点击操作即可:
describe('My First Test', function() { it('Visits the baidu', function() { cy.visit('http://www.baidu.com'); cy.contains('百度一下').click(); }) })
由于百度首页的百度一下
按钮在输入框没有输入任何值得时候点击,页面只是会重新加载一下,没有其他的改变,所以不太好进行断言。所以我们希望在输入框中输入一些内容,然后再点击按钮,最后再进行断言。
第 4 步: 进行断言
由于百度首页的百度一下
按钮在输入框没有输入任何值得时候点击,页面只是会重新加载一下,没有其他的改变,所以不太好进行断言。所以我们希望在输入框中输入一些内容,然后再点击按钮,最后再进行断言。
describe('My First Test', function() { it('Visits the baidu', function() { cy.visit('http://www.baidu.com'); cy.get('#kw').should(($kw) => { $kw.val('cypress') }); cy.contains('百度一下').click(); cy.url().should('include', '/s?'); }) })
另外可以对输入框单独的进行断言。通过调用type方法来对获取到的输入框进行值的填充。
describe('My First Test', function() { it('Visits the baidu', function() { cy.visit('http://www.baidu.com'); cy.get('#kw') .type('cypress') .should('have.value', 'cypress'); }) })
以上就是一个简单的测试用例。
个人认为Cypress比较好的地方在于可调试性非常之好。Time travel、Snapshots、Page events、Console output这些都能够在Cypress 打开的浏览器左侧看到。以上只是一些简单的使用。需要进行深入了解的话查阅官方文档
相关推荐
4.启动命令windows:chrome --remote-debugging-port=9222启动命令mac:Google\ Chrome --remote-debugging-port=9222