date: 2020-12-03
updated: 2020-12-03

前端自动化测试工具 Cypress

Cypress

一个端到端 (e2e) 的 web 自动化测试工具

安装

1
2
3

cd Crypress_project
npm init -y
npm install cypress --save-dev

修改 package.json 文件

{
  "scripts": {
    "cypress": "cypress open"
  }
}

启动

1	`npm run cypress`

第一次启动 Cypress，它已经为我们准备了丰富的例子

项目结构

cypress
├── fixtures
│   └── example.json
├── integration # 存放测试文件
│   └── examples
│       ├── actions.spec.js
│       ├── aliasing.spec.js
│       ├── assertions.spec.js
│       ├── connectors.spec.js
│       ├── cookies.spec.js
│       ├── cypress_api.spec.js
│       ├── files.spec.js
│       ├── local_storage.spec.js
│       ├── location.spec.js
│       ├── misc.spec.js
│       ├── navigation.spec.js
│       ├── network_requests.spec.js
│       ├── querying.spec.js
│       ├── spies_stubs_clocks.spec.js
│       ├── traversal.spec.js
│       ├── utilities.spec.js
│       ├── viewport.spec.js
│       ├── waiting.spec.js
│       └── window.spec.js
├── plugins # 定义一些初始化设置跟变量
│   └── index.js
└── support # 可以抽取一些公共的方法作为我们的私有命令
    ├── commands.js
    └── index.js

简单测试

在 /intgration 目录下新建 sample.spec.js

describe('simple test case for cypress',function(){
    it('Does not match!',function(){
        expect(true).to.equal(true)
    })
})

Cypress 界面中出现该测试用例，点击即可运行

尽管我们没有做一些实际的事情，但是这个测试是通过的

实际测试用例

Cypress 官方测试网站 https://example.cypress.io/commands/actions

访问百度首页并搜索 `cypress test`

describe('My First Test', function () {
    it('Does not do much!', function () {
        cy.visit("https://www.baidu.com")

        cy.get("#kw", {timeout: 2000}).type("cypress test")
       
        cy.wait(100)
       
        cy.get("#su", { timeout: 2000 }).click()
    })
})

Cypress 运行结果

Cypress 语法

记一些 Cypress 的语法，有时间再加

查找元素

如果你以前使用过 jQuery ，则可能习惯于查询以下元素

1	`$('.my-selector')`

在 Cypress 中，查询元素相同

1	`cy.get('.my-selector')`

实际上， Cypress 捆绑了 jQuery ，并公开了许多 DOM 遍历方法，因此你可以使用已经熟悉的API轻松处理复杂的HTML结构

// Each method is equivalent to its jQuery counterpart. Use what you know!
cy.get('#main-content')
  .find('.article')
  .children('img[src^="/static"]')
  .first()