Elizabeth Fiennes 2019 TestWarez talk on getting started with testing Progressive web apps. (PWAs)

1. Testing Progressive
Web Apps
(or how to achieve api-ness)

2. Hello / Cześć
I am
Elizabeth Fiennes
(she/her/sí/they)
@ElizaFx

3. The backstory
Falling app store downloads
A PWA MPV
No information on testing
(Gulp…)

4. What is a PWA?
Native?
Web?
Thick client?
Hybrid?
Under construction!

6. UI (PWA WebApp Frontend)Local app / file cache
Application/content
for rendering
Server Cache (URLs)Service worker
Datasource Integrated applications
The layers

7. manifest
Accessible
Secure
Service workers responsive
Properties

8. General testing advice
(ask ALL the questions!)
Browser or device
Local storage
Configuration
Display modes

9. The Manifest

10. Launch URL
icons
devices and
supported UI
sizes
look and
feel
Manifest properties

11. Testing the manifest
APP NAME / SHORT NAME - Across devices
ICONS - Across devices
LAUNCH URL - Across devices and browsers
INSTALLATION - Options. Cached data and limits // across devices
LOOK AND FEEL - Background. Colour scheme // across devices and browsers
ENTRY & EXIT - URLs // across browsers

12. Create your
own
Easily done with PWA Starter from:
https://pwastarter.love2dev.com

13. They are
secure

14. The Security “bit”
Internet facing Service workers can only be deployed over HTTPS
This is good
Deploy them locally without a TLS certificate for testing (http)
! Repeat testing over HTTPS

15. Testing for Security
Injecting Data
Progressive web apps are safe to use during interactions.
Looking at Data

16. They have
service
Workers
Notifications

17. Offline
content
notification
s
installation
Hardware
integration
SW properties

18. Testing the service workers
Installs - interrupt them!
Caching - verify static assets
Activations / Updates - attempt an update with SW in use
States - Ensure memory saving termination
DevTools - Fetch new dynamic content!

19. They are
Progressive
19
Accessibility

20. Testing Accessibility
Using Audit tools such as
Lighthouse, Axe or WAVE.
Running an accessibility audit using
the WCAG 2.1 criteria.
Progressive web apps have a far reach and are accessible to all.

21. Lighthouse can be run from the dev tools or as part of the CI to
provide an accessibility score.
Axe can be run from the browser to identify
specific issues and highlight them on the screen.
WAVE run from the browser highlights issues on screen and can
be used to strip the CSS from a site.

22. They are
Responsive

23. Sizing
Reordering
Element
Relocation
Page
Orientation
Responsiveness

24. Testing PWA responsiveness
Lighthouse - Mobile rating
Page transitions - Still usable?
Element changes - Distinguishable?

25. Testing
Device-ively
Testing for
devices

26. Android -
WebAPK file
generated
iOS -
Light version of Safari
is installed
desktop - No
tabs or address
bar. Full window
width.
Touchscreen
- Invisible
elements
not
selectable
Device-iveness

27. Testing for specific devices
App launcher and settings
Application Pack Updates
Intent filters
Hardware permissions
Murder most foul!

28. Everything
isn’t (exactly)
awesome
Awesome
Not awesome

29. Keep your users in mind
> 3G - Ukraine and Guyana
- Estimated 4bn people offline
- Not every browser is supported
Point in time truth:
https://jakearchibald.github.io/isserviceworkerready/index.html#moar

30. Any questions?
Special TY to the awesome SlidesCarnival people who created this slides template
Ask them