complete your cross-browser testing with … your...19 visual testing is a critical element of your...
TRANSCRIPT
![Page 1: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/1.jpg)
Complete your cross-browser testing with automated visual testing
July 2018
![Page 2: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/2.jpg)
Speakers
2
![Page 3: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/3.jpg)
Agenda
3
Responsive web design takes center stage
Why is traditional cross browser testing failing us?
How to easily develop Galen based visual tests – incl. demo
01
02
03
5 min
10 min
5 min
Summary & Q&A04 10 min
![Page 4: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/4.jpg)
4
The stakes are high for the digital customer experience
Of internet users won’t recommend
a business with a poorly designed
website on mobile (SocPub)
Mobile,
52.6%
Desktop,
47.4%
Global online traffic
57%
![Page 5: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/5.jpg)
5
Creating great user on any platform is hard
Screen size Browser version Viewport
Browser sizing on screen, CSS breakpoints
CSS and Javascriptfunctionality
![Page 6: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/6.jpg)
6
Responsive Web Design
![Page 7: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/7.jpg)
7
A single version of code is sent to device, what is presented depends specific conditions
RWD in a nutshell:
Fluid grid + flexible images + media queries
![Page 8: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/8.jpg)
8
CSS functionality support
Source: w3schools.com
![Page 9: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/9.jpg)
Agenda
9
Responsive web design takes center stage
Why is traditional cross browser testing failing us?
How to easily develop Galen based visual tests – incl. demo
01
02
03
5 min
10 min
5 min
Summary & Q&A04 10 min
![Page 10: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/10.jpg)
But…Functional testing tools remain in the Javascript and DOM level
10
Most cross-browser testing today focuses on functional testing
Functional testing is just part of the equation
77% of issues that reach production and affect customers are usability related*
Selenium test can pass even if user experience is “broken”
![Page 11: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/11.jpg)
Visual testing is a digital age imperative
11
![Page 12: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/12.jpg)
Poll
![Page 13: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/13.jpg)
Agenda
13
Responsive web design takes center stage
Why is traditional cross browser testing failing us?
How to easily develop Galen based visual tests – incl. demo
01
02
03
5 min
10 min
5 min
Summary & Q&A04 10 min
![Page 14: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/14.jpg)
14
A framework for automated testing of look and feel for your responsive websites
Layout testing – using
+ =
Galen spec
Created by Ivan Shubin http://galenframework.com/
Visual validation
![Page 15: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/15.jpg)
15
• Objects identification
• Rules defining visual aspect and relations between objects
What is a Galen Spec?
![Page 16: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/16.jpg)
16
Tools Set
• Selenium tests written in Node.js ( Javascript)
• IDE - Visual Code, Microsoft
• Galen framework
• Automated visual testing Chrome extension (Experitest)
• Devices and browsers - Digital Assurance Lab (Experitest)
Demo
What we will see
• Selenium tests executed on real browsers
• Creation of Galen spec
• Integration of Galen spec into existing Selenium test
![Page 17: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/17.jpg)
17
Demo
![Page 18: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/18.jpg)
Agenda
18
Responsive web design takes center stage
Why is traditional cross browser testing failing us?
How to easily develop Galen based visual tests – incl. demo
01
02
03
5 min
10 min
5 min
Summary & Q&A04 10 min
![Page 19: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/19.jpg)
19
Visual testing is a critical element of your continuous testing process
• Consistently great user experience is a business imperative
• Current cross-browser testing solutions are failing us visual failures
Re-cap
Experitest automated visual testing solution helps you develop maintainable visual tests and run them
on numerous browsers and real devices
![Page 20: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/20.jpg)
20
SeeTest Continuous Testing Platform for Web & Mobile Apps
< / >
Developer
Test engineer
DevOps engineer
Any platform Any OS Any app type Any browser Any userAny test type
![Page 21: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/21.jpg)
21
https://chrome.google.com/webstore/
Visual testing by Experitest
Automated Visual Testing Chrome Extension
![Page 22: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/22.jpg)
![Page 23: Complete your cross-browser testing with … your...19 Visual testing is a critical element of your continuous testing process •Consistently great user experience is a business imperative](https://reader036.vdocuments.site/reader036/viewer/2022062918/5eded594ad6a402d666a3027/html5/thumbnails/23.jpg)
Thank You!
Questions?
23