多测师是一家拥有先进的教学理念,强大的师资团队,业内好评甚多的接口自动化测试培训机构!

17727591462

联系电话

您现在所在位置:接口自动化测试培训 > 新闻资讯

Cypress自动化测试学习使用

更新时间:2022-07-14 09:15:35 作者:多测师 浏览:45

  安装

  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

Cypress自动化测试学习使用

  开始使用

  创建一个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)

  })

  })

  同样的,一旦我们保存文件,浏览器立马就会刷新并呈现出一个成功和一个失败的测试结果。

  从代码语法中我们能看出来

  describe和it来自Mocha

  expect来自Chai

  这是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自动化测试学习使用,本文由多测师亲自撰写,希望对大家有所帮助。了解更多自动化测试相关知识:https://www.aichudan.com/xwzx/

联系电话

17727591462

返回顶部