![Page 1: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/1.jpg)
Adam Carmi (@carmiadam)Co-Founder and VP R&D at Applitools
ADVANCED TEST AUTOMATION TECHNIQUES
FOR RESPONSIVE APPS AND SITES
![Page 2: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/2.jpg)
AGENDA
What are responsive web sites? Let’s test Github! Best practices Q & A
![Page 3: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/3.jpg)
RESPONSIVE WEB DESIGN
An approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience across a wide range of devices.
“WIKIPEDIA
![Page 4: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/4.jpg)
https://github.com
vs
https://en.wikipedia.org
![Page 5: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/5.jpg)
window.innerWidth
![Page 6: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/6.jpg)
TEST=
INTERACTION+
VALIDATION
![Page 7: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/7.jpg)
LET’S TEST!
+ + +
![Page 8: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/8.jpg)
INTERACTION TIPS
Detect page layout within its page object
Build browser and layout independent automation
Avoid creating layout specific page objects
Avoid detecting layout by window.innerWidth
Set browser size by window.innerWidth
![Page 9: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/9.jpg)
TEST=
INTERACTION+
VALIDATION
![Page 10: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/10.jpg)
An approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience across a wide range of devices.
HOW CAN WE VALIDATE RWD???
“WIKIPEDIA
![Page 11: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/11.jpg)
VISUAL TESTING
A quality assurance activity aimed to verify that a Graphical User Interface appears correctly to users
![Page 12: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/12.jpg)
![Page 13: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/13.jpg)
![Page 14: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/14.jpg)
AUTOMATED VISUAL TESTING
Drive the AUT and take screenshots
Compare screenshots with baseline images
Report differences
Update the baseline
![Page 15: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/15.jpg)
LET’S TEST!
+ + +
![Page 16: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/16.jpg)
VALIDATION TIPS
Prefer full page validation
Use page object callbacks to validate layout-specific UI states
Focus on lower layout boundaries
Don’t abort your tests on validation failures
Always use real browsers
Prefer real devices
![Page 17: Advanced test automation techniques for responsive apps and sites](https://reader036.vdocuments.site/reader036/viewer/2022070516/58724fec1a28ab852f8b6d11/html5/thumbnails/17.jpg)
Adam Carmi (@carmiadam)Co-Founder and VP R&D at Applitools
QUESTIONS?