Visual AI Enhanced Testing on Dynamic Websites
Download as PPTX, PDF0 likes384 views
The document discusses techniques for visual testing on dynamic websites, focusing on issues like detached DOM elements and lazy-loading images. It provides practical solutions for handling these challenges, including code examples for Cypress commands and integration with CI builds. Additionally, it lists useful plugins to enhance testing efforts.
Visual AI Enhanced Testing on Dynamic Websites
- 1. Visual AI Enhanced Testing By Christine Pinto on Dynamic Websites
- 2. 01 DOM is Detached Where did it go and how can we deal with it Parallel CI Builds How to combine them into one test manager batch Lazy-Loading How to win the battle with lazy- loading images for a visual test 02 03
- 3. — Shorthand Beautifully simple storytelling Create stunning, immersive reading experiences in record time.
- 5. Lazy-Loading 01 How to win the battle with lazy- loading images for a visual test
- 7. Visual test result with lazy-loading images
- 8. cy.document().then((doc) => { const height = doc.body.scrollHeight; for (let i = 0; i <= height; i += 100) { cy.scrollTo(0, i); cy.wait(100); } }); Answer: slow scrolling
- 9. Another method for slow scrolling cy.get("#editor-viewport").then($view => { for (let i = 10; i <= 100; i += 10) { let start = i - 10 + "%"; let l = i + "%"; cy.get("#editor-viewport").scrollTo(start, l); cy.wait(100); } });
- 11. DOM is Detached 02 Where did it go and how can we deal with it
- 13. Cypress queries an element that was passed from a parent element, if the element at some point becomes detached from the DOM an error is thrown.
- 14. If a tree falls in the forest and no one has attached a “fall” event listener, did it really fall?
- 15. Discussions and Solutions ● https://github.com/cypress-io/cypress/issues/7306 ● https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/ ● https://github.com/testing-library/cypress-testing- library/issues/153#issuecomment-692386444
- 16. How to deal with a detached DOM import "cypress-pipe"; Cypress.Commands.add("safeClick", { prevSubject: "element" }, $element => { const click = $el => $el.click(); return cy .wrap($element) .should("be.visible") .pipe(click) .should($el => expect(Cypress.dom.isDetached($el)).to.be.false); });
- 17. Parallel CI Builds 03 How to combine them into one test manager batch
- 19. If the CI runs a build using multiple concurrent instances, then it needs to notify Eyes when all of the instances have terminated
- 20. Configuration - applitools.config.js Source: https://applitools.com/docs/topics/integrations/ github-integration-ci-setup.html#SynchronizeBuilds // Batch id is a unique identifier of a specific batch run. batchId: ID, dontCloseBatches: true,
- 21. Indicate to Applitools when all of the parallel builds have been completed curl -d '' -X POST https://eyesapi.applitools.com/api/externals/github/servers/githu b.com/commit/$APPLITOOLS_BATCH_ID/complete?apiKey=$APP LITOOLS_API_KEY Source: https://applitools.com/blog/google-cloud- build/
- 22. “First do it, then do it right, then do it better.” By Addy Osmani
- 23. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik. THANKS! Do you have any questions? [email protected] Twitter: @ChrisPint_ https://github.com/ChrisPint
- 24. Useful Plugins ● Cypress-real-events ● Cypress-wait-until ● Faker.js ● Mochawesome
Editor's Notes
- #15: Race condition The red flag in this case is that clicking manually after the test has failed works. If the application fails to respond correctly to the “click” event during the Cypress test, but handles the click correctly after, the problem is likely that the application was slow to respond, while Cypress was fast to act. In this case, when the framework shows the calendar modal, it starts attaching the event listeners to the DOM elements. However before the event listeners are attached, Cypress manages to find the DOM element with the required date and click on it. The “click” goes nowhere, since we know: If a tree falls in the forest and no one has attached a “fall” event listener, did it really fall? In our case, there was probably an event listener already attached and ready to process the actual click on a date element (that’s why the date is changing, even if the modal stays open), but no event listener has been attached yet to close the modal. Our test runner is getting ahead of the web application in this particular case.