Cypress 10.x 组件测试指南
共 5842字,需浏览 12分钟
·
2023-05-23 18:14
一个人到底要走多少弯路,才能成为一名合格的测试开发工程师?
Cypress又又又更新啦!我将讲解如何使用Cypress进行组件测试。 (买了书的同学们,公众号回复你的微信号,拉你到Cypress中国群)。
最近两年测试界最火的测试工具莫过于Cypress,作为测试工程师弯道超车必备、下一代UI自动化测试利器,Cypress开发团队也一直在拼命做事,这不,Cypress10.x重磅发布,将“Component Testing”重磅引入到了测试团队。测试人员又可以将自己的势力版图向开发侧移动一下啦 :)
什么是组件测试
组件测试(也叫模块测试),关注可单独测试的组件。
组件测试允许单独测试一个组件,这在关注特定组件的功能时很重要,
组件测试和端到端测试之间的区别在于:
端到端通常测试整个应用程序,组件测试则侧重于特定组件的功能。
在 Cypress 中,通过调用 cy.visit() 对 URL 进行端到端测试,通过调用 cy.mount() 进行组件测试。
组件测试依赖
写组件测试需要一些前端框架支持,当前Cypress支持的框架如下:
编写组件测试
当你第一次选择组件测试这个类型时,Cypress会自动为你创建相关配置。接上两篇文章介绍,我们在项目根目录下运行:
yarn debu
然后,在选择测试类型的时候,选择Component Testing:
然后,Cypress会让你选择一个框架类型:
我们选个Create React APP,当然你也可以选择列表中的其他选项。
选好后,点击Next,你会看到下面这个图:
根据图中提示,在目录下,执行上图命令行命令。安装成功后,你会看到如下界面:
点击”Continue“,
你会看到一些配置,点击”Continue“,最终你会看到这个界面。
然后选择你要运行的浏览器,点击”Start Component Testing in Chrome“,
选择Create your first spec,
点击Create Spec,然后你会看到下图,
点击”OK“, 然后你会看到如下页面
修复这个错误,安装react-dom
yarn add react-dom
然后,你就能看到测试用例创建成功了。
同时,你检查项目文件夹,你会发现文件已经创建到了cypress/component下了。
运行测试用例
测试用例的运行基本不变,你可以直接:
npx cypress run
但是你也知道我不推荐。我们去更改项目根目录下的package.json文件。给它添加下如下scripts部分。最后,你的package.json看起来像这样:
然后你就可以在命令行里如此运行:
yarn debug
然后,你就可以愉快的编写执行Cyprss用例了。
两个难点
1. 做 Compon ent Test的前提是你对前端代码库有访问权限,否则一切都是白谈。 2. 你的Cypress框架要和你的Web端代码放在一个代码库下,这样你mount起来才方便。这个就是另外一个困难。 由于这两个原因,加上开发人员也无意放手组件测试, 所以大部分情况下测试人员都不会执行 Compon ent Test 这个测试类型。一个真实用例
假设你在你的组织有一定发言权,搞定了以上两件事,我们来看看Cypress能带给我们什么惊喜。首先,要做组件测试,我们得有一个Web APP。你需要创建一个Web App。Cypress支持几种框架,我们使用create-react-app来快速创建一个Web App。
npx create-react-app my-ap
然后,你的项目文件夹会变成这个样:
my-app就是我们刚刚创建好的一个react web app。
然后我们把这个app运行起来:
// 先到my-app文件夹下
cd my-app
// 启动
npm start
浏览器访问:http://localhost:3000/, 你将看到我们的app启动了。
此时,更改我们的component Test测试文件:
import * as React from 'react'
import App from '../../../App'
describe('ComponentName.cy.js', () => {
it('renders learn react link', () => {
cy.mount(<App />)
cy.contains(/learn react/i).should('be.visible')
})
}
然后,在项目根目录下执行运行:
yarn debug
你会发现运行失败了。查看Log得知:
”Relative imports outside of src/ are not supported“,
也就是说,我们的测试文件里,导入的相对路径超出了src文件夹,所以我们运行失败。
import App from '../../../App
知道了错误就好办了。我们去更改项目结构,变成如下这个样子:
两个要点:
-
更改项目的cypress.config.js文件,将component下的specPattern加上。这样符合这个pattern的便都是Component 测试。
-
把你的Component测试文件移到src下。跟你要测试的组件同目录。避免无法导入。
然后,你在项目根目录下,执行
yarn debug
你会发现一切正常,测试成功。
关键点
你要测试哪个组件,就把哪个组件导入进来,然后mount它。疑惑点
如果框架使用的是create-react-app,那么你在组件测试导入时,必须保证导入的路径在src下。这样就阻挡了我们正常的测试用例组织结构,我们无法把所有component 测试用例都放在component文件夹下面。略有些不方便。
Cypress有很多奇淫巧技, 我已经总结超过百篇
别走开,下一篇更精彩!
往期回看:
你不知道的Cypress系列(1) --鸡肋的BDD
你不知道的Cypress系列(2) -- ”该死"的PO模型!
你不知道的Cypress系列(3) -- 是时候重构自己的思维了!
你不知道的Cypress系列(4) -- “PO”已死,App Action当立?
你不知道的Cypress系列(5) -- "眼瞎"的TestRunner
你不知道的Cypress系列(6) -- 多Tab的小秘密
你不知道的Cypress系列(7) -- 当iFrame遇见弹出框
你不知道的Cypress系列(8) -- “可视化”测试你知多少
你不知道的Cypress系列(9) -- 代码“自动生成”术 你不知道的Cypress系列(10) -- CypressHelper你不知道的Cypress系列(11) -- 使用cy.session()加速鉴权。
你不知道的Cypress系列(12) -- 测试报告Allure
你不知道的Cypress系列(13) -- 你真的需要多浏览器测试吗?
你不知道的Cypress系列(14) -- 一文说透元素定位
你不知道的Cypress系列(15) -- 支持跨域访问了!
为了更好的支持我创作,麻烦同学们动动小手,点赞 + 在看 + 转发一键三联。
技术讨论
公众号里直接回复 666, 带你入圈
- - 时人莫小池中水, 浅处不妨有卧龙 - -
作者:
Kevin Cai, 江湖人称蔡老师。
两性情感专家,非著名测试开发。
技术路线的坚定支持者,始终相信 Nobody can be somebody。
· 猜你喜欢的文章 ·