In the past, Quality Assurance (QA) teams have relied on manual checks to look for visual issues, while testing on large and dynamic websites. However, with so many sites and features being added to the websites, this approach has proven time and resource intensive while also allowing critical visual bugs to slip into live websites causing brand damage and a poor digital experience for visitors. Join this exciting webinar to learn: How Cypress Evangelist, Christine Pinto, used custom commands she’d created and discovered to hack her Cypress test suite with Applitools’ AI to make it more stable & reliable. How to deal with lazy-loading images to create reliable visual baselines in Cypress. The DOM is detached, where did it go and how can we deal with it in Cypress.

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

12. Element is
detached
from DOM

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?
pinto.christine@outlook.com
Twitter: @ChrisPint_
https://github.com/ChrisPint

24. Useful Plugins
● Cypress-real-events
● Cypress-wait-until
● Faker.js
● Mochawesome