The document discusses taking screenshots and snapshots of elements in Cypress tests. It shows how to take snapshots of the entire page or individual elements using the .track() method. It also demonstrates how to freeze the system time, wait for elements to load, and create a custom command to change an element's styling for snapshots.

6. [Screenshot eines

7. [Screenshot eines

29. it('should screenshot', () => {
…
// Takes snapshot of page
cy.track('Image name’);
// Snapshot of one element
cy.get('#element')
.track('Image name')
// Spoiler alert: It’s the
// same with Percy
…
});

30. main 6.4.7.0

31. main 6.4.7.0

32. main 6.4.7.0

33. 6.4.7.0
6.4.7.0

37. const now = new Date(2018, 1, 1)
.getTime();
// freezes the system time to Jan 1, 2018
cy.clock(now);
// continue with your normal tests below

40. // Wait for loading times
cy.get('.grid-selection‘)
.should('not.exist');
cy.get('.sw-loader')
.should('not.exist');

44. // An own Command
Cypress.Commands.add('changeElementStyling', (selector, imageStyle) => {
// E.g. replace the image with a fixed one
cy.get(selector)
.invoke('attr', 'style', imageStyle)
.should('have.attr', 'style', imageStyle);
});