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

开始使用

1. 建立一个sample_spec.js文件.
2. 查看 Cypress 更新咱们的spec文件列表.
3. 登陆 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的提示。

编写一个简单的测试

1. 编写第一个经过的测试.
2. 编写第一个失败的测试.
3. 关注 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所依赖库的一部分。

写一个实际的测试用例

一般测试都分三个阶段:

1. 设置应用的状态.
2. 作一些动做.
3. 断言当前应用的状态.

通俗来讲就是咱们设置应用的一个初识状态，而后咱们作一些操做来改变这个状态值，而后再来判断结果是否是跟咱们预期的同样。

接下来咱们根据如下几个步骤，经过Cypress来逐步实现：

1. 访问一个网页。
2. 查找网页上的一个元素。
3. 对这个元素进行操做。
4. 断言页面的内容。

第 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 打开的浏览器左侧看到。以上只是一些简单的使用。须要进行深刻了解的话查阅官方文档