Share E-Book

A Frontend Web Developer’s Guide to Testing Explore leading web test automation frameworks and their future driven by low-code… (Eran Kinsbruner)(Z-Library)

Author

Framework
Language English

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 crossbrowser 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.

Format PDF
Size 5.5 MB
16
Views
0
Downloads
0.00
Total Donations
(First 20 pages)

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

Page 1
(This page has no text content)
Page 2
A Frontend Web Developer's Guide to Testing Explore leading web test automation frameworks and their future driven by low-code and AI Eran Kinsbruner BIRMINGHAM—MUMBAI
Page 3
A Frontend Web Developer's Guide to Testing Copyright © 2022 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. Group Product Manager: Pavan Ramchandani Publishing Product Manager: Bhavya Rao Senior Editor: Mark D'Souza Content Development Editor: Feza Shaikh Technical Editor: Saurabh Kadave Copy Editor: Safis Editing Project Coordinator: Manthan Patel Proofreader: Safis Editing Indexer: Tejal Daruwale Soni Production Designer: Roshan Kawale Marketing Coordinator: Anamika Singh First published: April 2022 Production reference: 1280322 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-80323-831-9 www.packt.com
Page 4
This book, which is the fourth of my career, is dedicated to my mother, Rodica Kinsbruner, and my supportive family: my wife, Shikma Kinsbruner, and my two sons, Ariel and Yahly. – Eran Kinsbruner
Page 5
Foreword I have known and worked with Eran Kinsbruner for more than 3 years. Eran is a software testing expert in web and mobile applications. He contributes to the community through his speaking engagements and content creation as part of his role as Chief Evangelist at Perfecto by Perforce. As web applications have become so complex in recent years, test automation needed to advance as well. In this book, Eran picked the top leading open source frameworks that practitioners will find useful in maturing their test automation coverage. As one of the main contributors to the Cypress testing framework, I can confidently state that by using the insights covered in this book for network control testing, API testing, functional and accessibility testing, visual testing, and more, frontend web application developers can learn a lot and ensure that they are building better apps that can function and perform well across all leading web browsers. Beyond getting familiarity and getting started with the top testing JavaScript frameworks, you will also learn how to build a solid testing strategy for your web application from the ground up. In A Frontend Web Developer's Guide to Testing, Eran provides a complete and informative guide to both newcomers as well as veteran frontend web application developers around building test automation that works, scales, and provides value to the business. Lastly, the book is filled with great and simple-to-use code examples, references, and visuals that can help practitioners ramp up quickly with their testing activities. Gleb Bahmutov Senior Director of Engineering at Mercari US Previously VP of Engineering at Cypress.IO
Page 6
Contributors About the author Eran Kinsbruner is a bestselling author, chief evangelist, and senior director at Perforce Software. He was a DevOps evangelist of the year finalist in 2021 for DevOps.com. His published books include the 2016 Amazon bestseller The Digital Quality Handbook, Continuous Testing for DevOps Professionals, and Accelerating Software Quality – ML and AI in the Age of DevOps, which was named the "best new software testing book" by Book Authority. Eran has many years of experience in development and testing at companies such as Sun Microsystems, Neustar, Texas Instruments, and General Electric. Eran is a patent-holding inventor and is active in the software development and testing community. He can be found across social media (LinkedIn – https://www.linkedin.com/ in/erankinsbruner/, Twitter - https://twitter.com/ek121268, Medium Articles – https://ek121268.medium.com/) and has his own blog, http:// continuoustesting.dev.
Page 7
About the reviewer Bruno Bosshard is an experienced software quality assurance manager and test automation architect at Pepgo Pty Ltd, based in Sydney, Australia. He has experience in test management, functional testing, and performance testing, working for clients in Europe, the Middle East, and Australia, both on a management level, such as developing test strategies, plans, processes, and templates, as well as on a practical, hands-on level, including development and implementation of automated test frameworks in Agile continuous integration environments. He is a test automation specialist with good development and DevOps knowledge who knows how to implement successful test automation to achieve real business value. Bruno can be contacted via LinkedIn. 
Page 8
Table of Contents Preface Part 1 – Frontend Web Testing Overview 1 Cross-Browser Testing Methodologies An overview of the web landscape 4 Understanding web application types 6 Traditional web applications 6 Responsive web applications 8 PWAs 9 Testing types for web applications 12 Functional testing of web applications 12 The non-functional testing of web applications 13 Understanding headless and headed browsers within app development and testing 15 Choosing between headed browsers and headless browsers 16 Headless browser testing frameworks 19 Summary 22 2 Challenges Faced by Frontend Web Application Developers Web application development challenges 24 Quality vs velocity 26 Coverage challenges for web application developers 27 Non-functional challenges in web application development 32 Performance challenges 32 Accessibility challenges 33 Compliance challenges for web applications 35 Summary 38
Page 9
viii Table of Contents 3 Top Web Test Automation Frameworks An overview of the web testing market 40 Getting started with the Selenium WebDriver framework 43 Setting up Selenium WebDriver 43 Selenium Grid 46 Getting started with the Cypress framework 49 Important features of Cypress 52 Getting started with the Google Puppeteer framework 55 Getting started with the Microsoft Playwright framework 58 Summary 60 4 Matching Personas and Use Cases to Testing Frameworks Technical requirements 64 Web testing personas overview 64 Use cases and considerations for picking a solid test automation framework 66 Community considerations 67 Scale testing capabilities 67 Tool stack integrations and plugins 67 Ease of use and adoption 68 Reusability and maintainability 68 Reporting, test analysis, and intelligence 69 Testing automation evaluation matrix 70 Summary 75 5 Introducing the Leading Frontend Web Development Frameworks Technical requirements 78 Introduction to the leading web development frameworks 78 Guidelines for picking a web development framework 80 ReactJS 81 AngularJS 85 Vue.js 87 Ember.js 89 Svelte 92 Summary 94
Page 10
Table of Contents ix Part 2 – Continuous Testing Strategy for Web Application Developers 6 Map the Pillars of a Dev Testing Strategy for Web Applications The key pillars of a web application testing plan and strategy 98 Know your target users 99 Building a test plan 99 Prep your tool stack and environments 100 Set quality criteria and objectives 100 Build a timeline and a schedule 101 Execute, monitor, measure, and document 101 Measuring the success of your continuous testing strategy 102 A case study – a real-life web application testing strategy 104 Summary 106 7 Core Capabilities of the Leading JavaScript Test Automation Frameworks Comparing the test automation framework capabilities 108 Visual testing 108 API testing 112 Supported development languages 115 Mobile device testing 115 Performance testing 118 Accessibility testing 121 Network control testing and mock services 123 Working with elements 125 A re-evaluation of test automation frameworks due to compelling events 131 Summary 132 8 Measuring Test Coverage of the Web Application Introduction to code coverage and test coverage 134 Test coverage 134 Code coverage 135 JavaScript code coverage tools for web application developers 137
Page 11
x Table of Contents Measuring JavaScript code coverage using Istanbul and Cypress 138 Complementing code coverage with test coverage 142 Summary 143 Part 3 – Frontend JavaScript Web Test Automation Framework Guides 9 Working with the Selenium Framework Technical requirements 148 Understanding the Selenium framework and its components 148 Selenium WebDriver 148 The advanced features of Selenium 151 Various testing methods with Selenium 156 The future of the Selenium framework 162 Summary 163 10 Working with the Cypress Framework Technical requirements 166 Getting started with Cypress 166 The Cypress GUI 166 Cypress IDE and command-line executions 169 Cypress's advanced test automation capabilities 173 Cypress test retries 173 Using stubs, spies, and clocks with Cypress 174 Running Cypress within CI 177 Component testing 178 Cypress Studio 180 Cypress plugins 182 Cypress API testing 184 The future of the Cypress framework 186 Summary 187 11 Working with the Playwright Framework Technical requirements 190 Getting started with Playwright 190 Playwright's advanced test automation capabilities 194 Playwright Inspector 194
Page 12
Table of Contents xi Emulating mobile devices 196 Playwright test annotations 197 Playwright API testing 199 Playwright assertions 201 Playwright network mocking 202 Playwright POM (Page Object Model) 203 Playwright test reporting 203 Playwright test runners 204 Playwright trace viewer 205 Playwright advanced configurations 206 Playwright integration with CI 210 The future of the Playwright framework 211 Summary 213 12 Working with the Puppeteer Framework Technical requirements 216 Getting started with Puppeteer 216 Learning about Puppeteer's advanced test automation capabilities 221 Puppeteer namespaces 221 Puppeteer working with elements 223 Puppeteer load test option 226 Puppeteer and Cucumber BDD 227 Puppeteer accessibility testing 229 Puppeteer web app tracing 230 Puppeteer for API testing 231 Puppeteer with Google DevTools 231 Puppeteer and CodeceptJS integration 233 Puppeteer testing within CI 235 The future of the Puppeteer framework 237 Summary 238 13 Complementing Code-Based Testing with Low-Code Test Automation Fundamental features of low- code/codeless testing tools 240 Codeless tool overview within the open source landscape 243 Open source codeless tool lineup 243 Leading commercial codeless testing tools for web applications 251 Perfecto scriptless web overview 252 Testim codeless web tool overview 255 Mabl codeless web testing tool overview 259 Summary 265
Page 13
xii Table of Contents 14 Wrapping Up Major takeaways from the book 268 Useful references and bookmarks 269 Cypress framework-specific 269 Playwright framework-specific 270 Selenium framework-specific 270 Puppeteer framework-specific 270 Index Other Books You May Enjoy
Page 14
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.
Page 15
xiv Preface 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.
Page 16
Preface xv 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.
Page 17
xvi Preface 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", () => {
Page 18
Preface xvii 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 customercare@packtpub.com 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.
Page 19
xviii Preface 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 copyright@packt.com 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.
Page 20
Web technology has significantly advanced over the past few years. With mature web apps in the form of responsive and progressive apps, React, and others, developers are being challenged more than ever to ensure the continuous quality of web apps, regardless of which platforms they are being consumed on (mobile, desktop, or both). In the first part of this book, you will be able to catch up on all the important advancements within web technologies, the challenges in building a top-notch web app, the available testing solutions that can help overcome some of these challenges within a development team, and the main differences between the leading web development frameworks that can impact testing strategies. In this part, we will cover the following chapters: • Chapter 1, Cross-Browser Testing Methodologies • Chapter 2, Challenges Faced by Fronted Web Application Developers • Chapter 3, Top Web Test Automation Frameworks • Chapter 4, Matching Personas and Use Cases to Testing Frameworks • Chapter 5, Introducing the Leading Frontend Web Development Frameworks Part 1 – Frontend Web Testing Overview
The above is a preview of the first 20 pages. Register to read the complete e-book.

Recommended for You

Loading recommended books...
Failed to load, please try again later

Tip the Site

Scan the WeChat Pay or Alipay code to tip. No login required.

WeChat Pay
Alipay
Back to List