Eran Kinsbruner Test Strategy for Progressive web apps using Selenium and Appium for Selenium Conference 2018 in India

1. (Proven) Strategy for Testing
Progressive Web Apps (PWAs)
© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Eran Kinsbruner
@ek121268, http://continuoustesting.blog
erank@perfecto.io

2. About Me
• Lead Technical Evangelist at Perfecto
• Blogger and Speaker
• http://mobiletestingblog.com
• https://www.infoworld.com/author/Eran-
Kinsbruner/
• 18+ Years in Development & Testing
• Author of The Digital Quality Handbook
Weekly Podcast - Testiumpod

3. Agenda
• DevOps Transformation & Trends
• PWA Definition & Architecture
• Motivation to Develop PWA
• Testing Strategy for PWA Apps
• Q & A

4. PAST vs. The FUTURE
6/29/2018 4© 2015, Perfecto Mobile Ltd. All Rights Reserved.

5. Mobile Capabilities in Web Browser (Incomplete) – Ramping Up
CameraMic
Device AUTH
BT/BLE
Notification Network

6. Every Browser Has Unique Capabilities
5/30/18 6© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Chrome on Windows 10 - Desktop Edge 17 on Windows 10 - Desktop

7. Today’s Mobile Native Apps Reality
Android WebiOS

8. Progressive Web App - Definition
Progressive Web Apps (PWAs) are web applications that are regular
web pages or websites, but can appear to the user like traditional
applications or native mobile applications. The application type
attempts to combine features offered by most modern browsers with
the benefits of a mobile experience (Wikipedia)
6/29/2018 8© 2015, Perfecto Mobile Ltd. All Rights Reserved.

9. The Rise of PWAs – Challenging Native Mobile Apps
A Progressive Web App is
• Progressive - Works for every user
• Responsive - Fits any form factor
• Connectivity independent
• App-like - Feels like an app
• Safe - Served via HTTPS
• Search Friendly -allowing search engines to find it.
• Re-engageable -Support push notifications.
• Linkable - does not require complex installation
(store access)
6/29/2018 9© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Source :medium.com

10. PWA Stats
6/29/2018 10© 2015, Perfecto Mobile Ltd. All Rights Reserved.
PWA Stats: https://www.pwastats.com/

11. Adoption Trend
6/29/2018 11© 2015, Perfecto Mobile Ltd. All Rights Reserved.

12. Benefits
6/29/2018 12© 2015, Perfecto Mobile Ltd. All Rights Reserved.

13. Progressive Web App – The Offline Network Benefit
6/29/2018 13© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Source: VentureBeat

14. Instagram PWA
6/29/2018 14© 2015, Perfecto Mobile Ltd. All Rights Reserved.

15. Instagram/Tinder PWA on iOS
6/29/2018 15© 2015, Perfecto Mobile Ltd. All Rights Reserved.
1. Login isn’t saved in between launches
2. Language change/Orientation change
disrupts layout 3rd Party Login

16. Progressive Web App - Architecture
6/29/2018 16© 2015, Perfecto Mobile Ltd. All Rights Reserved.
• A PWA App consists of few key components
• Manifest.Json - That's the file within the PWA that describes the app, provides metadata specific
to the app like icons, splash screens, and more
• Service Workers – A service worker is a script that your browser runs in the background, separate
from a web page, opening the door to features that don't need a web page or user interaction.
Today, service workers already include features like push notifications and background sync
Service worker push notification

17. Installation Process
6/29/2018 17© 2015, Perfecto Mobile Ltd. All Rights Reserved.
*iOS Hybrid App (not running from Safari + special permissions) vs. Android APK)

18. PWA on iOS is Different than Android
6/29/2018 18© 2015, Perfecto Mobile Ltd. All Rights Reserved.
iOS Android
App type shortcut apk
Offline data Deleted after idle time No limit
Offline storage (browser based) Safari < 50Mb Chrome 6% available storage
Sensors support Limited (BT) All
access to private information No Yes
Payment system No supported Supported
Voice support No Yes

19. PWA Test Strategy
© 2015, Perfecto Mobile Ltd. All Rights Reserved.

