Progressive Web Application Testing

     Progressive Web Application (PWA) technology is exploding in the IT market due to its relative simplicity in development combined with the fast user interaction it offers. But testing PWA requires a different approach, even while the testing methods remain the same. In this article, I would like to share about PWA, why testing PWA is different, features of PWA applications, automation tools to test PWA applications and best practices.

What is Progressive Web Application (PWA)?

     A web application that combines the functionality of native apps with scalability and reach of web pages. Business that want to get fresh content and features to their users without the overhead of native applications. End users who want a fast, seamless, personalized experience; they are using Progressive Web Applications. PWA works in the following fashion:

• Always Update:
  • Integrate new features immediately.
  • Work on any device or technology.
• Looks Like an App:
  • They get their own shortcut.
  • Desktop icon.
  • No browser tab.
• The Tech:
  • Service Workers
  • Cache API
  • Indexed DB
  • Fetch API
  • HTTPS
• Direct to Customer:
  • Doesn’t have to go through an App Store.
  • Never has to be updated.
  • Always Personalized.

Why testing Progressive Web Application (PWA) is different?

     Just like any other web applications, it is imperative to test the PWAs as well. However, testing a PWA is much different from testing traditional web applications. In traditional web applications, one would test for the features provided by the application. Newer types of testing include checks to see if they render appropriately on various mobile devices and to ensure that the behavior is predictable and consistent but now with progressive web applications, the methodology in performing cross browser testing is much different. Let’s look into the process of testing a progressive web app,

Testing for reliability

     PWA reliability depends on the ability to serve pages over https. Using a tool such as Lighthouse will allow you to ensure all the web pages are served over https. Lighthouse can be used for more than just testing the reliability of the website.

Manual testing for native-like behavior

     This type of testing requires manual testing on various different browsers and devices. One of the primary behavior is the capability to add the PWA to the home screen like any other apps. With the web app being added to the home screen, it should start to behave like an app and not like a website. This includes the way it launches, and its ability to have some content even when there is no network connection.

Software-based testing for native-like behaviour

     Manual testing is recommended for the most common browsers on some of the most common devices. However, since it’s impossible to test on all browsers and all devices, you can use the tool Lighthouse to evaluate some of the native-like features. Lighthouse will also test the loading capabilities of all the web pages in offline mode. For example, the presence of offline functionality and loading of pages for offline mode can be tested using Lighthouse. The software examines these features by looking for the metadata that lets browsers know what to do when the PWA is launched in offline mode.

Making the best use of URLs

     A progressive web application as we have seen can look and behave like an app. However, one must remember that it’s still a website. For this reason, all pages must have a URL which is shareable on social media. All pages having URLs also ensures that the search engine crawlers index the entire website correctly. There might be some content which might have very similar URLs. Such cases often occur in a PWA and add a canonical tag in the head of the page.

Cross browser testing

     PWA heavily relies on the features of modern browsers as we have seen earlier. This makes it extremely important to ensure that the site loads and behaves as expected on all the different types of browsers such as Firefox, Chrome, Safari, etc. Some of the older browsers such as internet explorer 8.0 and earlier will not support PWAs. It is thus crucial to check how it behaves when loaded on such older browsers.

     Cross browser testing has been prevalent for a long time. However, its prominence has significantly grown due to the lack of standards and uniformity in browsers and devices across the world. Considering the heavy dependency of PWA on modern browsers, cross browser testing of PWA apps holds a major importance in today’s mobile first world.

Features of Progressive Web Applications

• Responsiveness and browser compatibility: The progressive web design strategy is to provide basic functionality and content to everyone regardless of browsers and connection quality. So PWA is compatible with all browsers, screen size, and other device specifications.
• Offline support: PWA support offline and low-quality network both.
• Push notifications: Push notifications play important role in customer engagement if used wisely. Like Native mobile app the PWA supports push notification feature.
• Regular updates: Like any other app, PWA can also self-update.
• A native application like interface: These apps mimic interactions and navigation’s of native apps.
• Discoverability: PWA applications are shared through URLs so which can be easily found. A user has to visit on the site and add that to the home screen.

Important points to keep in mind while testing PWA

• Validate PWA manifest: A manifest file is a must for PWA. A tester should look for following in the file:
  • It has a name or short_name property.
  • It has start_url property.
  • Web App Manifest has an icon property must include a 192px and a 512px sized icons.
  • Display property should be set to standalone, full screen and minimal-UI.
