A Frontend Web Developer's Guide to Testing E-Book

Eran Kinsbruner

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 300

Veröffentlichungsjahr: 2022

Beschreibung

Testing web applications during a sprint poses a challenge for frontend web app developers, which can be overcome by harnessing the power of new, open source cross-browser test automation frameworks. This book will introduce you to a range of leading, powerful frameworks, such as Selenium, Cypress, Puppeteer, and Playwright, and serve as a guide to leveraging their test coverage capability. You’ll learn essential concepts of web testing and get an overview of the different web automation frameworks in order to integrate them into your frontend development workflow. Throughout the book, you'll explore the unique features of top open source test automation frameworks, as well as their trade-offs, and learn how to set up each of them to create tests that don't break with changes in the app.
By the end of this book, you'll not only be able to choose the framework that best suits your project needs but also create your initial JavaScript-based test automation suite. This will enable fast feedback upon code changes and increase test automation reliability. As the open source market for these frameworks evolves, this guide will help you to continuously validate your project needs and adapt to the changes.

Leseprobe

A Frontend Web Developer's Guide to Testing

Explore leading web test automation frameworks and their future driven by low-code and AI

Eran Kinsbruner

BIRMINGHAM—MUMBAI

A Frontend Web Developer's Guide to Testing

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Bhavya Rao

Senior Editor: Mark D'Souza

Content Development Editor: Feza Shaikh

Technical Editor: Saurabh Kadave

Copy Editor: Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Tejal Daruwale Soni

Production Designer: Roshan Kawale

Marketing Coordinator: Anamika Singh

First published: April 2022

Production reference: 1280322

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80323-831-9

www.packt.com

This book, which is the fourth of my career, is dedicated to my mother, Rodica Kinsbruner, and my supportive family: my wife, Shikma Kinsbruner, and my two sons, Ariel and Yahly.

– Eran Kinsbruner

Contributors

About the author

