Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Testing Your PWA: Progressive Web Application

DZone's Guide to

Testing Your PWA: Progressive Web Application

Thinking of developing a Progressive Web App? Read on to learn more about PWAs and test them to ensure it works as you envision.

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

PWAs or Progressive Web Applications are creating quite a buzz in the tech space. The increased number of mobile users and the app-like experience which they provide contributed a lot to their popularity. But what are PWAs and how are they different from native mobile apps? How are PWAs developed and what are the key points which a tester should keep in mind while testing them? Let’s take a look.

Before jumping directly into how to test a Progressive Web App, we should first understand what exactly PWAs are and the key points which a tester has to keep in mind while testing them.

PWAs are web apps which use modern web capabilities to give an app-like experience to users. In simple terms, it is a hybrid of a website and mobile app. A website which behaves more like an app downloaded from the App Store/PlayStore.

It starts as a normal web page in a browser, and as a user explores the web page, they get prompted to “Add to Home Screen.” Once the user gives the thumbs up to this prompt, the PWA gets added to their home screen. Once open from the home screen, it can even hide the browser UI controls and appear as an app.

Some of the popular PWAs are:

  1. Twitter Lite
  2. Flipkart Lite
  3. Trivago Hotel Booking PWA
  4. Forbes
  5. Starbucks Coffee PWA

Testing Strategy for PWAs

To devise a testing strategy for PWAs, let’s first understand how is it different from mobile apps or responsive apps.

The basic difference between a PWA and a responsive app is that it does not require any installation like an app but it supports all the features of an app.

Features of Progressive Web Apps

1) Responsiveness and browser compatibility - These apps are based on progressive enhancement principles. The progressive web design strategy is to provide basic functionality and content to everyone regardless of browser and connection quality while delivering the most sophisticated page version to users whose newer browser can support them.

So PWAs are compatible with all browsers, screen sizes, and other device specifications.

2) Offline Support - PWAs support both offline and low-quality networks.

3) Push Notifications - Push notifications play an important role in customer engagement if used wisely.

4) Regular Updates - Like any other app, PWAs can also self-update.

5) An app like interface - These apps mimic the interaction and navigation of native apps.

6) Discoverability - These apps 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.

Technical Components of PWAs

The Web App Manifest - Essentially a web app manifest is a JSON file through which the developer can control how the app is displayed to the user, i.e. full screen visibility with no address bar.

Service Worker - A JavaScript file which handles user interaction with the app. It runs independently from the web page or app. It supports the main features of PWAs like push notifications, offline work mode, and background synchronization.

Key Points to Keep in Mind While Testing PWAs

There are some key points which a tester should keep in mind while testing a progressive web application:

  1. Validate the PWA Manifest - A manifest file is a must for PWAs. A tester should look for the following in the file:
    1. name  or short_name property.
    2. start_url property.
    3. Web ppp manifest has an icon property that must include a 192px and a 512px sized icons.
    4. The display property should be set to standalone, fullscreen, and minimal-UI.
  2. Validate Service Workers - Service workers are registered to a fetch event handlers.
  3. The website should be served fully via HTTPS - Safety is the major concern in the world of PWAs and testers should always make sure that their site/app is served via HTTPS. You can use Lighthouse by Google Developers, Jitbit, SeoSiteCheckup, DigiCert, SSL shopper, SSL labs, etc. to test if your website/app is served over HTTPS or not.
  4. Web pages are responsive - Make sure that your web application shows responsive behavior across all mobile and desktop devices.You can use these tools to test for your web app’s responsiveness.
  5. 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.
  6. Lighthouse or WireMock tools can be used for testing this.
  7. Metadata for ‘Add to Homescreen’ - You need to test if the web app provides metadata for ‘Add to Homescreen.’
  8. You can use Lighthouse to test for metadata for ‘Add to Homescreen.’
  9. Page transitions - Transitions should be smooth and should not be snappy even on slow networks.
  10. 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.
  11. Each page must have a URL - Every page on your web app must have a URL and all the URLs must be unique. Test this by checking that every page is linkable by a URL and it is able to be shared on social media or other platforms. The URLs can also be opened directly in new browsers.
  12. Schema.org - Testers should also check if Schema.org is available whenever required. Google’s structured data can be used to ensure that images, data, etc. are available or not.
  13. Push Notifications - A tester should test push notification keeping in mind that they are not overly aggressive. Also, they should be asking for permissions to the user.
  14. Functionality - This is the most essential part of any testing strategy. Functional testing covers the aspects of the app with respect to the functionality defined in the requirement document. A tester can do it both manually or through automation.

