前端自动化测试框架Cypress（二十一）---屏幕截图.screenshot()

.screenshot()—屏幕截图，保存路径cypress/screenshots/my-image.png
语法

.screenshot()
.screenshot(fileName)
.screenshot(options)
.screenshot(fileName, options)

// ---or---

cy.screenshot()
cy.screenshot(fileName)
cy.screenshot(options)
cy.screenshot(fileName, options)

实例一

describe('my tests', () => {
  it('takes a screenshot', () => {
    // screenshot will be saved as
    // cypress/screenshots/users.spec.js/my tests -- takes a screenshot.png
    cy.screenshot()
  })
})

**实例二 **

//截图并另存为特定的文件名
// cypress/screenshots/spec.js/clicking-on-nav.png
cy.screenshot('clicking-on-nav')

实例三

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

实例四

//将屏幕截图裁剪到特定的位置和大小
// screenshot will be clipped 20px from the top and left
// to the dimensions 400px x 300px
cy.screenshot({ x: 20, y: 20, width: 400, height: 300 })

实例五

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

实例六

//元素周围有10px的填充
cy.get('.post').first().screenshot({ padding: 10 })

实例七

//截图并单击该元素
cy.get('button').first().screenshot().click()

实例八

describe('my tests', () => {
  it('takes a screenshot', () => {
    cy.screenshot() // cypress/screenshots/users/login_spec.js/my tests -- takes a screenshot.png
    cy.screenshot() // cypress/screenshots/users/login_spec.js/my tests -- takes a screenshot (1).png
    cy.screenshot() // cypress/screenshots/users/login_spec.js/my tests -- takes a screenshot (2).png

    cy.screenshot('my-screenshot') // cypress/screenshots/users/login_spec.js/my-screenshot.png
    cy.screenshot('my-screenshot') // cypress/screenshots/users/login_spec.js/my-screenshot (1).png

    cy.screenshot('my/nested/screenshot') // cypress/screenshots/users/login_spec.js/my/nested/screenshot.png

    // if this test fails, the screenshot will be saved to cypress/screenshots/users/login_spec.js/my tests -- takes a screenshot (failed).png
  })
})

实例九

当将整个页面传递给capture选项时，Cypress将测试中的应用程序从上到下滚动，在每个点上截取屏幕截图并将它们缝合在一起。因此，position:fixed或position:sticky元素将在最终屏幕截图中多次出现。为了防止这种情况发生，在大多数情况下，您可以在屏幕截图之前以编程方式将元素更改为position:absolute，然后再将其更改回原处，如下所示：

cy.get('.sticky-header').invoke('css', 'position', 'absolute')
cy.screenshot()
cy.get('.sticky-header').invoke('css', 'position', null)