Cypress DOM 快照和云中一致的图像差异
测试失败时保存页面
Cyclope:如果 Cypress 测试失败,保存带有样式的整页
使用 Cypress Test 中的 LocalStorage 设置初始数据
测试拖动项目
cy.session命令简介
奖励 39:在测试失败时保存整个 HTML 页面
将此插件添加到您的项目中。假设 Cypress 是开发依赖项
$ npm i -D cyclope# 或者如果你更喜欢yarn$ yarn add -D cyclope
包含支持文件或单个规范文件中的插件
// 在 cypress/support/index.js// https://github.com/bahmutov/cyclopeimport 'cyclope'
// cypress.config.jsconst { DefineConfig } = require('cypress')module.exports = DefineConfig({ e2e: {setupNodeEvents(on, config) { // https://github.com/bahmutov/cyclope require('cyclope/plugin')(on, config) // 重要的是返回配置对象 // 以及任何更改环境变量返回配置}, },})
包含插件文件中的插件
// cypress/plugins/index.jsmodule.exports = (on, config) => { // https://github.com/bahmutov/cyclope 需要('独眼巨人/插件')(上,配置) // 重要的是返回配置对象 // 任何更改的环境变量 返回配置}
如果您需要保存当前的Web应用程序页面,包括任何资源
// cypress/integration/spec.jsit('保存页面', () => { // 普通赛普拉斯命令 cy.contains('.some-selector', 'some text').should('be.visible')//当应用程序达到所需状态时//将页面保存在文件夹“page”中。savePage('页')})
所有本地资源(例如图像和 CSS)都应保存为本地文件。您可以创建 zip 存档
// 使用 .zip 扩展名将文件夹压缩到文件中 cy.savePage('page.zip')
保存 zip 时,该函数会生成一个具有文件名、宽度和高度属性的对象。
removeIframes
(默认为 false)在保存之前从页面中删除所有<iframe>
元素
cy.savePage('名称', { removeIframes: true })
ignoreFailedAssets
(默认为 false)在部分资源无法加载的情况下忽略失败
cy.savePage('名称', {ignoreFailedAssets: true })
该模块包括一个实用程序函数,用于在测试失败时保存页面。您可以将此函数用作afterEach
挂钩,可能来自支持文件,因此它适用于所有测试。
// 在 cypress/support/index.js// https://github.com/bahmutov/cyclopeimport { savePageIfTestFailed } from 'cyclope'afterEach(() => { savePageIfTestFailed() // 以防项目中的部分资产损坏 savePageIfTestFailed({ignoreFailedAssets: true })})
默认情况下,仅在非交互模式cypress run
下保存页面。如果即使在cypress open
模式下运行时也想保存页面,请使用选项saveInteractive
savePageIfTestFailed({ saveInteractive: true })
所有页面都保存在文件夹cypress/failed/<spec name>/<test name>
中。
提示:将cypress/failed
作为测试工件存储在 CI 上。如果测试失败,请下载并打开folder/index.html
以检查失败时应用程序的结构。
别clope
使用外部 Cyclope 图像服务生成一致的 PNG 图像。运行 Cypress 时需要CYCLOPE_SERVICE_URL
和CYCLOPE_SERVICE_KEY
环境变量。支持悬停
cy.get('#theme-switcher').realHover().cyclope('hover-over-sun.png')//保存生成的“hover-over-sun.png”图像//相当于cy.get(' #主题切换器').realHover()cy.clope()
如果您想在未配置 Cyclope 服务的情况下简单地跳过 DOM 上传和图像生成,请设置 Cypress 环境选项,例如使用cypress.json
文件
{“env”:{“cyclope”:{“skipUploadWithoutUrl”:true} } }
您可以通过使用环境变量DEBUG=cyclope
运行测试,使用调试模块在终端中启用详细调试消息
$ DEBUG=cyclope npx cypress run
独眼巨人的待办事项应用程序
数独模拟模块
作者:Gleb Bahmutov <[email protected]> © 2021
@巴穆托夫
格巴穆托夫网站
博客
视频
演示文稿
赛普拉斯提示
许可证:MIT - 使用代码做任何事情,但如果它不起作用,请不要责怪我。
支持:如果您发现此模块有任何问题,请发送电子邮件/推文/在 Github 上打开问题
版权所有 (c) 2021 Gleb Bahmutov <[email protected]>
特此免费授予获得本软件及相关文档文件(“软件”)副本的任何人不受限制地使用本软件,包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或销售软件的副本,并允许向其提供软件的人员这样做,但须满足以下条件:
上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。
本软件按“原样”提供,不提供任何明示或暗示的保证,包括但不限于适销性、特定用途的适用性和不侵权的保证。在任何情况下,作者或版权持有者均不对因本软件或本软件的使用或其他交易而引起的或与之相关的任何索赔、损害或其他责任负责,无论是合同、侵权还是其他行为。软件。