网站秒收录怎么做的,品牌营销与推广,哪些专业能建网站,做企业网站的公司有哪些#x1f60f;作者简介#xff1a;博主是一位测试管理者#xff0c;同时也是一名对外企业兼职讲师。 #x1f4e1;主页地址#xff1a;【Austin_zhai】 #x1f646;目的与景愿#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能#xff0c;分享行业相关最新信息。… 作者简介博主是一位测试管理者同时也是一名对外企业兼职讲师。 主页地址【Austin_zhai】 目的与景愿旨在于能帮助更多的测试行业人员提升软硬技能分享行业相关最新信息。 声明博主日常工作较为繁忙文章会不定期更新各类行业或职场问题欢迎大家私信有空必回。 阅读目录 1. 接上回2. Cypress插件2.1 插件安装2.2 实用插件推荐 3. 后话 1. 接上回 上一篇我们介绍了Cypress中的自定义命令和一些高频场景下的对应使用技巧。当然除了自定义命令外为了应对日常的各类测试业务场景我们仍旧需要其他的手段来灵活组合使用。今天就继续带着大家来看看Cypress还有什么其他的对应用法。 2. Cypress插件 除了Cypress自带的功能方法外我们还可以利用它的另一个强大功能 —— 插件。这可以说是一个让使用者通向另一个新世界的大门。有了插件系统我们就可以将Cypress的功能进一步进行扩展来额外为Cypress添加全新的功能以适应更多的各类测试场景。在众多插件中存在着相当多的优秀功能插件比如自动重试、模拟真实事件、截图甚至于一些非功能性的测试插件。 2.1 插件安装 要使用Cypress插件我们就必须先将插件系统安装上在安装了Cypress的前提下具体参看《Cypress安装与使用教程1—— 软测大玩家》。 检查你的Cypress项目目录下是否有plugins文件夹没有的话可以手动创建一个。在plugins文件夹下创建一个名为index.js的文件这个文件是之后用来保存和配置Cypress插件的。 然后我们打开cmd在终端中输入以下命令来安装对应的插件这里的name是你需要安装的具体插件名。
npm install cypress-plugin-name --save-dev安装完成之后我们回到plugins/index.js文件中在文件中配置并引入插件同样的插件名name要改成你具体安装的插件名格式如下
// plugins/index.js
module.exports (on, config) {require(cypress-plugin-name/lib/plugin)(on);
};2.2 实用插件推荐 cypress-plugin-retries是可以让测试用例在失败的时候进行自动重试的插件一般在一些运行稳定性较差的测试场景中会普遍用到。 安装
npm install cypress-plugin-retries --save-dev配置插件
module.exports (on, config) {require(cypress-plugin-retries/lib/plugin)(on);
};这里我们举一个简单的例子假设我们有一个网络请求的测试用例有时由于网络波动或服务器问题请求可能会出现失败的场景。这里就需要使用cypress-plugin-retries来提高测试用例执行的稳定性。
describe(Network Requests, () {it(should retry on network failure, { retries: 2 }, () {cy.intercept(GET, /api/data, { forceNetworkError: true });cy.visit(/);cy.get(.data-display).should(contain.text, Success);});
});通过上面的这个例子由于我们使用了cy.intercept拦截了一个GET请求并强制让它返回网络错误。这样我们的测试用例就会强制错误而测试用例中使用了 { retries: 2 } 来指定在测试失败时重试的次数为2次。这意味着如果请求失败Cypress 将会再次尝试运行该测试用例最多重试2次。所以一旦使用了cypress-plugin-retries这个插件即使请求由于网络问题失败测试用例也有机会在重试时成功。简单来说就是提高了测试的鲁棒性特别是一些需要频繁在网络敏感的测试场景中进行测试的任务。另外需要注意的是重试的次数也是有一定的讲究的不可设置的过高万一功能有一些难以复现的问题出现就会因为设置了过高的重试次数而导致用例通过从而隐藏了真正的问题。 cypress-real-events这个插件允许Cypress去模拟一些真实的浏览器事件比如模拟用户的输入文字的过程、鼠标事件、获取焦点与失焦等让一些测试用例提供了更为高级和复杂的UI交互事件。 安装
npm install cypress-real-events --save-dev配置
import cypress-real-events/support;同样的在我们的测试场景中比如有一个输入框用户在输入框中输入文字后页面会显示相应的提示。如果使用了cypress-real-events插件我们就可以模拟用户输入文字的过程已验证提示是否正确。
describe(Input Interaction, () {it(should show suggestions as user types, () {cy.visit(/);// 模拟用户输入文字cy.get(#search-input).realType(Cypress);// 验证提示框是否正确显示cy.get(.suggestions).should(contain.text, Cypress Testing Framework);});
});在上面的例子中我们使用了realType方法来模拟用户在输入框中输入文字的过程。这比普通的type方法更为真实能够触发更多与输入相关的事件从而更全面地测试输入框的交互行为。 cypress-image-snapshot用来进行测试中页面图像快照测试可以比较页面截图验证页面的外观是否符合预期。 安装
npm install cypress-image-snapshot --save-dev配置
import cypress-image-snapshot/command;我们考虑一个场景假设我们有一个页面包含了一个动态生成的图表我们希望能够在每次测试运行时截取图表的截图并与之前保存的预期截图进行比较以验证图表的外观是否保持一致。
describe(Chart Snapshot Test, () {it(should match the snapshot, () {cy.visit(/);// 等待图表加载cy.wait(2000);cy.screenshot(chart-snapshot, { capture: viewport });cy.compareSnapshot(chart-snapshot);});
});上面的这个例子中我们使用了cy.screenshot来捕捉当前视口的截图然后使用cy.compareSnapshot来与之前保存的预期截图进行比较。如果比较失败那么测试结果也将会变为失败来告知页面的外观不符合预期结果。 一些注重用户体验的产品与项目中测试团队经常会进行可访问性测试而cypress-axe则是我们做此类测试中经常会用到的一个插件。 安装
npm install cypress-axe --save-dev配置
import cypress-axe;比如我们需要对一个登录表单的页面进行对应的可访问性测试作为测试来说就需要确保该表单在可访问性方面符合标准。而接下来我们会用cy.checkA11y()来触发可访问性检查当然实际场景不会是如此的简单如果只需要检查页面中的某一个区域就只要将对应的指向具体的某个组件即可比如我需要检查这个登录表单的可访问性就只需要cy.get(‘form’).checkA11y()这样写即可。
describe(Accessibility Test, () {it(should pass accessibility checks for login form, () {// 访问包含登录表单的页面cy.visit(/login);// 触发 cypress-axe 插件进行可访问性检查cy.checkA11y();// 或者只检查页面的一部分比如登录表单区域cy.get(form).checkA11y();// 可以传入一些配置参数比如忽略某些规则cy.checkA11y({runOnly: {type: tag,values: [wcag2a, wcag2aa],},});});
});3. 后话 以上就是一些实用的Cypress插件的具体使用方法与场景那么在我们使用的过程中也需要同时注意一些特殊的情况一个就是插件与Cypress的版本兼容性我们需要确保所使用的 Cypress 插件与 Cypress 测试框架的版本兼容。有些插件可能对特定版本的 Cypress 有依赖所以在使用之前在官网查看对应的版本需求是一个不容忽视的点另外一般的插件在测试调试或执行的过程中出现报错都可以通过对应的Cypress自身日志来进行问题的调查与定位。
