Explore leading web test automation frameworks, such as Selenium, Cypress, Puppeteer, and Playwright. Learn essential concepts of web testing and discover how integrate these frameworks into your frontend development workflow.

A Frontend Web Developer's Guide to Testing

JavaScript makes your pages dance, move and interact. For a front-end developer, it’s a fundamental skill.

JavaScript

Tools & Libraries

Preface

Cross-Browser Testing Methodologies

Frontend web application developers are tasked with a tough challenge: ensuring that web apps work and perform exceptionally well across all digital channels (web and mobile). In an era when a new desktop web browser version is released into the market every month, with numerous mobile smartphones and OS versions to support, this task is quite hard. Frontend web developers should address both the quality and velocity, as well as the stability of their apps, continuously.

Challenges Faced by Frontend Web Application Developers

When it comes to end-to-end test automation frameworks, frontend developers have a variety of choices to pick from. The open source community continues to innovate, as well as leverage, existing technologies to enhance testing frameworks and offer more coverage and depth to practitioners.

Top Web Test Automation Frameworks

Choosing a test automation framework is a fundamental aspect of the software development life cycle. A test automation framework serves so many different objectives and, as such, must be suited to cover different needs of both developers as well as test engineers. Specifically, in web application testing, the variety of frameworks that are available is huge; hence, there needs to be a prescriptive methodology that considers all the relevant pillars, as well as meeting the current and future-looking needs of users. Within a typical web application software release, there are a couple of personas that contribute to the overall quality of the product, including frontend developers and test automation engineers (also known as SDETs – software developer engineers in testing ). A test automation framework and, in many cases, a combination of more than a single framework ought to match these personas' needs, skill sets, and expected velocity around scale and feedback loops.

Matching Personas and Use Cases to Testing Frameworks

In previous chapters, we looked at the four leading frontend web test automation frameworks (Playwright, Puppeteer, Selenium, and Cypress), and outlined the key testing types, which include functional, non-functional, API, and accessibility. We also looked at some of the key testing objectives that developers and SDET s ( software developer engineer in testing ) consider when choosing a test automation framework.

Introducing the Leading Frontend Web Development Frameworks

Part 2 – Continuous Testing Strategy for Web Application Developers

Map the Pillars of a Dev Testing Strategy for Web Applications

Earlier in the book in Chapter 4 , Matching Personas and Use Cases to Testing Frameworks , we provided a table that broke down all the critical capabilities across the top four test automation frameworks – Selenium, Cypress, Playwright, and Puppeteer. In this chapter, we will connect these capabilities and provide per each capability the recommended test framework to go with it. When combining multiple capabilities with the recommended frameworks, frontend developers can use this chapter to make a data-driven decision.

Core Capabilities of the Leading JavaScript Test Automation Frameworks

How do you know that you've tested your web application enough? There are many metrics and measures for code quality, including defect density, user stories covered, and other "black-box" measurements. However, there is also a complementary metric that has been on the market for a long while and is more of a "white-box" metric, which is code coverage. In this chapter, you will learn 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 ).

Measuring Test Coverage of the Web Application

Part 3 – Frontend JavaScript Web Test Automation Framework Guides

Working with the Selenium Framework

As highlighted in Chapter 3 , Top Web Test Automation Frameworks , Cypress is the fastest-growing cross-browser and developer-friendly test automation framework. Focused on JavaScript and TypeScript development languages, the framework offers an end-to-end web application testing ability. While Cypress is an open source framework, as opposed to Selenium and other featured frameworks in this book, Cypress also has a paid functionality through its dashboard (https://docs.cypress.io/guides/dashboard/introduction#Features) and reporting platform. In this chapter, you will get a technical overview of the framework with a focus on its advanced capabilities, including time travel, component testing, network control, API testing, supported plugins, cloud testing, and support for Behavior-Driven Development ( BDD ) testing.

Working with the Cypress Framework

As highlighted in Chapter 3 , Top Web Test Automation Frameworks , Playwright is among the newest and most modern frontend test automation frameworks. Being built on top of CDP (the Chrome Debugger Protocol) allows the framework to acquire the deep coverage and testing abilities of any web application across all browser types. With CDP ( https://chromedevtools.github.io/devtools-protocol/ ), frontend web application developers can better inspect their web applications, debug them, cover the network and performance aspects of the app, scan the app for accessibility and PWA compliance, and much more besides. As opposed to the Cypress and Google Puppeteer frameworks, which only come with JavaScript and TypeScript language support, Playwright comes with more language binding support, including Python, Java, and .NET.

Working with the Playwright Framework

As highlighted in Chapter 3 , Top Web Test Automation Frameworks , Google Puppeteer is the baseline framework that was built by the Microsoft team that is now responsible for Playwright. Both frameworks are node libraries based on the CDP, and that obviously allows the Puppeteer framework to acquire deep coverage and testing abilities for any web application. Unlike the Playwright framework, which supports most web browsers as well as other language bindings, Google's Puppeteer framework only works on Chromium -based browsers and only supports JavaScript.

Working with the Puppeteer Framework

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 base their record-and-playback abilities with self-healing machine learning ( ML )-driven features to provide an additional layer of test automation coverage. In this chapter, we will learn about the available options in the market, the relevant places and use cases to use such tools within a development pipeline, and caveats or pitfalls to be aware of.

Complementing Code-Based Testing with Low-Code Test Automation

In this very thorough book that is aimed mainly at web application frontend developers, we've provided a complete compilation of all testing aspects that are important to keep web applications at high quality and performance. The book was divided into three parts, each building upon the ones before it.

A Frontend Web Developer's Guide to Testing

Details

Description

Creator

Eran Kinsbruner

Content

Reviews

Frequently Asked Questions

A Frontend Web Developer's Guide to Testing