Eran Kinsbruner is a bestselling author, chief evangelist, and senior director at Perforce Software. He was a DevOps evangelist of the year finalist in 2021 for DevOps.com. His published books include the 2016 Amazon bestseller The Digital Quality Handbook, Continuous Testing for DevOps Professionals, and Accelerating Software Quality – ML and AI in the Age of DevOps, which was named the "best new software testing book" by Book Authority. Eran has many years of experience in development and testing at companies such as Sun Microsystems, Neustar, Texas Instruments, and General Electric. Eran is a patent-holding inventor and is active in the software development and testing community. He can be found across social media (LinkedIn – https://www.linkedin.com/in/erankinsbruner/, Twitter - https://twitter.com/ek121268, Medium Articles – https://ek121268.medium.com/) and has his own blog, http://continuoustesting.dev.

About the reviewer

Bruno Bosshard is an experienced software quality assurance manager and test automation architect at Pepgo Pty Ltd, based in Sydney, Australia. He has experience in test management, functional testing, and performance testing, working for clients in Europe, the Middle East, and Australia, both on a management level, such as developing test strategies, plans, processes, and templates, as well as on a practical, hands-on level, including development and implementation of automated test frameworks in Agile continuous integration environments. He is a test automation specialist with good development and DevOps knowledge who knows how to implement successful test automation to achieve real business value. Bruno can be contacted via LinkedIn. 

Foreword

I have known and worked with Eran Kinsbruner for more than 3 years. Eran is a software testing expert in web and mobile applications. He contributes to the community through his speaking engagements and content creation as part of his role as Chief Evangelist at Perfecto by Perforce.

As web applications have become so complex in recent years, test automation needed to advance as well. In this book, Eran picked the top leading open source frameworks that practitioners will find useful in maturing their test automation coverage.

As one of the main contributors to the Cypress testing framework, I can confidently state that by using the insights covered in this book for network control testing, API testing, functional and accessibility testing, visual testing, and more, frontend web application developers can learn a lot and ensure that they are building better apps that can function and perform well across all leading web browsers.

Beyond getting familiarity and getting started with the top testing JavaScript frameworks, you will also learn how to build a solid testing strategy for your web application from the ground up.

In A Frontend Web Developer's Guide to Testing, Eran provides a complete and informative guide to both newcomers as well as veteran frontend web application developers around building test automation that works, scales, and provides value to the business.

Lastly, the book is filled with great and simple-to-use code examples, references, and visuals that can help practitioners ramp up quickly with their testing activities.

Gleb Bahmutov

Senior Director of Engineering at Mercari US

Previously VP of Engineering at Cypress.IO

Table of Contents

Preface

Part 1 – Frontend Web Testing Overview

Chapter 1: Cross-Browser Testing Methodologies

An overview of the web landscape

Understanding web application types

Traditional web applications

Responsive web applications

PWAs

Testing types for web applications

Functional testing of web applications

The non-functional testing of web applications

Understanding headless and headed browsers within app development and testing

Choosing between headed browsers and headless browsers

Headless browser testing frameworks

Summary

Chapter 2: Challenges Faced by Frontend Web Application Developers

Web application development challenges

Quality vs velocity

Coverage challenges for web application developers

Non-functional challenges in web application development

Performance challenges

Accessibility challenges

Compliance challenges for web applications

Summary

Chapter 3: Top Web Test Automation Frameworks

An overview of the web testing market

Getting started with the Selenium WebDriver framework

Setting up Selenium WebDriver

Selenium Grid

Getting started with the Cypress framework

Important features of Cypress

Getting started with the Google Puppeteer framework

Getting started with the Microsoft Playwright framework

Summary

Chapter 4: Matching Personas and Use Cases to Testing Frameworks

Technical requirements

Web testing personas overview

Use cases and considerations for picking a solid test automation framework

Community considerations

Scale testing capabilities

Tool stack integrations and plugins

Ease of use and adoption

Reusability and maintainability

Reporting, test analysis, and intelligence

Testing automation evaluation matrix

Summary

Chapter 5: Introducing the Leading Frontend Web Development Frameworks

Technical requirements

Introduction to the leading web development frameworks

Guidelines for picking a web development framework

ReactJS

AngularJS

Vue.js

Ember.js

Svelte

Summary

Part 2 – Continuous Testing Strategy for Web Application Developers

Chapter 6: Map the Pillars of a Dev Testing Strategy for Web Applications

The key pillars of a web application testing plan and strategy

Know your target users

Building a test plan

Prep your tool stack and environments

Set quality criteria and objectives

Build a timeline and a schedule

Execute, monitor, measure, and document

Measuring the success of your continuous testing strategy

A case study – a real-life web application testing strategy

Summary

Chapter 7: Core Capabilities of the Leading JavaScript Test Automation Frameworks

Comparing the test automation framework capabilities

Visual testing

API testing

Supported development languages

Mobile device testing

Performance testing

Accessibility testing

Network control testing and mock services

Working with elements

A re-evaluation of test automation frameworks due to compelling events

Summary

Chapter 8: Measuring Test Coverage of the Web Application

Introduction to code coverage and test coverage

Test coverage

Code coverage

JavaScript code coverage tools for web application developers

Measuring JavaScript code coverage using Istanbul and Cypress

Complementing code coverage with test coverage

Summary

Part 3 – Frontend JavaScript Web Test Automation Framework Guides

Chapter 9: Working with the Selenium Framework

Technical requirements

Understanding the Selenium framework and its components

Selenium WebDriver

The advanced features of Selenium

Various testing methods with Selenium

The future of the Selenium framework

Summary

Chapter 10: Working with the Cypress Framework

Technical requirements

Getting started with Cypress

The Cypress GUI

Cypress IDE and command-line executions

Cypress's advanced test automation capabilities

Cypress test retries

Using stubs, spies, and clocks with Cypress

Running Cypress within CI

Component testing

Cypress Studio

Cypress plugins

Cypress API testing

The future of the Cypress framework

Summary

Chapter 11: Working with the Playwright Framework

Technical requirements

Getting started with Playwright

Playwright's advanced test automation capabilities

Playwright Inspector

Emulating mobile devices

Playwright test annotations

Playwright API testing

Playwright assertions

Playwright network mocking

Playwright POM (Page Object Model)

Playwright test reporting

Playwright test runners

Playwright trace viewer

Playwright advanced configurations

Playwright integration with CI

The future of the Playwright framework

Summary

Chapter 12: Working with the Puppeteer Framework

Technical requirements

Getting started with Puppeteer

Learning about Puppeteer's advanced test automation capabilities

Puppeteer namespaces

Puppeteer working with elements

Puppeteer load test option

Puppeteer and Cucumber BDD

Puppeteer accessibility testing

Puppeteer web app tracing

Puppeteer for API testing

Puppeteer with Google DevTools

Puppeteer and CodeceptJS integration

Puppeteer testing within CI

The future of the Puppeteer framework

Summary

Chapter 13: Complementing Code-Based Testing with Low-Code Test Automation

Fundamental features of low-code/codeless testing tools

Codeless tool overview within the open source landscape

Open source codeless tool lineup

Leading commercial codeless testing tools for web applications

Perfecto scriptless web overview

Testim codeless web tool overview

Mabl codeless web testing tool overview

Summary

Chapter 14: Wrapping Up

Major takeaways from the book

Useful references and bookmarks

Cypress framework-specific

Playwright framework-specific

Selenium framework-specific

Puppeteer framework-specific

Why subscribe?

Other Books You May Enjoy

Packt is searching for authors like you

Preface

Testing web applications during a sprint poses a challenge for frontend web app developers, which can be overcome by harnessing the power of new, open source cross-browser test automation frameworks. This book will introduce you to a range of leading, powerful frameworks, such as Selenium, Cypress, Puppeteer, and Playwright, and serve as a guide to using their test coverage capability. You'll learn essential concepts of web testing and get an overview of the different web automation frameworks to be able to integrate them into your frontend development workflow. Throughout the book, you'll explore the unique features of top open source test automation frameworks, as well as their trade-offs, and learn how to set up each of them to create tests that don't break with changes in the app.

By the end of this book, you'll be able to not only choose the framework that best suits your project needs but also create an initial JavaScript-based test automation suite. This will enable fast feedback upon code changes and increase test automation reliability. As the open source market for these frameworks evolves, this guide will help you to continuously validate your project needs and adapt to the changes.

Who this book is for

If you are a frontend developer working with popular frameworks, such as Vue or React, and want to develop testing skills by learning the essentials of test automation, this book is for you. An intermediate-level understanding of JavaScript and frontend development is assumed.

What this book covers

Chapter 1, Cross-Browser Testing Methodologies, covers the most advanced web technologies and web application types you will come across, including responsive and progressive types. It is specifically designed to cover the main trends that typically impact web application developers, along with the various testing types that are relevant for such applications.

Chapter 2, Challenges Faced by Frontend Web Application Developers, covers the key challenges modern web application developers face and their root causes. It is specifically designed to cover the constant debate about velocity, quality, and key non-functional challenges that are a pain for developers.

Chapter 3, Top Web Test Automation Frameworks, focuses on the top four leading open source frameworks on the market and provides an intermediate tutorial on how to get started with each of these.

Chapter 4, Matching Personas and Use Cases to Testing Frameworks, provides a set of considerations to help the two main personas within web application development and testing (developers and test automation engineers) to choose the best test automation framework for their needs.

Chapter 5, Introducing the Leading Frontend Web Development Frameworks, looks at the test frameworks from the web development and application perspectives and provides guidelines on how to ensure that your test framework best fits the application type, as well as the web development frameworks used to build these apps.

Chapter 6, Map the Pillars of a Dev Testing Strategy for Web Applications, looks at how to combine the relevant considerations into a testing strategy that covers all quality aspects and continuously meets the end user experience. In addition, it offers frontend developers key metrics that can be used to monitor and measure the success of the strategy.

Chapter 7, Core Capabilities of the Leading JavaScript Test Automation Frameworks, provides an overview of the most critical testing capabilities that are required for web applications and provides the recommended test framework to go with each capability.

Chapter 8, Measuring Test Coverage of the Web Application, provides guidelines for how to complement the quality assessment of your web application with code coverage across the various test automation frameworks featured in this book (Selenium, Cypress, Playwright, and Puppeteer).

Chapter 9, Working with the Selenium Framework, provides you with a deep technical overview of the Selenium framework with a focus on the advanced capabilities, including support for CDP, relative locators, visual testing, cloud testing, behavior-driven development (BDD) testing, and self-healing add-ons.

Chapter 10, Working with the Cypress Framework, provides a technical overview of the framework with a focus on its advanced capabilities, including time travel, component testing, network control, API testing, supported plugins, and cloud testing.

Chapter 11, Working with the Playwright Framework, offers a technical overview of the framework with a focus on the advanced capabilities of Playwright, such as API testing, network control, visual testing, the retrying mechanism, Inspector, and the code generator tool.

Chapter 12, Working with the Puppeteer Framework, provides a technical overview of the framework with a focus on the advanced capabilities, including HAR file generation and using headless mode for testing. The chapter comes with some code-based examples that can be used out of the box.

Chapter 13, Complementing Code-Based Testing with Low-Code Test Automation, discusses how, while the open source community offers a wide range of coding test frameworks, as highlighted in this book, there are also new and emerging intelligent testing solutions that can combine their record and playback abilities with self-healing machine learning-driven features to provide an additional layer of test automation coverage. In this chapter, we uncover the available options on the market, the relevant places and use cases to use such tools within a development pipeline, and the caveats or pitfalls to be aware of.

Chapter 14, Wrapping Up, concludes the book with a set of references, additional blogs, and websites to bookmark to expand on the content offered in this book.

To get the most out of this book

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book's GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/A-Frontend-Web-Developers-Guide-to-Testing. If there's an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781803238319_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Cypress performs most of its API tests via the cy.request() method, which serves as a GET command to the web server being tested."

A block of code is set as follows:

cy

  .get('list')

  .first(); // "select first item in the list "

cy

  .get('list')

  .last(); // "select last item in the list "

cy

  .get('list')

  .eq(2); // "select 2nd item in the list

"

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

describe("Docket Post Test 2", () => {

    it("Should create a Todo item", () => {

        cy.request({

            method: "POST",

            url:

             "https://docket-test.herokuapp.com/api/Todo/",

            headers: {

                token: "YOUR TOKEN ID",

            },

            body: {

                Body: "Barclays Demo",

            },

        })

Any command-line input or output is written as follows:

npm install axe-puppeteer

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "Upon any test launch from the GUI, users will have the ability to click on the Add New Test button."

Tips or Important Notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you've read A Frontend Web Developer's Guide to Testing, we'd love to hear your thoughts! Please click here to go straight to the Amazon review pagefor this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.

Part 1 – Frontend Web Testing Overview

Web technology has significantly advanced over the past few years. With mature web apps in the form of responsive and progressive apps, React, and others, developers are being challenged more than ever to ensure the continuous quality of web apps, regardless of which platforms they are being consumed on (mobile, desktop, or both). In the first part of this book, you will be able to catch up on all the important advancements within web technologies, the challenges in building a top-notch web app, the available testing solutions that can help overcome some of these challenges within a development team, and the main differences between the leading web development frameworks that can impact testing strategies.

In this part, we will cover the following chapters:

Chapter 1, Cross-Browser Testing MethodologiesChapter 2, Challenges Faced by Fronted Web Application DevelopersChapter 3, Top Web Test Automation FrameworksChapter 4, Matching Personas and Use Cases to Testing FrameworksChapter 5, Introducing the Leading Frontend Web Development Frameworks

Chapter 1: Cross-Browser Testing Methodologies

Over the past few years, web technology has advanced significantly. End users are now exposed to a whole new level of mature web apps in the form of responsive and progressive apps such as React and Flutter. With these advancements, developers are challenged more than ever with ensuring the continuous quality of their web apps, regardless of which platforms (mobile, desktop, or both) they are being used on.

This chapter covers the most advanced web technologies and web application types you will come across, including responsive and progressive types. It is specifically designed to cover the main trends that typically impact web application developers, along with the various testing types that are relevant for such applications. The web landscape offers developers a wide range of web application types across different application frameworks. Applications such as responsive web, progressive web, Flutter, React Native, and more are only a subset of the range of such applications. In this chapter, we will outline the main application types and what they mean as well as how they differ from each other to help frontend developers consider different testing activities.

This chapter will cover the following main topics:

An overview of the web landscape Understanding web application types Testing types for web applicationsUnderstanding headed and headless browsers within app development and testing

An overview of the web landscape

The web landscape is at its most advanced stage today compared to some years ago. Today, web applications can leverage the unique capabilities of the different web browsers that were simply not available a few years ago. From interaction with location services, cameras, and more to being installed as apps on a smartphone, tablet, or laptop, today, web applications are closer than ever to mobile applications.

With all of this in mind, there are other aspects within the web landscape that are important to understand: web technologies that are available and are constantly changing for web application developers.

Based on Hackr.io (https://hackr.io/blog/web-development-frameworks), web developers have a wide array of choices when building their websites. With ExpressJS, Angular, React, Vue, Ember, and more, developers can choose the most relevant technology for their next web application.

With web technologies growing and running on different omni-channels, the quality and growth of vulnerabilities are also becoming a great challenge. Based on the ongoing monitoring of web trends by the HTTP Archive (https://httparchive.org/reports/state-of-the-web), 59.4% of crawled pages contain at least one known third-party JavaScript vulnerability:

Figure 1.1 – Web pages with vulnerable JavaScript code (source: https://httparchive.org/reports/state-of-the-web)

In addition to the level of growth of web technologies and maturity of browser capabilities, an additional area that has completely changed in terms of both awareness and importance is web application accessibility compliance. Organizations that build web applications today, and in the future, must adhere to strict accessibility rules across desktop and mobile devices. Not meeting these guidelines, such as section 508, Americans with Disabilities Act (ADA), and Web Content Accessibility Guidelines (WCAG), can result in massive fines and brand damage.

Today, web application developers should be more equipped with the knowledge, tools, and continuous training around web application quality. This is to ensure their apps are solid and don't introduce any kind of business risk to their brand – whether quality-related, security-related, accessibility-related, availability-related, or in terms of compatibility across factors that includes different screen sizes and resolutions.

Now that we've looked at a brief overview of the current web landscape, let's examine the various types of web applications and what each of them mean from a development and testing perspective.

Understanding web application types

When building a web application in the ever-changing digital marketplace, developers have various choices in terms of whether to build a traditional web application, a responsive one, or a progressive application. Each choice comes with advantages, disadvantages, and technology implications, such as the language in which the app is developed, the target platforms on which it will run, and which technology stack would fit such an application. A progressive web application (PWA) that is intended to run on both web and mobile apps can be developed in JavaScript; however, testing one on real mobile devices and browsers will require a mix of frameworks such as Selenium, Appium, and more.

Let's learn more about each of the application types.

Traditional web applications

The most basic web application type is one that is developed and designed from the bottom up to run on desktop machines (for example, Windows 11 with the Edge browser and macOS with Safari). While fully supported to run on mobile smartphones and tablets, such applications are not designed to be responsive.

If you navigate from your Windows desktop Chrome browser to the MSN website (http://msn.com), you will be able to work through the site, navigate around it, and use it as required. However, if you choose to navigate to the browser menu, under the More tools submenu, and select the Developer tools option (this one can also be triggered through a click on by pressing the F12 button on your keyboard), you will see a Toggle device toolbar button that is aimed at helping developers and testers to validate their web apps from a responsive standpoint. In this menu option, if a user selects an iPhone device, they will see that the website isn't mobile-ready. As a matter of fact, in the top-level banner of this web application, there is a callout to download a relevant mobile app for both Android and iOS:

Figure 1.2 – The MSN web application on an iPhone 13 Pro Max in landscape orientation mode

Such a web application type would be developed, tested, and mostly dedicated to desktop web users. Additionally, it will require the organization to maintain a mobile-specific native or hybrid app to ensure a proper user experience across all digital devices.

Responsive web applications

In contrast to traditional web applications, responsive web applications are adjustable across most desktop and mobile screen sizes and resolutions. Such a unique design allows web developers to make their apps accessible across the maximum number of digital channels using a single code base and a consistent user experience. However, it is not as simple as that; responsive web apps require, in addition to a unique development workflow, things such as an agreed content strategy that shows customers the most relevant content above and beyond the fold. Such visible content across all types of screens needs to be constantly maintained, optimized, and tested to ensure business growth and success:

Figure 1.3 – Responsive Web Design for Desktop, Notebook, Tablet and Mobile Phone (originally created by Muhammad Rafizeldi (Mrafizeldi), retrieved from https://commons.wikimedia.org/wiki/File:Responsive_Web_Design_for_Desktop,_Notebook,_Tablet_and_Mobile_Phone.png, licensed and made available under CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0/deed.en))

Responsive web apps are a much stronger application type with clear benefits to both the developers and the end users. Maintaining a single code base over time and automatically serving any screen size or resolution are clear cost-efficient software development methods.

New types of digital platforms such as foldable smartphones and home devices, such as Google Hub and Amazon Echo Show, have also entered the market; such applications need to be updated to ensure a continuous user journey across all platforms.

In a nutshell, here is a list of the building blocks of a solid responsive web design (RWD) test plan that both developers and test engineers should execute continuously:

Compatibility testing across the most relevant desktop browsers, OS versions, and mobile devicesVisual testing coverage across different layouts, screen sizes, resolutions, and languages to ensure the proper display of all graphical elements on these platformsThe end-to-end functional testing of all business flows, links, forms, and other web UI dependenciesAccessibility of the pages across all different platformsClient-side performance testingLoad testing at peak levels and normal onesTesting across different environment conditions (both web and mobile), including networks, working with sensors, incoming events, location-aware events, and more

PWAs

PWAs are one of the most advanced web application types with unique characteristics. Initially developed and led by Google, these application types have been adopted by all the other browser vendors, including Apple, Microsoft, and Mozilla. PWAs are those applications that are built on top of the responsive web app code base, allowing mobile users to install a web link on their Android and iOS devices. Following this, they can interact with these apps offline through different sensors with access to mobile OS functions such as the contact list, camera, location, and more:

Figure 1.4 – PWA icons on a mobile device (Originally titled "Progressive web apps on my home screen." Created by Jeremy Keith, retrieved from https://www.flickr.com/photos/adactio/42535353742, and licensed and made available under CC BY 2.0 (https://creativecommons.org/licenses/by/2.0/))

A PWA can be installed through a link on any mobile iOS or Android device, as well as on Windows hybrid laptops such as Microsoft Surface. Once they are installed, the user can launch them from their mobile device home screen and enjoy the unique features of the app, which are attributed to the ServiceWorker component that is built into each PWA. In the preceding screenshot, the Twitter Lite icon is the PWA application shortcut that was installed from the web browser on the mobile device.

Service Workers

Service workers are scripts that run in the background of a user's browser, enabling web application developers to add features such as push notifications, offline caching, mobile device sensor engagement, and a proxy that can handle various network requests from your web application. PWAs utilize service workers to enrich web applications running on mobile devices.

PWAs offer users from a single code base the ability to consume a web application on any desktop screen or mobile device screen with the additional features of offline caching, push notifications, sensor support (such as location, camera, and audio), and contact list access. With such reach supported capabilities, web application developers can deploy their apps easily, immediately, and bypass the mobile application stores.

Google and other browser vendors provide tools to validate the PWAs via their browser developer tool capabilities that are available from within the browser, as well as other guidelines and recommended practices. Developers can generate MANIFEST.MF files and JavaScript service worker scripts, which will be added to their web applications. Many enterprise web applications (https://www.pwastats.com/) across market verticals such as Instagram, Lyft, Twitter, eBay, and others, have already adopted this technology and are seeing many benefits daily. As the leader behind these types of applications, Google has created a great baseline (https://web.dev/progressive-web-apps/) and checklist for complying with the PWA requirements.

The building blocks of a PWA test plan include those of the solid RWD that were mentioned earlier, along with the following PWA-specific scenarios:

The validation of PWA manifests file correctness (pointing to the home URL, theme, icon, and more).The validation of the PWA service workers, which comprises critical components of the PWA application, includes registering for push notifications, caching abilities, and more.PWA installation and functionality across the platform and in parallel with the native applications.PWAs provide a custom offline page to serve users when they are offline.PWAs work with any input type such as a mouse, keyboard, stylus, or touch.PWAs work fine with all mobile device sensors such as location services, audio, camera, and more.PWAs should be tested against all third-party dependencies such as social media integrations (for instance, Facebook and LinkedIn), other APIs, analytics services, and more.The PWA testing of security, privacy policies, and permissions of the app to adhere to Apple and Google requirements.

As you might have gathered, this is a superset of the pillars of an RWD plan with additional PWA-specific testing considerations.

The following code snippet demonstrates a basic service worker registration in JavaScript as part of building the foundation of a PWA application:

If ('serviceWorker' in navigator) {

window.addEventListener('load',function(){

navigator.serviceWorker.regisdter('/sw.js').then(function(

  registration) {

//Registration was successful

console.log('ServiceWorker registration with scope:'

             ,registration.scope);

} function(err){

//registration failed ☹

console.log('ServiceWorker registration failed:',err);

});

});

Now that we've established the main web application types that are available for application developers, let's go through the key testing types that need to be considered upon each web application release.

Testing types for web applications

Software testing consists of various types: functional, API, integration, non-functional, unit, accessibility, and ad hoc exploratory testing. In this chapter, we will only discuss the high-level functional and non-functional testing types, while later in the book, we will also cover API testing and other types of testing as part of the specific test automation framework overview. Each of these types can be divided within the traditional testing pyramid and scoped based on whether there is a major release or a small hotfix release on the market.

In this section, we will highlight the key testing considerations across the previously mentioned types as they relate to modern web applications.

With web applications that are intended to run on any kind of desktop and mobile OS and device, covering all angles of the app is crucial to ensure a top-notch user experience.

Web applications are based on continuous interactions between components, UIs (the presentation layer), databases, microservices that communicate through an API gateway with other components, servers, various APIs such as payment, authentications, business workflows (the business layer), and more.

Testing these types of applications that have multiple layers of architecture, as identified earlier, is a challenging task, especially in an Agile and DevOps reality. Multiple personas take part in the software development life cycle, different code changes (that is, pull requests) are submitted many times a day, and this ought to be properly classified and tested.

Functional testing of web applications

Let's go through the key areas of the functional testing category of web applications. Bear in mind that such testing scenarios can be broken into different types of testing, including sanity, regression, smoke, integration, and usability testing by the customer. The scope of the testing suite should be determined by the phase in the software development life cycle (SDLC), the changes within the software iteration, and the defect history of your web application (that is, stability and reliability).

The following list offers a few suggested testing pillars to consider as part of your web app testing plans. Whether you validate the following scenarios through manual testing or automation, these are the fundamental pillars to ensure that your web apps work well across the entire user journey on your website:

The website links across the entire website should work fine, including the following:Navigation linksSocial media linksMailTo linksWebsite forms to test for relevant pages such as registration forms and order forms:Form field testing (positive/negative inputs)The verification of mandatory filled fieldsThe submission of forms across all platforms (mobile/desktop)Testing web application policies regarding cookies:Cookies are deleted when the web cache is clearedBusiness flow verification of the entire user flow within the website:All internal links and user journeys are workingUI and layout testingLocalization testing The compatibility of the website across all screen sizes and resolutionsUsability and user experience testing

The non-functional testing of web applications

Complementing functional testing with non-functional testing is imperative for the quality of your web application. At the end of the day, it does not really matter if your app fails in production either because of a functional crash or due to an availability issue due to load-related defects.

Including all types of testing within continuous integration (CI) jobs makes all the difference between a high-performing Agile team and a slow one. Such testing types should include both functional and non-functional tests that are running through automation frameworks upon any code changes.

When covering non-functional testing activities, typically, teams should consider security testing (both static and dynamic), performance and load testing, and accessibility. In some practices, teams might consider accessibility as a functional testing type, but regardless of the bucket that these testing types fit, they are all important. And executing as many of them that bring value is part of the definition of a ready and high-quality web application – if they all pass of course 😊.

Security testing

Security testing involves the following:

Ensuring authorized access to secure pages is keptPreventing users from downloading restricted files without appropriate access and authentication Terminating user inactivity sessions automaticallyRedirecting a website to encrypted SSL pages, upon the use of SSL certificatesAdopting industry-proven tests such as OWASP Top 10, CWE, CERT, and othersIncluding code quality standards such as JSLint within SAST and DAST (https://www.jslint.com/)

Performance and load testing

Performance and load testing involve the following:

Measuring against benchmarks and KPI web application response times according to different network conditions (web and mobile)Load testing your web application to determine its behavior under normal (single-user performance) and peak loads (millions of virtual users)