说起Cypress,读者朋友们应该对“下一代Web端自动化测试技术”,“弯道超车首选”等等早已烂熟于心了。Cypress独特的运行机制(运行在浏览器内)也使得它吊打Webdriver之类的UI自动化测试工具。但是Cypress并不是完美无瑕,我们在使用Cypress做自动化测试时,经常会提的一个问题就是,Cypress不支持跨域访问,而我的测试需要跨域怎么办?
PageObject(页面对象)模式是自动化测试中的一个最佳实践,相信很多小伙伴都知道的
https://www.cnblogs.com/poloyy/category/1768839.html
Cypress提供了一个很好的测试运行器, 它为你提供了一套可视化结构的测试和断言套件, 很快你也会看到命令, 页面事件, 网络请求等. 当你还没熟练掌握元素定位时,在运行器界面点开探测器,会自动帮我们定位好元素,甚至写好部分代码。
cypress 不仅可以用浏览器访问web页面,也可以直接发 request 请求访问接口。 在实际工作中,很多时候都需要先登录,如果只是写登录页面的案例,可以直接在web页面操作。 如果是写其他页面的案例,需要依赖登录,这时候应该是不需要再次重复打开页面去登录,正确的做法是在用例跑之前写个前置,发登录的请求,保存cookie,让页面保持登录状态。
注意:仅在 Cypress.Commands.add() 中支持使用options,而在 Cypress.Commands.overwrite() 中不支持使用options
在cypress的项目目录下,在integration文件夹下创建一个first_test_demo.js文件,写入如下内容:
首先在工程的Cypress路径下新建一个pages目录,然后在该目录下新建一个JS文件,并命名为login.js
在简单看了cypress 官方文档后,就开始用上了,越用感觉越爽。 顺便提一句,官方文档太良心了,方方面面都讲到了,而且还有视频,可以切换语言。 下面就讲讲如何使用cypress搭建一个自动化框架。当然我还是初学者,市面上也没有太多的资料,都是入门级的,官方文档也只给你渔,不会提供鱼,自己折腾出来的,感觉像那么回事。
在2017年第17期和2018年19期技术雷达中,分别出现了两个新的工具——cypress,testcafe,之前只接触过webdriver框架的同学可能会有些陌生。而cypress已经在最新一期的技术雷达中进入了评估阶段,并在多个项目得到了应用,总体反馈利大于弊。
自从Cypress出现后,市面上Web端自动化测试框架就只剩下了两个: 一个是吊打一切的Cypress, 另一个是其它。虽然Cypress这么优秀,但它也有一些妥协和倔强,其中就包括这么一条:
今天是你不知道的Cypress系列(11) -- 使用cy.session()加速鉴权。
测试一个web网站的时候,通常需要先登录。要是每个脚本都写一次登录流程,太麻烦了,于是我们会想到写一个公共函数,这样每次去调用函数即可。 cypress 里面提供了一个 commands.js 可以自定义命令,如使用cy.login(user,password)就能调用了
自动化测试是一种测试方法,是指使用特定的软件,去控制测试流程,并比较实际结果与预期结果之间的差异。通过将测试自动化,可以把人对软件的测试行为转化为由机器自动执行测试的行为,从而替代大量的手工测试操作,使得测试可以快速,反复的进行。
cypress 上默认访问一个跨域的网页会出现异常: Cypress detected a cross origin error happened on page load A cross origin error happens when your application navigates to a new URL which does not match the origin policy above. 之前使用 selenium 的时候,不用关心这种问题,a标签点击后会跳转到另外一个web页面,正常使用。 cypress上对web的安全性上考虑的更严格,对于跨域的链接会认为是不安全的,相关的资料查阅https://docs.cypress.io/guides/guides/web-security.html。
在 jest 单元测试中使用快照、API-mock 和 DOM 样式状态断言已经能够实现基础的 UI 测试,但是单元测试属于白盒测试,更关注数据的流动,而端到端测试(End To End Test)属于黑盒测试,更关注操作结果的展示,因此测试效果自然不同。端到端测试更贴近真实用户操作,页面运行在真实的浏览器环境中,因此端到端测试是从用户角度出发的测试。
在这一节中,我们将学习如何使用不同的测试方法来测试我们的应用程序。这将使我们有信心对应用程序进行重构、构建新功能和修改现有功能,而不用担心破坏当前的应用程序行为。
Cypress 默认每个用例开始之前会清空所有的cookies,保证每个用例的独立性和干净的环境。 但是我们希望在一个js文件下写多个测试用例的时候,希望只调用一次登录, 记住cookies,后面的用例都默认是登录状态,这样测试的效率高一些。 实现cookies共享有2种实现方式
1)安装node.js(https://nodejs.org/en/download/),根据版本选择32位或64位。
在写脚本的过程中,有时候会遇到一些问题需要慢慢调试找出原因,Cypress 提供了调试的方法,方便我们快速定位到问题
自从我的新书<前端自动化测试框架 -- Cypress从入门到精通>上市以来,这本书受到了大量同学热情的追捧和讨论。在跟同学们的交流中,我也了解到, 原来除了国外优秀的公司(例如Adobe, 迪士尼,AutoDesk等等), 国内也有很多公司在尝试使用Cypress提升测试效率。而在Cypress中国群内、在公众号iTesting里,我每天都能看到大量关于Cypress的使用讨论和私下问询。这让我感到无比荣幸。(买了书的同学们,公众号回复你的微信号,拉你到Cypress中国群)。
近期接触了Cypress和TestCafe,两个测试框架都基于Node.js,都不再使用Selenium+WebDriver,而且开箱即用,非常轻量级,就凭不再使用WebDriver这一点,极大地勾起了我的好奇心。所以今天就来初略的学习一下,并以学习笔记成此文。
这篇是根据 cypress 官方文档 copy 过来的,关于自动化测试对登录场景的处理的思考,写的挺好的。 官方文档地址https://docs.cypress.io/guides/getting-started/testing-your-app.html#Logging-in 登录是我们遇到的第一个自动化用例场景,当然登录也是最难的场景之一。
Cypress项目中官方写了很多demo,我们可以拿来做测试案例的。地址:https://github.com/cypress-io/cypress-example-recipes
cypress 我们直接去Cypress的官网,根据教程我们先进入我们项目的根目录,执行npm install cypress --save-dev,在安装完成之后是没有任何的动静的,除了我们的package.json中会多一个版本号的记录,在这里我们根据指引在控制台中输入node_modules/.bin/cypress open这一条命令主要是让我们进入这个目录后去执行cypress的一个可执行文件,在等待片刻后页面上会弹出一个熟悉的控制台,在控制台中会有一个Alert,我们点击按钮got it 就可以看到我们项目的根目录中生成了一个cypress.json文件和一个Cpress的文件夹,在文件夹的intergration中会有一些默认写好的spec,这些用例是框架在找不到指定路径时就会默认生成这么一个目录去提供整体结构的示例的,在cypress\integration 文件夹下写测试用例,可根据情况分文件夹存放 然后我们在cypress.json中填入我们需要修改的信息
iframe 是一种常见的 web 页面上遇到的场景,像有些网站的登录就是放到 iframe 里面的。 cypress 如何处理 iframe 上的元素呢,cypress 目前没有提供类似 selenium 上的 switch_to.frame 这种直接切换的方法,得自己封装一个操作方法。
今天是你不知道的Cypress系列(4) -- “PO”已死,App Action当立?
面试时间经常被问到:你的测试数据放哪?有没有做到测试数据和代码的分离? Cypress 使用cypress/fixture 目录存放 json 文件数据, cy.fixture() 加载测试数据。 官方文档参考https://docs.cypress.io/api/commands/fixture.html#Syntax
领取专属 10元无门槛券
手把手带您无忧上云