快速上手Cypress自动化测试

1.软件安装

Cypress安装：

npm install cypress --save-dev
或者
yarn add cypress --dev
全局安装
npm install -g cypress

2.初始化

• 去到项目的目录/cypress-test
• 打开vscode
• 在terminal下执行：cypress open，就可以打开cypress 客户端。
• 点击select manually，就可以在项目的目录下生成了cypress的目录了。
• OK，安装和初始化这两步已经安装完成了，接下来就可以开始test了

初始化页面

• 生成的目录

- cypress // cypress目录
---- fixtures 测试数据配置文件，可以使用fixture方法读取
---- integration 测试脚本文件
---- plugin 插件文件
---- support 支持文件
- cypress.json // cypress全局配置文件
- package.json //这个要自己创建

3.执行例子

3.1 访问百度页面
3.2 查找DOM进行交互，例如输入，点击，选择之类
3.3 进行断言

/// <reference types="Cypress" />
describe("baidu测试",()=>{
    beforeEach(()=>{
        cy.visit("http://www.baidu.com")
    })
    it("输入查询cypress",()=>{
        cy.get("#kw")
          .type("cypress")
        cy.get("#su")
          .click()
        cy.get('body').should('contain', 'cypress')
    })
})

执行结果

4.生成测试报告

• 在项目目录下，执行npm install mocha mochawesome，安装完成就可以在package.json下看到依赖包
• 打开cypress.json，添加生成报告的命令

{
    "reporter": "mochawesome",
    "reporterOptions": {
    "reportDir": "cypresse/results",
    "overwrite": false,
    "html": true,
    "json": true
    }
}

• 执行cypress run，就可以生成所有测试用例的报告了
  https://docs.cypress.io/zh-cn/guides/tooling/reporters.html#Report-per-spec