前端自动化测试工具 Cypress 试用调研记录

目录

前言

环境准备

1.工具：vs code；环境：node.js。

2.安装 cypress

3.安装插件：

4.配置：

5.启动命令：

helloworld：

第一个用例

元素定位方式

使用 request 请求进行登录

提取登录方法为公共方法

命令行执行所有用例

解决 chrome 下的跨域问题：

生成 Junit-allure 报表

生成 mocha awsome 报告

总结

---

前言

前端自动化测试是现代Web开发中不可或缺的一环，它可以帮助开发团队提高代码质量、减少错误，并确保应用程序的稳定性和可靠性。Cypress是一个流行的前端自动化测试工具，它提供了简单易用的API和功能，使开发人员能够轻松编写和执行自动化测试。

前段时间在论坛看到 cypress 的介绍，正好想了解一下前端测试框架，所以使用和调研了一下。以下是相关记录。
参考官网： JavaScript Component Testing and E2E Testing Framework | Cypress

环境准备

1.工具：vs code；环境：node.js。

按网上教程安装即可。

2.安装 cypress

cd /your/project/path
npm install cypress --save-dev

3.安装插件：

npm install eslint-plugin-cypress --save-dev
npm install --save-dev eslint-plugin-chai-friendly

4.配置：

在根目录下创建 package.json:

{
  "scripts": {
    "cypress:open": "cypress open"
  },
  "devDependencies": {
    "eslint-plugin-chai-friendly": "^0.4.1",
    "eslint-plugin-cypress": "^2.2.1"
  }
}

在 // my-project/cypress/ 目录下创建 .eslintrc.json:

{
    "plugins": [
      "cypress",
      "chai-friendly"
    ],
    "rules": {
      "no-unused-expressions": 0,
      "chai-friendly/no-unused-expressions": 2
    },
    "env": {
      "cypress/globals": true
    },

        "extends": [
          "plugin:cypress/recommended"
        ]

  }

5.启动命令：

npm run cypress:open

helloworld：

your-project/cypress/intgration 目录下新建 sample-spec.js

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

在 cypress 窗口点击当前用例执行：