Introduction to the Course

Overview

Testing web applications during a sprint poses a challenge for front-end web app developers, which can be overcome by harnessing the power of new, open-source cross-browser test automation frameworks. This course 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 front-end development workflow. Throughout the course, 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.

Who this course is for?

This course is designed for front-end developers working with popular frameworks like Vue or React who want to develop testing skills through learning the essentials of test automation. However, before getting started, make sure you have the following prerequisites:

• Intermediate-level understanding of JavaScript.

• Familiarity with front-end development concepts and practices.

What will we cover?

We will explore the following essential topics in web application development and testing:

• Cross-browser testing methodologies: This covers the most advanced web technologies and web application types you’ll come across, including responsive and progressive types. It’s specifically designed to cover the main trends that typically impact web application developers, along with the various testing types that are relevant to such applications.

• Challenges faced by front-end web application developers: This covers the key challenges modern web application developers face and their root causes. It’s specifically designed to cover the constant debate about velocity, quality, and key nonfunctional challenges that are a pain for developers.

• Top web test automation frameworks: This 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.

• Matching personas and use cases to testing frameworks: This 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.

• Introducing the leading front-end web development frameworks: This 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. It also covers the web development frameworks used to build these apps.

• Map the pillars of a dev testing strategy for web applications: This 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 front-end developers key metrics that can be used to monitor and measure the success of the strategy.

• Core capabilities of the leading JavaScript test automation frameworks: This 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.

• Measuring test coverage of the web application: This 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 course (Selenium, Cypress, Playwright, and Puppeteer).

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

• Working with the Cypress framework: This 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.

• Working with the Playwright framework: This provides a technical overview of the framework with a focus on the advanced capabilities of the Playwright, such as API testing, network control, visual testing, the retrying mechanism, Inspector, and the code generator tool.

• Working with the Puppeteer framework: This provides a technical overview of the framework with a focus on its 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.

• Complementing code-based testing with low-code test automation: This discusses how, while the open-source community offers a wide range of coding test frameworks, 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 section, 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.

• Wrapping up: This concludes the course with a set of references, additional blogs, and websites to bookmark to expand on the content offered in this course.

Learning outcomes

By the end of this course, you’ll be able to:

• Understand how to choose the most suitable framework for your project requirements.

• Gain the ability to create an initial test automation suite using JavaScript.

• Learn how to achieve fast feedback when making code changes through test automation.

• Improve the reliability of the test automation processes.

Let’s get started!