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

Getting started with Cypress

As explained in Chapter 3, Top Web Test Automation Frameworks, to get started with the Cypress (https://www.cypress.io/) framework, you need to install the node package through the following command line:

npm install cypress -D 

After the installation is complete, you can use both the Cypress GUI and the IDE (in our case, we will use Visual Studio Code) to run your Cypress tests.

Launching the Cypress GUI is done by running the following command:

npx cypress open

The Cypress GUI

After launching the Cypress GUI using the preceding command, you will be presented with three windows:

  • Tests: This gives an overview of scripts and execution. In this window, you can either launch a single JavaScript or TypeScript test against any of your local browsers.
  • Runs: In this window, a user can log in to the dashboard and run tests in parallel, identify test flakiness and debug failures, manage multiple users and organizations, integrate...