Book Image

A Frontend Web Developer’s Guide to Testing

By : Eran Kinsbruner
3 (1)
Book Image

A Frontend Web Developer’s Guide to Testing

3 (1)
By: Eran Kinsbruner

Overview of this book

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.
Table of Contents (19 chapters)
1
Part 1 – Frontend Web Testing Overview
7
Part 2 – Continuous Testing Strategy for Web Application Developers
11
Part 3 – Frontend JavaScript Web Test Automation Framework Guides

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 links
    • Social media links
    • MailTo links
  • Website forms to test for relevant pages such as registration forms and order forms:
    • Form field testing (positive/negative inputs)
    • The verification of mandatory filled fields
    • The submission of forms across all platforms (mobile/desktop)
  • Testing web application policies regarding cookies:
    • Cookies are deleted when the web cache is cleared
  • Business flow verification of the entire user flow within the website:
    • All internal links and user journeys are working
    • UI and layout testing
    • Localization testing
    • The compatibility of the website across all screen sizes and resolutions
    • Usability 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 kept
  • Preventing users from downloading restricted files without appropriate access and authentication
  • Terminating user inactivity sessions automatically
  • Redirecting a website to encrypted SSL pages, upon the use of SSL certificates
  • Adopting industry-proven tests such as OWASP Top 10, CWE, CERT, and others
  • Including 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)
  • Stress testing your web app to determine its breakpoint when it is pushed to beyond normal load at peak time
  • Determining how the site recovers from crashes or availability issues

Accessibility testing

Accessibility testing involves the following:

  • Covering the most common accessibility rules: WCAG, ADA, 508, and, if in Canada, ACA
  • Executing accessibility tests across different platforms and languages (web and mobile)
  • Ensuring proper accessibility IDs (web elements) for ease of test automation

As mentioned earlier, the combination of exploratory testing and automated testing of both the functional and non-functional areas of your web application should be included in every organization's test plan. Additionally, this should be continuously maintained to adapt to recent web application changes, defects coming from production, platform changes in the market such as new OS versions or mobile devices, and changes to industry standards such as accessibility and new security rules.

Later in this book, we will cover specific examples and tools to help cover most of the testing types recommended in this section.

After covering the main testing types that are applicable for web applications, in the next section, we will focus on the main differences between using headed browsers and headless browsers throughout the development and testing phases.