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 page for 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.