『初体验』vue 项目 端对端(e2e)自动化测试框架 cypress 初体验

12 篇文章 0 订阅
8 篇文章 0 订阅

介绍

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

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

界面

在这里插入图片描述

安装

1.安装node、npm环境 (新版node内置npm)
2.新建项目文件夹,并初始化npm环境

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

npm init -y

在这里插入图片描述

3.安装cypress

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

npm install cypress -S

在这里插入图片描述

4.启动cypress

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

npx cypress open

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

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

(在integration目录下含有cypress官方示例,可直接启动查看)
在这里插入图片描述

5.官方示例初体验

启动后,直接点击其中一个官方示例进入自动化测试。
在这里插入图片描述
完成自动化测试后,我们可以查看每个节点页面的状态,如下图所示:
在这里插入图片描述

6.第一个测试用例

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

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

(效果为:访问http://www.baidu.com)
在这里插入图片描述
直接保存代码,在浏览端就会自动获取文件:
在这里插入图片描述
运行效果如下图所示:
(cypress具有热更新功能,保存代码会自动重新加载测试用例)
在这里插入图片描述

7.深入编写cypress测试用例

编程思维:
通过元素查找,找到对应的元素,对元素进行相应的操作,可模拟人为输入值、点击按钮等等操作。
在这里插入图片描述
更多相关操作可查看:【Cypress - 元素查找及其操作】

8.推荐cypress相关学习博客
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值