Cypress 如何截图?

简介: 大家好,我是阿萨。上一期的cypress 我们学习了如何写常见用例。cypress原生支持截图和录制视频。今天我们就学习下cypress如何截图。

screenshot

就是给某个对象截图。一共有三四个方法,带不同的参数,不同的文件名称和选项。


.screenshot()
.screenshot(fileName)
.screenshot(options)
.screenshot(fileName, options)
// ---or---
cy.screenshot()
cy.screenshot(fileName)
cy.screenshot(options)
cy.screenshot(fileName, options)


常见用法:


直接截图,整个桌面截图,或者某个post响应的截图。


cy.screenshot()
cy.get('.post').screenshot()


截图默认保存在cypress/screenshots文件夹中。可以在Cypress配置中更改截图保存的目录。


// cypress/e2e/users.cy.js
describe('Sarah’s screenshot tests', () => {  
it('takes a screenshot', () => {    
// 截图保存在    
// cypress/screenshots/users.cy.js/my tests -- takes a screenshot.png    
 cy.screenshot()  })})


文件名截取一个截图并保存为一个特定的文件名。给截图的文件取一个特殊的名字。


//  截图保存在// cypress/screenshots/spec.cy.js/clicking-on-nav.png
cy.screenshot('clicking-on-nav')


截图并保存到特定目录, 选择相对路径去保存截图。


// 截图保存在// cypress/screenshots/spec.cy.js/actions/login/clicking-login.png
cy.screenshot('actions/login/clicking-login')


裁剪裁剪截图到一个特定的位置和大小


把截图裁剪成大小合适的截图。


//截图将从顶部和左侧裁剪20px//设置尺寸为400px x 300pxcy.screenshot({ clip: { x: 20, y: 20, width: 400, height: 300 } })


截图一个元素截取第一个.post元素的截图


cy.get('.post').first().screenshot()


截取第一个。post元素的截图,周围填充10px


cy.get('.post').first().screenshot({ padding: 10 })


链接截图,单击捕获的元素


cy.get('button').first().screenshot().click()


从onafter截图回调中获取截图信息


cy.screenshot('my-screenshot', {  
onAfterScreenshot($el, props) {
// props has information about the screenshot,
// including but not limited to the following:// 
{
name: 'my-screenshot',
path: '/Users/janelane/project/screenshots/spec.cy.js/my-screenshot.png',
size: '15 kb',  
dimensions: {
width: 1000,    
height: 660,  
}, 
scaled: true, 
blackout: [],  
duration: 2300, 
}  },})


今天的截图,你学会了。如果你喜欢阿萨的内容,欢迎围观和点赞。

相关文章
|
8月前
|
JavaScript 数据安全/隐私保护
Cypress初体验,写一个成功login的脚本
Cypress初体验,写一个成功login的脚本
107 0
|
7月前
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
394 1
vscode编辑器中如何调试nextjs代码
|
8月前
|
测试技术
cypress 如何截图?
cypress 如何截图?
|
JavaScript 前端开发 程序员
推荐三个神级VSCode插件[jupyter中写javascript,替代typora的markdown编辑器,记录敲代码时间的插件]
使用过Python的朋友应该都知道Jupyter-Notebook,因为它对新手朋友学习Python可谓是绝佳的工具,对Python老手来说使用它来写一些小Demo或者绘图分析都是非常不错的工具,我们都知道,最近,我开始了深入学习JavaScript的路途,偶尔为敲一下js来验证书中的说法以及自己的想法,同时可能会记一下笔记,然后可能还需要刷Leetcode
783 0
|
XML JSON JavaScript
【cypress】6. cypress的默认文件结构介绍
【cypress】6. cypress的默认文件结构介绍
【cypress】6. cypress的默认文件结构介绍
|
JavaScript 前端开发 Ubuntu
【cypress】2. 安装Cypress(windows系统),以及cypress open报错解决。
【cypress】2. 安装Cypress(windows系统),以及cypress open报错解决。
【cypress】2. 安装Cypress(windows系统),以及cypress open报错解决。
Cypress系列(5)- 自定义 Cypress
Cypress系列(5)- 自定义 Cypress
233 0
Cypress系列(5)- 自定义 Cypress
|
编解码 算法 IDE
写了10000条Airtest截图脚本总结出来的截图经验,赶紧收藏!
写了10000条Airtest截图脚本总结出来的截图经验,赶紧收藏!
1129 0
|
资源调度 数据可视化 JavaScript
Cypress系列(3)- Cypress 的初次体验
Cypress系列(3)- Cypress 的初次体验
317 0
Cypress系列(3)- Cypress 的初次体验
|
XML JSON 资源调度
Cypress系列(41)- Cypress 的测试报告
Cypress系列(41)- Cypress 的测试报告
574 0
Cypress系列(41)- Cypress 的测试报告