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, 
}  },})


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

相关文章
|
6月前
|
测试技术
cypress 如何截图?
cypress 如何截图?
|
6月前
|
前端开发 安全 测试技术
Cypress哪些坑
Cypress哪些坑
QT实现截图工具
最近突发奇想,想实现一个截图软件,于是使用QT写了一个基本的截图软件功能,后续会在优化,接下来我先介绍一下自己的实现思路
103 1
|
iOS开发 开发者 索引
批量上传iOS应用程序截图的实用技巧
提交iOS应用程序截图到iTunes Connect是一项非常繁琐的任务,因为你必须上传多达数十张屏幕截图,这是一个重复而枯燥的过程。但是,我们有一个好消息要告诉开发者们,现在有一个工具可以帮助你批量上传,方便快捷。
|
JavaScript 测试技术
cypress初探
E2E测试会发现启动的方式很简单,那么对应的组件测试,也是一样的简单。这样就不演示了,等一下来编写对应的组件,来看看效果
cypress初探
|
前端开发 安全 测试技术
Cypress的哪些坑
大家好,我是阿萨。昨天讲解了Cypress的那些独特的地方。今天我们来学习下Cypress 的那些坑。
302 0
Cypress系列(5)- 自定义 Cypress
Cypress系列(5)- 自定义 Cypress
222 0
Cypress系列(5)- 自定义 Cypress
|
编解码 算法 IDE
写了10000条Airtest截图脚本总结出来的截图经验,赶紧收藏!
写了10000条Airtest截图脚本总结出来的截图经验,赶紧收藏!
1110 0
Cypress系列(60)- 运行时的截图和录屏,screenshot() 命令详解
Cypress系列(60)- 运行时的截图和录屏,screenshot() 命令详解
692 0
Cypress系列(60)- 运行时的截图和录屏,screenshot() 命令详解
|
XML JSON 资源调度
Cypress系列(41)- Cypress 的测试报告
Cypress系列(41)- Cypress 的测试报告
560 0
Cypress系列(41)- Cypress 的测试报告