Embed Size (px)
Citation preview
Complete your cross-browser testing with automated visual testing
July 2018
Speakers
2
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
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%
5
Creating great user on any platform is hard
Screen size Browser version Viewport
Browser sizing on screen, CSS breakpoints
CSS and Javascriptfunctionality
6
Responsive Web Design
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
8
CSS functionality support
Source: w3schools.com
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
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”
Visual testing is a digital age imperative
11
Poll
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
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
15
• Objects identification
• Rules defining visual aspect and relations between objects
What is a Galen Spec?
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
17
Demo
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
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
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
21
https://chrome.google.com/webstore/
Visual testing by Experitest
Automated Visual Testing Chrome Extension
Thank You!
Questions?
23
