专栏首页搜狗测试Cypress实践记录

Cypress实践记录

背景:

前一段时间,在前端开发同学的推荐下,了解到一个前端自动化测试工具Cypress,趁着这个机会,将自己的调研记录以及在项目上的实践进行总结。如果想了解更多的小伙伴,可以去cypress官网:https://www.cypress.io/ 了解更多的内容。

环境准备:

1. 工具:vs code

下载地址:https://code.visualstudio.com/

配置中文插件:

ctrl shift + p 后输入 Configure Display Language

点击Insatall additional languages...

在搜索框输入chinese后点击对应的istall后启用即可

2. 环境:node.js

下载地址:https://nodejs.org/en/

包管理工具yarn:https://yarn.bootcss.com/

3. 安装cypress以及配置

在vscode中打开你的项目,在终端中输入指令后,等待安装完成:

npm install cypress --save-dev

继续安装插件:

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

安装完插件之后进行配置:

1. 在项目根目录下创建2个文件:package.json和.eslintrc.json,配置以chrome浏览器运行用例.

这里需要注意版本为你上面安装插件后的版本:

4. 启动cypress服务

npm run cypress:open

启动之后会弹出一个弹窗,首次启动后,cypress会自动生成integration文件夹,里面是一些case,下面这个弹窗中的case就是该文件夹下examples下的case:

5. 运行case

点击弹窗内的任意一个自动生成的case,我们会看到再弹出一个弹窗,进行case的执行:

6. 编写测试用例

接下来我们自己编写一个很简单的用例,来看一下效果:

case:访问搜狗搜索网页并验证title是否正确

编写完成后,保存。然后在终端输入启动cypress服务命令,稍等就会开始运行case:

Cypress有个小优点就是当你改完case后保存,会自动执行case,不需要再次run,这样可以节省调试case的时间,同时,在运行结果的的左边是每一步的记录,鼠标移动到哪一步,就会展示当时的那个页面而不是截图也就是Cypress的特殊的snapshot 功能:

在运行完case后,我们可以去cypress\screenshots中查看截图。

下面是我在项目中的运用,在将Cypress引到前端项目中还是遇到不少问题,先在这里先让大家看下成果,下次分享再具体的将实施步骤以及遇到的问题总结出来:

case:

运行结果:

Cypress的各种方法的使用以及划分还需要感兴趣的小伙伴自己去实践,同时也预祝大家元旦快乐~~我们下期见~~~

本文分享自微信公众号 - 搜狗测试(SogouQA),作者:klzzz

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 判定表case的自动化用例设计

    大家好,小编今天和大家分享一个自己编写的自动化测试工具,主要解决的问题是如何遍历测试用例中“判定表”方法设计出来的case。

    用户5521279
  • Dubbo测试的那点事儿

    dubbo是阿里开源的一个远程服务调用(Remote Procedure Call,即RPC)的分布式服务框架,符合典型的生产者消费者模型。

    用户5521279
  • 用Python进行gRPC接口测试(三)

    在近期的测试中,小编又遇到了一些关于grpc接口的测试,踩了一些坑,也总结了一些经验,想与大家分享交流一下。本期我们主要来谈谈有关protobuf中一些特殊数据...

    用户5521279
  • [PHP] 重回基础(Array相关函数)

    使用函数array_map(),使每个元素都调用一下自定义函数,参数:String类型函数名称,数组

    陶士涵
  • 教你Lightroom修“猴”图,附完整修图视频

    这是我上周在香港麦理浩径,用50mm定焦头拍到的一只猴子, 然后用Lightroom处理了一下, 感觉还不错, 于是录了一段修图视频,挂到了B站上~

    zhaoolee
  • 益思维-早期苹果员工胸牌背面写的11条“成功法则”

    早期苹果员工胸牌背面写的11条“成功法则”这个胸牌的背面写着11条成功法则,其中每一条文字都充满了正能量。从中我们可以看到一些触动人心的感觉。

    進无尽
  • 搜狗赴美上市:首日涨3.8%,王小川哽咽感谢母亲

    千平 发自 凹非寺 量子位 出品 | 公众号 QbitAI ? 搜狗和王小川终于完成上市这件事。 关于目前的搜狗和王小川,量子位在之前的报道里,已经有过较为详细...

    量子位
  • 教你自建云盘存储PDF书籍支持在线预览和下载!

    在技术学习的路上经常与同好交流心得,时而分享一些技术的PDF书籍。但也经常发现即使是一些可以开源的书籍,分享出来的链接也常常遇到链接失效问题。

    小傅哥
  • Linux 命令之 crontab 定时计划

    crontab命令用于设置周期性被执行的指令。该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和执行

    胡齐
  • 解决腾讯云CDN跨域问题,has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’…

    今天弄了一下腾讯云的内容分发(CDN),就是将网站的静态文件上传到腾讯云的对象存储里,然后配置CDN,域名绑定。静态文件都能访问(如果不能访问,请检查是否是黑白...

    赵帆同学GXUZF.COM

扫码关注云+社区

领取腾讯云代金券