Let's get visual. Visual testing in your project - Ramona Schwering
•
0 likes•8 views
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.
Report
Share
Let's get visual. Visual testing in your project - Ramona Schwering
- 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); });