(This page has no text content)
Practical Playwright Test Next-Generation Web Testing and Automation Jean-François Greffier
Practical Playwright Test: Next-Generation Web Testing and Automation ISBN-13 (pbk): 979-8-8688-2159-2 ISBN-13 (electronic): 979-8-8688-2160-8 https://doi.org/10.1007/979-8-8688-2160-8 Copyright © 2026 by Jean-François Greffier This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Anandadeep Roy Project Manager: Jessica Vakili Cover designed by eStudioCalamar Cover image designed by Holger Langmaier on pixabay Distributed to the book trade worldwide by Springer Science+Business Media New York, 1 New York Plaza, New York, NY 10004. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a Delaware LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail booktranslations@springernature.com; for reprint, paperback, or audio rights, please e-mail bookpermissions@springernature.com. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub. For more detailed information, please visit https://www.apress.com/gp/services/ source-code. If disposing of this product, please recycle the paper Jean-François Greffier Rennes, France
Life is a series of obstacles and challenges best engaged through assiduous study and frequent jumps into uncertainty. Anything else is boring. —American McGee
v Table of Contents About the Author ��������������������������������������������������������������������������������������������������� xiii About the Technical Reviewer ���������������������������������������������������������������������������������xv Acknowledgments �������������������������������������������������������������������������������������������������xvii Introduction ������������������������������������������������������������������������������������������������������������xix Chapter 1: Getting Started ���������������������������������������������������������������������������������������� 1 Introducing Playwright ������������������������������������������������������������������������������������������������������������������ 1 Why Choose Playwright ����������������������������������������������������������������������������������������������������������� 1 Architecture ����������������������������������������������������������������������������������������������������������������������������� 3 Browsers ��������������������������������������������������������������������������������������������������������������������������������� 3 Prepare Your Environment ������������������������������������������������������������������������������������������������������������ 5 Prerequisites ��������������������������������������������������������������������������������������������������������������������������� 5 TL;DR ��������������������������������������������������������������������������������������������������������������������������������������� 8 npm, yarn, pnpm���������������������������������������������������������������������������������������������������������������������� 8 Check the Prerequisites ���������������������������������������������������������������������������������������������������������� 9 Your First Test ������������������������������������������������������������������������������������������������������������������������������� 9 Develop Faster with Your Favorite IDE ���������������������������������������������������������������������������������������� 12 Playwright Test for VS Code ��������������������������������������������������������������������������������������������������� 12 JetBrains Test Automation Plugin ������������������������������������������������������������������������������������������ 13 Using Another IDE? ���������������������������������������������������������������������������������������������������������������� 13 Useful Resources to Get You Started ������������������������������������������������������������������������������������������� 14
vi Chapter 2: Write Tests Efficiently ��������������������������������������������������������������������������� 17 Playwright Test Building Blocks �������������������������������������������������������������������������������������������������� 17 Common Built-In Fixtures ������������������������������������������������������������������������������������������������������ 18 Organizing Your Tests ������������������������������������������������������������������������������������������������������������ 20 Actions ���������������������������������������������������������������������������������������������������������������������������������������� 26 Basic Interactions ������������������������������������������������������������������������������������������������������������������ 27 Forms ������������������������������������������������������������������������������������������������������������������������������������ 28 Advanced Actions ������������������������������������������������������������������������������������������������������������������ 31 Get Rid of Overlays ���������������������������������������������������������������������������������������������������������������� 33 Assertions ����������������������������������������������������������������������������������������������������������������������������������� 34 Generic Assertions ����������������������������������������������������������������������������������������������������������������� 34 Web-First Assertions ������������������������������������������������������������������������������������������������������������� 36 Snapshots ������������������������������������������������������������������������������������������������������������������������������ 38 Visual Regression Testing ������������������������������������������������������������������������������������������������������ 38 Aria Snapshots ���������������������������������������������������������������������������������������������������������������������� 40 Write Better Assertions ���������������������������������������������������������������������������������������������������������� 43 async/await and Promise ������������������������������������������������������������������������������������������������������������ 44 Common Pitfalls �������������������������������������������������������������������������������������������������������������������� 45 Advanced Patterns with Promises ����������������������������������������������������������������������������������������� 46 Configure Playwright Test ����������������������������������������������������������������������������������������������������������� 47 Configuration File ������������������������������������������������������������������������������������������������������������������ 47 Using Environment Variables for More Flexibility ������������������������������������������������������������������ 51 Overrides in Test Files ����������������������������������������������������������������������������������������������������������� 52 Command Line Interface ������������������������������������������������������������������������������������������������������� 52 Write Tests Efficiently ������������������������������������������������������������������������������������������������������������������ 53 Codegen �������������������������������������������������������������������������������������������������������������������������������� 54 UI Mode ��������������������������������������������������������������������������������������������������������������������������������� 56 A Great Workflow to Write and Debug Tests �������������������������������������������������������������������������� 56 Summary������������������������������������������������������������������������������������������������������������������������������������� 58 Table of ConTenTs
vii Chapter 3: Locators ������������������������������������������������������������������������������������������������ 59 CSS and XPath ���������������������������������������������������������������������������������������������������������������������������� 59 CSS ���������������������������������������������������������������������������������������������������������������������������������������� 59 XPath ������������������������������������������������������������������������������������������������������������������������������������� 61 Legacy and Experimental Locators���������������������������������������������������������������������������������������� 61 Testing Library Queries ��������������������������������������������������������������������������������������������������������������� 62 getByText ������������������������������������������������������������������������������������������������������������������������������� 64 getByRole ������������������������������������������������������������������������������������������������������������������������������ 65 getByLabel ����������������������������������������������������������������������������������������������������������������������������� 68 getByTestId ���������������������������������������������������������������������������������������������������������������������������� 69 Advanced Patterns ���������������������������������������������������������������������������������������������������������������������� 71 Working with iframes ������������������������������������������������������������������������������������������������������������ 71 Filtering Locators ������������������������������������������������������������������������������������������������������������������� 72 Chaining Locators ������������������������������������������������������������������������������������������������������������������ 74 Craft Better Apps with Semantic HTML ��������������������������������������������������������������������������������������� 75 Locators Good Practices ������������������������������������������������������������������������������������������������������������� 77 Locators Tier List ������������������������������������������������������������������������������������������������������������������� 77 Dos and Don’ts ���������������������������������������������������������������������������������������������������������������������� 78 Summary������������������������������������������������������������������������������������������������������������������������������������� 80 Chapter 4: Continuous Integration �������������������������������������������������������������������������� 81 Why Adding Playwright to Your CI? ��������������������������������������������������������������������������������������������� 81 Our Pipeline with Playwright Test and GitHub ����������������������������������������������������������������������������� 82 Prerequisites ������������������������������������������������������������������������������������������������������������������������� 82 Install Dependencies ������������������������������������������������������������������������������������������������������������� 83 Install Playwright Browsers ��������������������������������������������������������������������������������������������������� 84 Run the Tests ������������������������������������������������������������������������������������������������������������������������� 85 Run GitHub Actions Locally with act �������������������������������������������������������������������������������������� 86 Other CI Solutions ����������������������������������������������������������������������������������������������������������������������� 88 Docker and Playwright ���������������������������������������������������������������������������������������������������������������� 89 Docker ����������������������������������������������������������������������������������������������������������������������������������� 89 Table of ConTenTs
viii Use Official Docker Image with GitHub Actions ��������������������������������������������������������������������� 90 Taylor Your Own Docker Image ���������������������������������������������������������������������������������������������� 91 Gotcha: Visual Regression Testing and CI ����������������������������������������������������������������������������������� 92 Advanced Pipeline ����������������������������������������������������������������������������������������������������������������������� 94 Adjusting Parallelism and Timeout ���������������������������������������������������������������������������������������� 94 Retrieve Reports As Artifacts ������������������������������������������������������������������������������������������������� 95 Reporting ������������������������������������������������������������������������������������������������������������������������������������ 96 Debugging Afterward with Logs, Reports, and Traces ���������������������������������������������������������������� 98 Make Sense of Logs �������������������������������������������������������������������������������������������������������������� 98 HTML Report ������������������������������������������������������������������������������������������������������������������������ 100 Time-Travel with Traces ������������������������������������������������������������������������������������������������������� 102 Run It on Your Machine �������������������������������������������������������������������������������������������������������� 105 Summary����������������������������������������������������������������������������������������������������������������������������������� 106 Chapter 5: Make It Fast ���������������������������������������������������������������������������������������� 107 Parallelism �������������������������������������������������������������������������������������������������������������������������������� 108 How Many Workers Should You Use? ���������������������������������������������������������������������������������� 108 Your Machine vs� a CI Agent ������������������������������������������������������������������������������������������������ 111 Understand the Different Parallelism Options ��������������������������������������������������������������������� 112 Sharding ������������������������������������������������������������������������������������������������������������������������������������ 114 Set It Up with GitHub ����������������������������������������������������������������������������������������������������������� 116 Reconstruct Reports ������������������������������������������������������������������������������������������������������������ 117 Save Time and Money in CI ������������������������������������������������������������������������������������������������������� 120 Optimize Your Application and Environment ������������������������������������������������������������������������ 120 Authentication ��������������������������������������������������������������������������������������������������������������������� 121 Leverage --only-changed Option ����������������������������������������������������������������������������������������� 123 Pushing the Envelope ���������������������������������������������������������������������������������������������������������� 124 Tests at Scale with Testing Services ����������������������������������������������������������������������������������������� 127 Microsoft Playwright Testing ����������������������������������������������������������������������������������������������� 128 Endform ������������������������������������������������������������������������������������������������������������������������������� 128 Summary����������������������������������������������������������������������������������������������������������������������������������� 129 Table of ConTenTs
ix Chapter 6: Extending Playwright Test������������������������������������������������������������������� 131 Custom expect �������������������������������������������������������������������������������������������������������������������������� 131 Custom expect Message ����������������������������������������������������������������������������������������������������� 131 Extend expect ���������������������������������������������������������������������������������������������������������������������� 132 Make Your Own CSS Matcher ���������������������������������������������������������������������������������������������� 133 Compose Your Matchers Collection ������������������������������������������������������������������������������������� 135 Reporters ���������������������������������������������������������������������������������������������������������������������������������� 137 Add Extra Information ���������������������������������������������������������������������������������������������������������� 137 Third-Party Reporters ���������������������������������������������������������������������������������������������������������� 141 Write Your Own �������������������������������������������������������������������������������������������������������������������� 142 Test Data ����������������������������������������������������������������������������������������������������������������������������������� 145 Faker for Inclusive, Realistic Data ��������������������������������������������������������������������������������������� 145 Define Test Cases in JSON or CSV ��������������������������������������������������������������������������������������� 148 Parametrize Tests ���������������������������������������������������������������������������������������������������������������� 149 Parametrize Projects with Test Options ������������������������������������������������������������������������������� 150 Summary����������������������������������������������������������������������������������������������������������������������������������� 152 Chapter 7: Fixtures Deep Dive ������������������������������������������������������������������������������ 153 Improve Your Tests with Fixtures ���������������������������������������������������������������������������������������������� 154 Your First Fixture ����������������������������������������������������������������������������������������������������������������� 157 Decoupling Setup and Test �������������������������������������������������������������������������������������������������� 159 Composition ������������������������������������������������������������������������������������������������������������������������� 163 Wrap-Up ������������������������������������������������������������������������������������������������������������������������������ 164 Page Object Model �������������������������������������������������������������������������������������������������������������������� 164 POM Class ��������������������������������������������������������������������������������������������������������������������������� 165 POM with Fixture ����������������������������������������������������������������������������������������������������������������� 167 More Fixtures Usages ��������������������������������������������������������������������������������������������������������������� 168 Injecting Test Data ��������������������������������������������������������������������������������������������������������������� 168 Automatic Fixtures �������������������������������������������������������������������������������������������������������������� 170 Test Options ������������������������������������������������������������������������������������������������������������������������� 171 Create Your Fixture Collection ��������������������������������������������������������������������������������������������������� 173 Keep One Custom Test ��������������������������������������������������������������������������������������������������������� 173 Table of ConTenTs
x Mix It with Third-Party ��������������������������������������������������������������������������������������������������������� 174 Organize Fixtures and Helpers �������������������������������������������������������������������������������������������� 174 DRY vs� WET ������������������������������������������������������������������������������������������������������������������������������ 175 Summary����������������������������������������������������������������������������������������������������������������������������������� 176 Chapter 8: Mocking and Emulation ���������������������������������������������������������������������� 177 Device Emulation ���������������������������������������������������������������������������������������������������������������������� 177 userAgent ���������������������������������������������������������������������������������������������������������������������������� 178 screen, viewport, deviceScaleFactor ����������������������������������������������������������������������������������� 179 Is This a Mobile? ������������������������������������������������������������������������������������������������������������������ 180 Usage ����������������������������������������������������������������������������������������������������������������������������������� 180 Mobile Testing ��������������������������������������������������������������������������������������������������������������������������� 182 Space and time ������������������������������������������������������������������������������������������������������������������������� 182 Locale ���������������������������������������������������������������������������������������������������������������������������������� 183 Timezone ����������������������������������������������������������������������������������������������������������������������������� 183 Clock API ������������������������������������������������������������������������������������������������������������������������������ 184 Permissions ������������������������������������������������������������������������������������������������������������������������� 187 Geolocation �������������������������������������������������������������������������������������������������������������������������� 188 Network ������������������������������������������������������������������������������������������������������������������������������������ 189 Route ����������������������������������������������������������������������������������������������������������������������������������� 189 Emulating a Slow Network �������������������������������������������������������������������������������������������������� 191 Record and Replay HAR ������������������������������������������������������������������������������������������������������� 193 Injecting JavaScript ������������������������������������������������������������������������������������������������������������������ 194 Chrome DevTools Protocol �������������������������������������������������������������������������������������������������������� 195 Using CDP to Slow Down the CPU ��������������������������������������������������������������������������������������� 196 Summary����������������������������������������������������������������������������������������������������������������������������������� 197 Chapter 9: Gain Confidence Thanks to Reliable Tests ������������������������������������������� 199 Built-In Reliability: Auto-Waiting, Retries, and Timeouts ����������������������������������������������������������� 199 Understanding Actions Auto-Waiting ����������������������������������������������������������������������������������� 200 Web-First Assertions ����������������������������������������������������������������������������������������������������������� 202 Fine-Tune Your Timeouts ����������������������������������������������������������������������������������������������������� 203 Test Retry ���������������������������������������������������������������������������������������������������������������������������� 204 Table of ConTenTs
xi Flakiness ����������������������������������������������������������������������������������������������������������������������������������� 206 How to Detect Flaky Tests ��������������������������������������������������������������������������������������������������� 207 Strategies to Fix Flaky Tests ������������������������������������������������������������������������������������������������ 212 Summary����������������������������������������������������������������������������������������������������������������������������������� 221 Chapter 10: Automation and More with Playwright ��������������������������������������������� 223 Playwright Library ��������������������������������������������������������������������������������������������������������������������� 223 Web Scraping ���������������������������������������������������������������������������������������������������������������������������� 225 Generating Artifacts: Screenshots, PDFs, Videos ���������������������������������������������������������������������� 228 Screenshots for Your Documentation ���������������������������������������������������������������������������������� 228 Recording Videos ����������������������������������������������������������������������������������������������������������������� 229 PDF Generation �������������������������������������������������������������������������������������������������������������������� 230 Monitoring with Playwright and Checkly ���������������������������������������������������������������������������������� 232 Peace of Mind ���������������������������������������������������������������������������������������������������������������������� 232 Use with Playwright ������������������������������������������������������������������������������������������������������������� 233 Benefits ������������������������������������������������������������������������������������������������������������������������������� 234 Summary����������������������������������������������������������������������������������������������������������������������������������� 235 Chapter 11: Beyond End-to-End Testing ��������������������������������������������������������������� 237 Behavior-Driven Development �������������������������������������������������������������������������������������������������� 237 Playwright-BDD ������������������������������������������������������������������������������������������������������������������� 238 Alternative: Approval Testing ����������������������������������������������������������������������������������������������� 239 REST API Testing ����������������������������������������������������������������������������������������������������������������������� 240 Your First GET ���������������������������������������������������������������������������������������������������������������������� 241 Simple Data Validation ��������������������������������������������������������������������������������������������������������� 242 Context Request ������������������������������������������������������������������������������������������������������������������ 245 Why Playwright for API Testing? ������������������������������������������������������������������������������������������ 245 Component Testing ������������������������������������������������������������������������������������������������������������������� 245 …with Playwright ��������������������������������������������������������������������������������������������������������������� 247 …with Playwright and Storybook ��������������������������������������������������������������������������������������� 252 Summary����������������������������������������������������������������������������������������������������������������������������������� 255 Table of ConTenTs
xii Chapter 12: Solving the Test Frameworks Puzzle ������������������������������������������������ 257 The Test Pyramid Is a Wrong Model ������������������������������������������������������������������������������������������ 258 State of JavaScript Testing ������������������������������������������������������������������������������������������������������� 260 Frameworks������������������������������������������������������������������������������������������������������������������������� 261 JS Runtimes ������������������������������������������������������������������������������������������������������������������������ 261 End-to-End �������������������������������������������������������������������������������������������������������������������������� 261 Mocking ������������������������������������������������������������������������������������������������������������������������������� 262 And More ����������������������������������������������������������������������������������������������������������������������������� 262 A Homogenous Testing Stack ���������������������������������������������������������������������������������������������������� 262 Static – Prettier, ESLint, Stylelint, TypeScript ����������������������������������������������������������������������� 264 Unit – Vitest ������������������������������������������������������������������������������������������������������������������������� 264 Integration – Testing Library ������������������������������������������������������������������������������������������������ 265 End-to-End – Playwright Test ���������������������������������������������������������������������������������������������� 266 Conclusion �������������������������������������������������������������������������������������������������������������������������������� 267 Index ��������������������������������������������������������������������������������������������������������������������� 269 Table of ConTenTs
xiii About the Author Jean-François Greffier is an experienced front-end engineer. His main interests are software craft and testing. Recently awarded Microsoft MVP, he is a Playwright ambassador. He is not only an advocate, but also an open source contributor to Playwright on documentation, bug fixes, and features. He is also the maintainer of the Playwright Angular Schematic.
xv About the Technical Reviewer Simon Knott is a Senior Software Engineer on the Playwright Core Team at Microsoft. Before joining Microsoft, he worked on the Content Delivery Networks and Functions infrastructure at Netlify and founded Quirrel, an open source job queueing solution acquired by Netlify. Simon holds a bachelor's degree in Computer Science from Hasso Plattner Institute near Berlin. Simon is the creator of SuperJSON, a widely adopted JSON serialization library, was part of the React 18 Working group, and has contributed to projects like Chromium, VS Code, Next.js, Apache Traffic Server, and Pandas. Simon has presented at the BeJS conference, local Typescript meet-ups, and the FSJam Podcast and served as the technical reviewer for this very book! Simon is passionate about making modern web development more productive. When he doesn't, you'll usually find him cooking, woodworking, or cycling around Berlin.
xvii First, thanks to Anandadeep Roy for trusting me with this project and for his enthusiasm. Many thanks to everyone at Apress for helping me to focus on actually writing the book. Thanks to my family for their patience and ongoing support. Simon Knott helped to make the book not only technically correct but also much better. He made this the best version of the book it could be. Simon, I do hope we can grab a coffee someday. Thanks to the beta readers Tanguy Michel and Ronan Barbot, who gave me a welcome different perspective. Thanks to Butch Mayhew, who gave me feedback in the early process of laying down my plan. Thanks to Tanguy Michel and Nica Mellifera for agreeing to be interviewed. Many thanks to Debbie O'Brien for welcoming me among the Playwright Ambassadors. If it takes a village to raise a child, it certainly takes a tech community to create a book. RennesJS, Snowcamp, Slickteam, Conserto Explos, Playwright Ambassadors – these meetups, conferences, and communities helped me to grow. Thank you. Acknowledgments
xix Introduction Who Is This Book For? For a long time, programming was a complicated craft. It had to address almost impossible technical challenges: How do I race against the beam and create a video game out of a few transistors? How can I make great software with a few bytes of RAM? It also needed to be correct and reliable, with legal requirements like calculating taxes accurately. Software is everywhere: in our pockets, our cars, our several microcomputers. We didn't quite reach the ubiquitous computing the engineers dreamed of in the 1980s, but the closest thing we have are web apps. You can access your favorite applications, with your profile and data, from pretty much any devices that hold a web browser. Our smartphones are multiple times more powerful than the ancient machines that started personal computing. Now as developers we have to deal with several languages, frameworks, dependencies, but we also need to care about deployment, security, accessibility, design, multi-platform… I believe that today, writing software is complex. To paraphrase the Manifesto for Agile Software Development, we are still uncovering better ways of developing software. To help us to make great software, we need great tooling. Microsoft Playwright is an awesome end-to-end testing solution that I discovered a few years ago. It's a great piece of tooling that can help you craft better software and untangle its complexity. This book is primarily meant for front-end or full-stack developers that want to further progress by mastering end-to-end testing with Playwright Test. Quality Assurance professionals should also find value in this work, as it goes in-depth with Playwright Test techniques, automation, and testing strategy. Actually, this book is for any individual contributors that care deeply about high-quality software. You don't have to be an expert front-end developer, but some knowledge of HTML, CSS, and TypeScript is needed. A curiosity toward testing principles is a plus. Being familiar with unit test frameworks like Jest or Vitest is helpful, but experience with end- to- end testing tools is not necessary.
xx Playwright officially supports TypeScript, Python, Java, and .Net. However, I chose to focus on the TypeScript flavor and its test runner: Playwright Test. The first chapters will help you get started with Playwright Test and give you great basics. The second part details advanced concepts and will hopefully be a resource while you practice what you’ve learned. Finally, the last part focuses on what's beyond end-to- end testing and how to use Playwright Test in your testing strategy. InTroduCTIon
1 © Jean-François Greffier 2026 J.-F. Greffier, Practical Playwright Test, https://doi.org/10.1007/979-8-8688-2160-8_1 CHAPTER 1 Getting Started In this chapter, you’ll get an overview of what Playwright Test is about and its advantages and inconveniences, so you can decide when to use it. You’ll learn how to set up your environment and run your first test. Look for useful online resources at the end to complement this book. Introducing Playwright Playwright is an open source project sponsored and primarily maintained by Microsoft. It automates the web by driving three browsers: Chromium, Firefox, and WebKit (the tech behind Safari). This means that you can automate and test your web applications on all three major browser families. Moreover, Playwright is an automation solution geared toward end-to-end testing. It provides assertions adapted to web testing, its own Playwright Test runner, as well as a Codegen generator, and a trace recorder. With its Developer eXperience, speed of execution, availability for different languages and test reliability, Microsoft Playwright quickly gained in popularity. In this chapter, we’ll look at how to prepare your environment, install Playwright, and create your first testing project. Why Choose Playwright Testing is sometimes seen as too complex, difficult to implement in the customer or technical context, time-consuming, useless, and so on. Fortunately, unit and integration tests are becoming increasingly accepted practices, but end-to-end tests are not. They are rarely used, as they are considered slow, fragile, and difficult to write and maintain. End-to-end testing reputation is so bad among developers that many relegate these tests to specialized automation engineers.
2 Playwright is significantly faster than competing end-to-end testing solutions. In fact, as demonstrated in the article “Cypress vs Selenium vs Playwright vs Puppeteer speed comparison,”1 the tool is fast, even for large test suites. Furthermore, it’s easy to parallelize test execution via vertical scaling (more CPUs) or horizontal scaling (more machines). These parallelization features are built-in and do not rely on third-party plugins. Tests on browsers are often fragile, typically “working on my machine” but failing in continuous integration. This phenomenon, known as flakiness, is well known to end-to-end testers. Depending on network conditions and the target machine, it’s sometimes tempting to wait a second or two “just in case.” Or wait until something is eventually present. Fortunately, Playwright takes care of all this automatically with auto-wait. Before performing an action, the test framework will ensure that the criteria are met. For example, before clicking on an element, it must be enabled, visible, not moving, and have a listener for the click. What also happens is that a change in the application breaks the tests: the DOM structure has changed, or the CSS classes. These tests that break at the slightest change are too closely linked to implementation: use CSS or XPath selectors to find the elements to be tested. Playwright offers numerous types of selectors: text, accessibility attributes, CSS, or even positional. Above all, you can combine selectors to find what’s both relevant and robust. Playwright’s generator, Codegen, generates the most robust selector possible. Playwright tests are easier to write thanks to Codegen. It opens a browser window in which you interact with the web application you want to test, and a second window with the Playwright inspector. Your actions are recorded and create code in the language of your choice. This tool also enables you to test and design more readable and robust selectors. Tests are also easy to debug. Step-by-step tests can be run using either the VS Code extension or Codegen. Best of all, Playwright’s trace viewer provides a history of Playwright calls, browser console, and network traces and allows you to inspect the browser page at any point in time, even if the test ran on a different machine, like your Continuous Integration. 1 https://blog.checklyhq.com/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed- comparison Chapter 1 GettinG Started
3 Architecture I’ve often been asked what are Playwright, Playwright Test, and why it’s only available in TypeScript when you can test in other languages. Playwright is actually made up of several tools: • Playwright Library: This is the heart of Playwright, enabling it to talk to different browsers. It can be used in several languages: TypeScript, Python, Java, .Net officially, but also Go, Ruby, and more thanks to open source language bindings. This library is used by many projects in different contexts because it only does browser automation, and does it well. No tests here. • Playwright Expect: These are the famous web-first assertions that help you to assert conditions linked with the DOM. Available in all supported languages, it can be used with different test frameworks. The TypeScript version is compatible with the expect library and usable with your preferred test runner: Jest, Vitest, Mocha, … • Playwright Test: This is Playwright’s test runner, which fetches and executes tests, creates reports, and handles parallelization and sharding. It’s a great, modern test runner that is tailored for Playwright. This component is only available for TypeScript. For other languages, it’s up to you to use a suitable test runner: JUnit, Pytest, MSTest, etc. • Codegen: The code generator that lets you record a user path and generate the corresponding code for several languages, whether for Playwright Library or Playwright Test. • Trace Viewer: It allows you to visualize the traces of an automation or a test. The tool is also available online. Browsers One important point to bear in mind is the browsers supported by Playwright. In fact, Playwright’s core principle is to test the web, on the major browser families. Chapter 1 GettinG Started
Loading comments...
Reply to Comment
Edit Comment