『初体验』vue 项目 端对端（e2e）自动化测试框架 cypress 初体验_cypress vue

介绍

1.Cypress是为现代网络打造的下一代前端测试工具。
2.解决了开发人员和QA工程师在测试现代应用程序时面临的关键难点问题。

使用cypress可进行自动化测试，从而大大减少项目人力成本。

界面

安装

1.安装node、npm环境 （新版node内置npm）

2.新建项目文件夹，并初始化npm环境

可用vscode直接编程，打开文件夹，并输入命令初始化npm包管理环境：

npm init -y
1

3.安装cypress

在命令行中输入以下命令安装cypress包：

npm install cypress -S
1

4.启动cypress

在命令行中输入以下命令启动cypress：

npx cypress open
1

(npm高于v5.2的版本中自带npx, 或者你也可以单独安装npx.)

启动后会自动生成文件目录。

（在integration目录下含有cypress官方示例，可直接启动查看）

5.官方示例初体验

启动后，直接点击其中一个官方示例进入自动化测试。

完成自动化测试后，我们可以查看每个节点页面的状态，如下图所示：

6.第一个测试用例

在integration目录下，新建一个后缀为**.spec.js**的文件，并编写测试以下代码：

context('demo',()=>{
    it('百度',()=>{
        cy.visit('http://www.baidu.com')
    })
})
1
2
3
4
5

（效果为：访问http://www.baidu.com）

直接保存代码，在浏览端就会自动获取文件：

运行效果如下图所示：
（cypress具有热更新功能，保存代码会自动重新加载测试用例）

7.深入编写cypress测试用例

编程思维：
通过元素查找，找到对应的元素，对元素进行相应的操作，可模拟人为输入值、点击按钮等等操作。

更多相关操作可查看：【Cypress - 元素查找及其操作】

8.推荐cypress相关学习博客

• [Cypress官方中文文档]
• [Cypress系列—小菠萝测试笔记]