I need for Cypress screenshot to wait until after the second click() is complete

user_6719819 0
Viewed 802

I am running the following test in Cypress:

context('Overview', () => {
  it('4.1 - From Patient Summaries Screen, click a patient name. - Should take user to the weekly Patient Overview screen.', () => {
 cy.login()

 cy.get('body div ul li a span')
   .should('exist')
   .should('be.visible')
   .contains('Patients')
   .click()

cy.get('td[data-cy=Name]')
  .should('be.visible')
  .contains('I.B. Sickly')
  .click()

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

So the screenshot is being taken too soon. It is taken after the first get. However, the last block does not work because it will take a screenshot of the headerTitle literally. If I chain on .screenshot() to the second get block that will not work because then it will take a screenshot of just that patient name inside of contains().

So most important of all I need for it to take a screenshot after the second click.

cypress
3 Answers

Adding to what @agoff already mentioned about using cy.screenshot(). You can do two more additional things.

  1. Makes sure the last element of the webpage is visible may be a footer or anything else, which will indicate that the page has loaded completely.

  2. With Screenshot you can pass an optional parameters like capture.

cy.get('lastElementSelector', {timeout: 6000}).should('be.visible')
cy.screenshot({capture:'fullPage'})

capture tells which parts of the Test Runner to capture. This value is ignored for element screenshot captures. Valid values are viewport, fullPage, or runner. When viewport, the application under test is captured in the current viewport. When fullPage, the application under test is captured in its entirety from top to bottom. When runner, the entire browser viewport, including the Cypress Command Log, is captured. For screenshots automatically taken on test failure, capture is always coerced to runner.

You can view all other optional parameters here - https://docs.cypress.io/api/commands/screenshot#Arguments

user_45712710

A lot of good answers that work, but I found out all I need to do is as follows:

context('Overview', () => {
  it('4.1 - From Patient Summaries Screen, click a patient name. - Should take user to the weekly Patient Overview screen.', () => {
 cy.login()

 cy.get('body div ul li a span')
   .should('exist')
   .should('be.visible')
   .contains('Patients')
   .click()

cy.get('td[data-cy=Name]')
  .should('be.visible')
  .contains('I.B. Sickly')
  .click()

cy.get('div[data-cy=patient-name]')
  .should('be.visible') 

cy.get('main div line')
  .should('be.visible')

cy.screenshot()
})
})

So what I did there was add another get() block that shows that the new screen has something unique to it and that it is visible and when it is, take the screenshot. That should('be.visible') seems to signal to Cypress that it's time to take the screenshot.

user_67198190

If you chain .screenshot() off of an element, it will only screenshot that element.

You do not need to chain .screenshot() off of anything if you want to take a screenshot of the entire window. Simply call cy.screenshot(). cy.screenshot() defaults to capturing the entire page.

user_116258500
Related