赛普拉斯的屏幕截图发生得太快了

Question

出于某种原因，在单击下拉菜单中的菜单项后加载新页面后，Cypress 没有截图。

it.only('2.4 - Press "My Settings" on the top right corner - "My Settings" screen is displayed.', () => {
  cy.login()

  cy.get('body div button[data-cy=usermenubutton]')
    .click()
    .get('body div ul li[data-my=mySettings]')
    .contains('My Settings')
    .click()
    .screenshot()
})

它运行正常，我可以看到它单击“我的设置”并加载新页面，但它已经截取了屏幕截图。这里发生了什么？请记住，我是 Cypress 的新手。

我尝试执行以下操作：

it.only('2.4 - Press "My Settings" on the top right corner - "My Settings" screen is displayed.', () => {
  cy.login()

  cy.get('body div button[data-cy=usermenubutton]')
    .click()
    .get('body div ul li[data-my=mySettings]')
    .contains('My Settings')
    .click()

  cy.get('[data-cy=headerTitle]')
    .should('be.visible')
    .screenshot()
})

当我这样做时出现错误：

expected '<vid.sc-gsDKAQ.eaXakP.MuiBox-root>' to be 'visible'

This element <vid.sc-gsDKAQ.eaXakP.MuiBox-root> is not visible because it has CSS property: position: fixed and it's being covered by another element:

当我尝试这样做时：

cy.get('[data-cy=headerTitle]')
  .should('be.visible')
  .screenshot()

我的截图很差，只是新页面的区域，不是整个页面，没有听到，没有侧边栏等等。

Answer 1

您应该等待要截屏的页面加载。为此，请添加断言以在调用 screenshot() 之前检查“我的设置”屏幕是否已正确加载。我通常会在触发我的屏幕截图之前检查应该只在目标页面中可见的元素是否实际可见：

it.only('2.4 - Press "My Settings" on the top right corner - "My Settings" screen is displayed.', () => {
  cy.login()

  cy.get('body div button[data-cy=usermenubutton]')
    .click()
    .get('body div ul li[data-my=mySettings]')
    .contains('My Settings')
    .click()

  cy.get('selector_of_an_element_only_visible_in_My_Settings')
    .should('be.visible')
    .screenshot()
})

如文档 here 中所述，should() 与其他 cy 命令一样，将继续重试其断言，直到它通过或直到它超时。

如果您对您断言的元素有信心并且屏幕截图仍然发生得太快，您应该考虑使用 cy.wait() 并暂停测试 1 秒。

cy.get('[data-cy=headerTitle]')
  .should('be.visible')
  .wait(1000)
  .screenshot()

赛普拉斯的屏幕截图发生得太快了

Screenshot in Cypress happens too soon

cypress