Cypress系列3- Cypress 的初次体验

分类：Cypress作者：小菠萝测试笔记

如果想从头学起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

 

前言

这里的栗子项目是 Cypress 提供的，在 github 上，所以要 clone 到本地的话需要装 Git 哦！

 

下载被测应用

进入要安装该应用的目录，cmd 敲

git clone git@github.com:cypress-io/cypress-example-recipes.git

进入项目目录下，安装项目所需依赖包，敲

npm install

安装成功后，项目的文件结构如下图；所有被测应用栗子都在 examples 文件夹中

 

启动被测应用

启动测试应用时，可以进入不同子项目文件夹来启动不同的应用；

假如，我们要测试表单类型的登录，可以打开以下被测应用

cd examples\logging-in__html-web-forms>

 

启动本地server

npm start

 

启动成功后，cmd窗口将显示服务器的地址和端口

 

打开浏览器访问：http://localhost:7077/，即可看到登录页面

 

快速测试登录页面

首先，设计测试用例步骤

  1. 访问http://localhost:7077
  2. 输入用户名、密码，点击登录
  3. 如果用户名和密码正确，则登录成功，否则登录失败

 

接下来，我们来看看实现测试用例的步骤

 

创建测试

在此目录下 cypress安装路径\cypress\integration ，创建一个 js 文件，比如：testLogin.js

integration文件夹

  • Cypress 安装完毕后自动生成的文件夹
  • 也是 Cypress 默认存放测试用例的根目录，任何创建在此目录下的文件都将被当作测试用例

 

编写测试用例

首先，要在网页上定位到用户名、密码输入框，此案例中使用标签+属性名来定位；最终测试代码如下

咱们在后面再讲解代码的意思哦

 

运行测试

进入 Cypress 安装文件夹，cmd执行命令

yarn cypress:open

 

单击 testLogin.js，Cypress 会启动 Test  Runner 运行测试，运行成功后，将看到运行结果页面；运行时长是真的快....

 

调试测试用例

前言

  • 测试用例运行时，难免会发生各种情况导致运行失败；快速定位发生错误的位置，了解错误信息，一直是自动化测试的痛点
  • 而 Cypress 提供了多种 debug 能力，可以在测试运行错误时直达错误位置，并支持回放错误发生时的上下文信息，可直接看到测试失败的原因 

 

Cypress Debug 能力介绍

每个命令均有快照且支持回放

像下图，左侧就是测试步骤，右侧是测试页面

  • 鼠标 hover 测试步骤，在右侧可以看到执行该命令时的页面效果
  • 鼠标点击测试步骤，可以锁定该步骤，然后查看上下文信息

 

支持查看测试运行时发生的特殊页面事件

包括：

  • 网络 XHR 请求
  • URL 哈希更改
  • 页面加载
  • 表单提交

例如，上面测试用例中，点击【submit】后产生的就是提交表单的请求，看下图

可以看到一个 submit 操作，分成了三步走

  1. form sub：提交表单
  2. page load：页面加载
  3. new url：访问新的页面

 

Console 输出每个命令的详细信息

浏览器F12即可见到熟悉的开发者工具页面了

以上图为栗子，一个 submitting form 表单提交的请求，在 Console 中打印了详细的信息，可以快速了解在运行时的详细状态信息

 

暂停测试并逐步运行、恢复执行

在调试测试代码时，Cypress 提供了两个命令来暂停测试运行

  1. cy.pause()
  2. cy.debug()

 

cy.pause() 的栗子

在表单提交之前暂停测试，我们来看看运行结果

左上角有两个按钮，从左往右分别是

  • Resume：继续执行测试用例并运行到结束
  • Next:get：测试会变成逐步运行，点一下执行下一个命令

 

cy.debug() 的栗子

运行测试看看下图结果

测试运行在找到表单的时候，暂停运行并等待用户操作

顶部的Paused in debugger，右边两个按钮分别是
  • Resume Script Execution（F8）：继续执行测试用例并运行到结束
  • Step Over next function call（F10）：跳转到下一个调用debug()函数的地方 

 