There are various tools to perform automation testing which are quick to set up and easy to use.

Automation tools to test PWAs - PWAs are like any other mobile app. CloudQA comes with a tool through which a user can record the functional test cases and save them. It also comes with the capabilities to add assertions and manage test case execution and reporting.

It is a powerful tool for codeless automation, so a tester, without any coding knowledge, can easily use it and automate the test cases. Let’s get into the details of the tool and how can it be used for testing PWA.

TruBot by CloudQA - TruBot is a record and save tool provided by CloudQA. Its trial version is quite rich in features and should suffice for basic functional testing. You can always buy the full version to harvest the more extensive features. To start with, download the CloudQA tool from the following link: https://cloudqa.io/.

Click on the Free Trial button on top right and you will be taken to the registration form. Fill in the details and submit. After the registration is done, this will add an extension to Chrome which will look like this:


CloudQA Extension Icon

1) Open a new tab in Chrome and enter the URL of the website. Click on F12 to open the responsive mode of browser and select the device to emulate. For exampel,  type cloudqa.io in as the URL and press F12. Select the device you want to test.

2) Click on the CloudQA extension in your browser and you will get this screen-

Add New Application

3) This automatically detects the URL of the current screen and asks you for confirmation. Click on Add New Application and this will take you to the recording screen.

Record

4) Click on Records and start executing the functional test manually as you would normally do. The tool will record the steps.

Recorded Steps

5) You can see that all the steps are recorded with actions and data. As you are done, click on the icon again and give a name to the test case and click on Save.

Save Test

6) After saving, a user can either execute the test case immediately or save for later. To execute immediately, a user gets an action after saving.

Execute Test

7) To execute later, go to the dashboard and you will get various option to manage test case and select the test case you want to execute and click on execute.

Execute from App

8) A user can save the set of functional test cases and later execute them at the time of regression.

9) There are options to get the test execution report, create, and manage test suites and execute test suites and get the report.

This tool also comes with the ability to add assertions to the test cases, and manage and get execution summaries as well. An assertion is  amust when you write automation tests. Trubot has a very smooth way of putting assertions in the test cases.

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.

You can go through the documentation which is quite understandable, for further detail – https://doc.cloudqa.io/

There are various other tools available to test PWAs. Most of them require coding knowledge and at least hands-on experience iwth one programming language to start with. You can use them as complementary to Trubot. Some of the popular ones are:

  1. Appium - Appium is a mobile test automation framework that works for all kinds of apps — Native, hybrid, and m-web. Appium derives its roots from Selenium and uses JSON wired protocols to interact internally with iOS and Android apps using the Selenium web driver. In its architecture, Appium is an HTTP server written in Node.js that creates and handles multiple WebDriver sessions. Appium starts tests on the device and listens for commands from the main Appium server. It is basically the same as the Selenium server that gets HTTP requests from Selenium client libraries. You can use it if you have an automation framework in-place and running. Add the Appium libraries to it which are open source, make the necessary code changes, and write the test-script as we normally do for any other web-app and execute.

Appium

  1. Lighthouse - Lighthouse is a tool provided by Google that tests app for PWA features. This is open source tool and it tests apps against the PWA guidelines such, as:
    1. If the application is offline or on a flaky network.
    2. If the application is served from a secure origin, i.e. HTTPS.
    3. If the application is relatively fast.
    4. If the application uses certain accessibility best practices.
    Lighthouse is available as a Chrome extension and a command line tool. Lighthouse can be downloaded from Chrome Web Store. Once installed, it will add a shortcut to the taskbar. Then, run Lighthouse on your application by the select icon and choose Generate Report with the app open in the browser page.

LightHouse

Lighthouse generated an HTML page with the result.

LightHouse Result

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

It helps the tester to quickly check PWAs against the specified standards provided by Google. For more information, you can refer to the google checklist given for progressive web application: https://developers.google.com/web/progressive-web-apps/checklist.

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

Topics:
pwa ,progressive web app ,selenium ,lighthouse ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}