• Validate service worker: Service worker registered with a fetch event handler.
• The website should be served fully via HTTPS: Safety is the major concern in the world of PWA and tester should always make sure that site is served via HTTPS. To test this, you can use Lighthouse tool.
• Web pages are responsive: Make sure that your web application shows responsive behavior across all mobile and desktop devices.
• Offline loading: All of the web pages or at least some critical pages should work offline. As a tester, you need to make sure that your web app responds with a 200 when it is offline. You can use Lighthouse or WireMock tool for testing this.
• Metadata for ‘Add to Homescreen’: You need to test if the web app provides a metadata for ‘Add to Homescreen’. You can use Lighthouse to test for metadata for ‘Add to Homescreen’.
• Page rendering and transitions: Transitions should be smooth and should not be snappy even on slow networks. This should be done manually on a slow network. A tester should check the responses. When a user clicks on any button, the page should render immediately without any delay.
• Each page must have a URL: Every page on your web app must have a URL and all the URLs must be unique. The URLs can also be opened directly in new browsers.
• Push Notifications: We should test the push notification keeping in mind that they are not overly aggressive. Also, they should be asking for permissions to the user.
• Functionality: This is the most essential part of any testing. Functional testing covers the aspects of the application with respect to the functionality defined in the requirement document. We can do it both manually and through automation.

Automation tools to test PWA

     PWA’s are like any other mobile app. Here we are discussing high-level about following tools:

• CloudQA.
• Appium.
• Lighthouse.

CloudQA

     CloudQA comes with codeless test automation tools through which a user can record the functional test cases and execute them. It also comes with the capabilities to add assertions, manage test case execution and reporting. It is a powerful tool for codeless automation, so a tester without having any coding knowledge can easily use it and automate the test cases. It support the automation for PWA applications. A user can save the set of functional test cases and later execute them at the time of regression. There are options to get the test execution report, create and manage test suites and execute test suite and get the report.

     This is good enough to start with for manual testers because it does not require much of the coding knowledge and quite interactive and easy to use. Also, it does not compromise with capabilities one can add with automation.

Appium

     Appium is suited quite well for testing PWAs. You will find that, when running on a device, there is not a whole lot that makes a PWA special, it is just a web page running in a special web browser (called a ‘context’ in the Appium world) that is wrapped by the native app.  Appium is just a connector between your test scripts and your device that runs the app so the details will depend on what test script technology you choose. The only thing that is different when using Appium/Devices is that the first step of the test needs to ‘switch contexts’ so that the automated script commands are sent to the ‘in-app browser’ that the PWA is running in.

Lighthouse

     Lighthouse is a tool provided by Google that tests app for PWA features. This is open source tool and it tests app against the PWA guidelines such as:

• Tests the application offline or flaky network.
• It is served from a secure origin i.e. https.
• It is relatively fast.
• Uses certain accessibility best practices.

     Lighthouse is available as a chrome extension and a command line tool. Running Lighthouse as chrome extension- Lighthouse can be downloaded from Chrome Web Store. Once installed it will add a shortcut to the taskbar. Then, run lighthouse on your application and choose Generate Report with the app open in the browser page. Here I have generated the report against one PWA application Starbucks (https://app.starbucks.com/). Got following reports:

     Running Lighthouse from command Line. Lighthouse is available as a Node module, which can be installed and run from command line. To install run this command:

npm install -g lighthouse

You can check Lighthouse flags and options with the following command:

lighthouse –help

     I have executed the lighthouse from command line for Starbucks application. I have executed below command in command-line:

lighthouse https://app.starbucks.com/ –view

     This will generate all the status in command-line and also you can see the application open in the browser. Once execution complete the browser will close and the report will generate in form of HTML and it open in another browser automatically. The command-line view looks like below and HTML report looks same as above one which we executed using chrome lighthouse extension,

     Progressive Web Application (PWA) technology is exploding in the IT market due to its relative simplicity in development combined with the fast user interaction it offers. PWA heavily relies on the features of modern browsers as we have seen earlier. This makes it extremely important to ensure that the site loads and behaves as expected on all the different types of browsers. This article helps the manual and automation engineers to learn PWA application, its features, and key points while testing PWA and the testing tools for PWA.

make it perfect!