20. Responsive Web App – Test Plan Strategy: 6 Steps
6/29/2018 20© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Choose The Right
Platforms
Assure Visual Web
Pages Across
Platforms
Functionality of
Navigation Flows
and Menus
Client Side
Performance
Testing
Test Accessibility
for Mobile and
Web
Test Environment
Conditions
(Networks,
Sensors)

21. Progressive Web App – Test Plan Strategy: 6 Steps
6/29/2018 21© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Validate PWA
Manifest
Validate PWA
Service Workers
Validate PWA
Specific
Capabilities
Properly Test
Across Platforms
(RWD)
Test Automation
and Object
Identification
Strategy
Google’s PWA
Checklist
Compliance
RWD Testing Strategy And 

22. Progressive Web App – Test Plan Strategy: Step 1
icons, splash screen, start URL, background colors, display type, initial orientation and
theme colors, are correctly working and visually properly displayed across browsers
6/29/2018 22© 2015, Perfecto Mobile Ltd. All Rights Reserved.

23. Progressive Web App – Test Plan Strategy: Step 2
6/29/2018 23© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Validate PWA
Service
Workers

24. Progressive Web App – Test Plan Strategy: Step 2
• Test the SW registration
• Test SW install and update functionality
• Test the various SWs Start/Stop/Registration
• chrome://serviceworker-internals/
• chrome://inspect/#service-workers
6/29/2018 24© 2015, Perfecto Mobile Ltd. All Rights Reserved.
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
Validate PWA
Service
Workers

25. Progressive Web App – Test Plan Strategy: Step 3
• Sensors, Camera, Location capabilities, Push Notification, must be tested across mobile and web respectively
• PWA vs. Native: Instances, icons, functionality, Gestures
6/29/2018
Google Maps Force Touch (Native App) Google Maps Native vs. PWA ICONS Google Maps PWA Location Prompt
Validate PWA
Specific
Capabilities

26. Progressive Web App – Test Plan Strategy: Step 4
6/29/2018 26© 2015, Perfecto Mobile Ltd. All Rights Reserved.
• UI and visual/layout testing across multiple form factors
• Performance and rendering of the content across platforms
• Network related testing – in addition to the offline mode that is covered through service workers,
make sure to cover the app behavior throughout various network conditions (packet loss, flight
mode, latency %, 3G, 4G, 5G etc.)
• Functionality of the entire page user flows across platforms and screen sizes and resolutions
• The differences between browsers, platforms must be covered as well (Chrome, Safari, Android,
Samsung Browser vs. built-in browsers like Facebook - number of instances or copies a PWA app
can have on a device.
Properly Test
Across Platforms
(RWD)

27. Progressive Web App – Test Plan Strategy: Step 5
6/29/2018 27© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Object
Identification
Strategy
Interact with WebView Elements within the PWA App
Launch PWA App
Close Driver
Interact with Native Elements of the PWA App

28. Progressive Web App – Test Plan Strategy: Step 5
6/29/2018 28© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Object
Identification
Strategy

29. Progressive Web App – Test Plan Strategy: Step 5
6/29/2018 29© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Object
Identification
Strategy

30. Progressive Web App – Test Plan Strategy: Step 5
6/29/2018 30© 2015, Perfecto Mobile Ltd. All Rights Reserved.
Object
Identification
Strategy
&

31. Progressive Web App – Test Plan Strategy: Step 6
6/29/2018 31© 2015, Perfecto Mobile Ltd. All Rights Reserved.
• https://developers.google.com/web/progressive-web-apps/checklist
Google’s PWA Checklist
Compliance

32. Summary
• PWA is growing and embraced by browser vendors as well as
enterprises
• iOS is lagging behind Android capabilities
• Selenium & Visual Testing & Appium is a recommended test
automation strategy for PWA
• Leverage what you already know and have (RWD, Selenium,
Mobile Testing)
6/29/2018 32© 2015, Perfecto Mobile Ltd. All Rights Reserved.

33. Thank You
Eran Kinsbruner
@ek121268
erank@perfecto.io
http://continuoustesting.blog
© 2015, Perfecto Mobile Ltd. All Rights Reserved.