Switching Contexts from Native to Web Application Testing

Native mobile app development was born at the same time as the first smartphones. The apps were developed per operating system in order to bring the best possible performance to each. Web apps have been around even longer. Since the 90s in fact. Web apps are operating system agnostic and while native app testing is quite complex and difficult. Web application testing is usually seen as a much simpler affair.

 

So, developers began to wonder. How can they combine the functionality of a native app with the ease of development that web applications have? Furthermore, how can they improve their web application testing to make the whole process even more efficient?

 

This led to the creation and development of Progressive Web Apps (PWA).

 

What is a Progressive Web App?

   

The term was first coined by Google Chrome engineer Alex Russell and designer Frances Berriman in 2015. The idea was to combine the mobile experience with support from modern browsers.

 

Interestingly a PWA is not one single technology. Rather, it is an umbrella term for several state-of-the-art technologies that developers use to make websites and web apps look and function like a native app.

 

PWAs can do anything that a native app can do.

• Run from an icon installed on a device home screen
• Access device hardware
• Receive push notifications
• Function across different screen sizes with responsive design.

 

Some of the most notable examples of PWAs

 

Twitter: The Twitter Lite platform is a PWA version of the Twitter mobile app. It takes up less storage and 3% less disk space compared to the Android version. Twitter has credited this with a 65% increase in pages per session, a 75% increase in total tweets, and a 20% decrease in bounce rates.

 

Instagram: If you visit Instagram in a web browser on your mobile, you are using it via PWA. Previously, users could only browse their timeline or profile. With PWAs, you can upload pictures as you normally would with the Instagram native app.

 

Forbes: With PWA technology, Forbes’ loading time has been reduced to 0.8 seconds from 3 to 12 seconds on average with a traditional mobile browser.

 

It seems clear then that switching their app context from Native to progressive has paid off for some of the world’s largest companies.

 

Progressive Web App Testing

 

The main reason we are here today is to take a closer look at what comes next. After you develop a PWA the next immediate step is to test it. Progressive web application testing is not much different from testing other apps.

 

Key Progressive Web App Building Blocks and strategies

 

There are a few elements that are necessities in assembling the architecture of a PWA.

• App Shell – this is the visual element that creates the app-like experience for a PWA
• Manifest file – The colors, icons and general look of the PWA is defined here (Chrome Only)
• Service Worker – A script that runs in the background and allows a PWA to interact with device processes
• Security Layer – PWAs need to be secured using https:// protocol

  For more about this check out our other blog post on the subject.  

Progressive web application testing strategy

 

Let’s take a deep dive into progressive web application testing. There is an interesting benefit that is overlooked by many organizations who choose to develop a PWA. That is, that these apps give companies an advantage in Google’s Indexing algorithm. Google themselves claim that this is not the case. What we do know is that Google’s algorithms look at responsive web design and performance which are both hallmarks of PWAs.

 

Do not forget that by nature of being searchable and indexable by Google your PWA has a leg up against the more traditional competition.

 

The simplicity of PWA Testing

   

The basics of progressive web application testing are simple. They follow a lot of similar aspects to responsive web testing.

 

Google provides a checklist that needs to be validated by QA and developers. Following this checklist will upgrade your PWA’s score.

 

You can find the checklist here.

 

On this checklist are a number of items that need to be tested in order for your application to count as a progressive web app. Some of the items are straightforward like the fact that your site needs to be served over HTTPS. Other items on the checklist are a bit more complex such as the fact that pages must be responsive.

 

It is a long and comprehensive list but be assured that if your teams follow and complete all of the items on the checklist you will improve your performance rates, SEO scores, and PWA rates.

   

In order to help develop and test PWAs Google has created a helpful tool that is available in the Chrome Developer tools. Google Lighthouse runs on any URL that you want to test and actually runs through the checklist. At the end of your test run Lighthouse will give you a breakdown of the score of the PWA you just tested. In addition to scoring, you also get action items, best practices, and recommendations telling you how to improve your scoring in these items.

 

Using SeeTest to Test PWA Functionality

 

Even though a PWA is a web app it still needs to be tested using the standard methodologies that you use to test any web applications.

 

One of the key benefits that we get from working with a PWA is the fact that at its heart it is a web application. This means that we can utilize and capitalize upon all of the existing SeeTest web application testing resources.

 

With SeeTest you can develop your functional tests as you normally would, connect to the cloud and automate scenarios on the mobile devices located in the cloud using Selenium or Appium.

 

Using the Object Spy you can identify all of the onscreen elements of a PWA using web properties. You will also be able to identify native elements on the device screen like battery icons or physical device buttons. Ultimately however the PWA elements are actually web elements.

   

Use your Existing Functional Testing Scripts

 

What this means is that you can use your already existing functional testing scripts which you have written in order to execute cross browser testing. Now you can also use them to carry out PWA testing.

 

We have actually created a created a GitHub project that you can download. What this GitHub project demonstrates are samples of functional tests that you can carry out across multiple browsers.

 

If you would like to see a demo of how this all works in real time take a look at our webinar on the subject of Progressive Web Application testing.

 

Progressive Web Apps make life easier for developers

 

While we have a lot of fancy window dressing that makes PWA apps look and function like the native apps of old at the end of the day they are still websites. That means that functional and nonfunctional aspects all need to be tested as well. This includes testing network conditions. We must perform visual testing, for responsive web design as well.

 

One of the key drivers of progressive web apps is that app usage and user experiences have cause enterprises to rethink their app design and deployment. Web sites have been regaining their position with advanced web stack tech. this has become apparent in the way that Javascript has begun dominating the development community. That domination and the move to app-like websites has changed the dev org structure. Selenium is the tool that is most necessary in this new contextually changing environment.

 

Ultimately as we hopefully have shown PWAs are easier to provision, deploy and to build a complete pipeline around. However, it is important to note that progressive web application testing needs to consider traditional testing as well as the newer methods.

     

Jonny Steiner – Content Manager