当找到隐藏或多个元素时，可视化结果

更改 username 输入框的定位器，使他匹配到不止一个元素

运行测试看看下面结果

因为定位表达式匹配到不止一个元素，所以执行 type() 方法时以失败告终

 

总结

这一节咱们以测试一个登录界面为需求，写了一个简单的测试用例来做栗子，后面将详细讲解 Cypress 的各部分内容哦

 

原文地址：https://www.cnblogs.com/poloyy

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Cypress自动化测试系列之三
本文技术难度★★★，如果前编内容顺利执行，请继续。如果Selenium尚无法灵活运用的读者，本文可能难度较大。“理论联系实惠，密切联系领导，表扬和自我表扬”——我就是老司机，曾经写文章教各位怎么打拼职场的老司机。不记得没关系，只需要知道：有这么一位IT老司机，穿上西装，带大家打拼职场！
Cypress系列2- Cypress 框架的详细介绍
如果想从头学起Cypress，可以看下面的系列文章哦https://www.cnblogs.com/poloyy/category/1768839.html Cypress简介基于JavaScript的前端测试工具，可以对浏览器中运行的任何内容进行快速、简单、可靠的测试Cypress是自集成的，提供了一套完整的端到端测试，无须借助其他外部
新型端到端自动化框架cypress 安装
web技术已经进化了，web的测试技术最终还是跟上了脚步，新一代的web自动化技术出现了？Cypress可以对在浏览器中运行的任何东西进行快速、简单和可靠的测试。“Thewebhasevolved.Finally,testinghastoo.Fast,easyandreliabletestingforanythingthatrunsinabrowser.”
撩测试MM神器cypress使用入门
不很久不很久以前据说某家公司有两位前端，天天撸bug，为啥嘞？只怪测试MM倾人国，轻语哥哥有bug。✧(๑•̀ㅂ•́)و✧可是最近两位有点犯愁Σ(っ°Д°;)っ。测试MM有几次提了紧急bug，都在旁边鼓励他们改bug了，可是线上bug重现排查比较麻烦，而且改了后还发现没改好，惹得测试MM潸然泪
javascript – 如何在赛普拉斯中访问baseURL的值
我刚开始学习JavaScript并且一直在使用赛普拉斯来自动化一些回归测试.我当前编写的测试旨在验证链接的文本和页眉和页脚中的href.我遇到的问题是这些测试需要在各种环境中运行,我似乎无法访问cypress.json中设置的baseUrl属性,以便在我的断言中设置域.在后面的脚本中,它是行cy.ge
cypress 在pycharm中编写
cypress在pycharm中编写首先打开pycharm，打开cypress项目 打开此文件  打开后需要在pycharm中设置js语言  设置成功后在intergration文件夹下，创建用例文件夹demo1,创建test.js文件编写代码：  此段代码为进入百度页面，输入Jaredhan，点击搜索后等待1000ms 1、des
Cypress web自动化17-fixture加载json文件数据
前言面试时间经常被问到：你的测试数据放哪？有没有做到测试数据和代码的分类？Cypress使用cypress/fixture目录存放json文件数据，cy.fixture()加载测试数据。官方文档参考https://docs.cypress.io/api/commands/fixture.html#Syntaxfixture使用在cypress/fixture目录写个
Cypress：操作iframe中的元素
示例代码如下：比如现在要点击"loginFrame"中的"J_Quick2Static"按钮cy.get('#loginFrame',{timeout:2000}).then($iframe=>{cy.wrap($iframe.contents().find("#J_Quick2Static"));})
Cypress学习15-Hooks使用方法
前言Cypress提供了hooks函数，方便我们在组织测试用例的时候，设置用例的前置操作和后置清理。类似于python的unittest里面的setUp和setUpclass功能HooksCypress提供了hooks函数。这些有助于设置要在一组测试之前或每个测试之前运行的条件。它们也有助于在一组测试
Cypress web自动化20-跨域问题-a标签超链接
前言cypress上默认访问一个跨域的网页会出现异常：CypressdetectedacrossoriginerrorhappenedonpageloadAcrossoriginerrorhappenswhenyourapplicationnavigatestoanewURLwhichdoesnotmatchtheoriginpolicyabove.之前使用selenium的时候，不用关
Cypress学习12-父子元素定位
前言先定位父元素，通过父元素定位子元素.children()通过父元素，定位子元素<olclass="traversal-breadcrumbbreadcrumb"><li><ahref="#">Home</a></li><li><ahref="#">Library</a></l
[Cypress] install, configure, and script Cypress for JavaScript web applications -- part4
LoadDatafromTestFixturesinCypressWhencreatingintegrationtestswithCypress,we’lloftenwanttostubnetworkrequeststhatrespondwithlargedatasets.Allofthismockdatacanleadtotestcodethatishardtoread.Inthislesson,we’llseeh
javascript – 赛普拉斯：对同一路线的Stub响应有三种不同的响应
我在应用程序中有一个端点.我们在每个请求中使用params中的不同操作来达到相同的api.网址/application/api样本请求有效负载1：{"action":"CARD_TRANSACTION_HISTORY","data":{"date_from":"2018-12-01","date_to":"2018-12-31","
Cypress系列18- 可操作类型的命令 之 点击命令
如果想从头学起Cypress，可以看下面的系列文章哦https://www.cnblogs.com/poloyy/category/1768839.html 前言啥是可操作类型？就是可以和DOM元素交互的命令，比如：点击，双击.....等等等这些命令模拟用户和应用程序交互，Cypress会触发浏览器事件，进而触发应用程序绑定的时间这一
Cypress系列6- Cypress 的重试机制
如果想从头学起Cypress，可以看下面的系列文章哦https://www.cnblogs.com/poloyy/category/1768839.html 前言重试（Retry-ability）是Cypress的核心概念之一，有助于我们写出更加健壮的测试 命令和断言Cypress测试中经常被调用的两种类型，仍以前面说到的 testLogin.js 为栗
Cypress web自动化29-失败截图以及录制视频
前言做web自动化的时候，我们希望用例失败了能截图，这是之前用selenium写ui自动化用例的时候经常遇到的问题。cypress可以说是业界良心了，不仅帮我们失败的时候自动截图保存下来，还把每个用例都录制成了mp4的小视频，方便追踪问题的时候回复视频screenshots失败截图当我们用
前端自动化测试框Cypress入门
一：Cypress简介随便着Web应用项目的不断发展，测试也要不断发展，Cypress是为现代网络打造的，基于JavaScript语言的一种前端自动化测试工具，测试也是如此，对浏览器中运行的所有内容进行快速，轻松和可靠的测试。Cypress是自集成的，它提供了一套完整的端到端的测试体验，正如官网上所说：安装C
cypress 从文件中读取数据 fixture
1、fixture路径下创建.json文件夹，内容如下{"loginName":"huahua","password":"huahua"}  2、加载loginEmgs文件（后缀可省略），使用then读取数据before(()=>{cy.fixtures('loginEmgs').then((data)=>{this.data=data;})}) 3、使用数据cy.
动手开发第一个 Cypress 测试应用
命令行安装Cypress：npminstallcypress--save-devnpminit编辑package.json，添加如下的json语句："scripts":{"open":"cypressopen"},然后执行命令npmrunopen,即可打开Cypresstestrunner：默认看到的examples文件夹里有很多现成的例子：我们在int
Cypress系列65- 测试运行失败自动重试
如果想从头学起Cypress，可以看下面的系列文章哦https://www.cnblogs.com/poloyy/category/1768839.html 重试的介绍学习前的三问什么是重试测试为什么重试很重要如何使用重试 为什么要重试使用Cypress进行自动化测试时，仍然会存在一些难以验证的行为，并使得测试变得
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot