Web Automation Testing Using Playwright

Web Automation Testing with Playwright by Kailash Pathak# Web Automation Testing with Playwright by Kailash Pathak. Covers end-to-end, API, accessibility, and visual testing.# First Edition 2025 Copyright © BPB Publications, India. ISBN: 978-93-65898-002. All rights reserved. Reproduction, distribution, or transmission prohibited without permission. Program listings may be entered, stored, and executed, but not reproduced for publication.# Book is dedicated to the author's father, spouse, daughter Garvita, and son Praneel.# Author: Kailash Pathak, Senior QA lead manager at 3pillar with decades of experience in QA engineering and automation. Certified in PMI-ACP®, ITIL®, PRINCE2 Practitioner®, ISTQB, and AWS (CFL). Actively involved in conferences, webinars, and workshops, and shares expertise on LinkedIn, X, and Medium.# Reviewer: Dániel, a passionate test automation engineer specializing in API and UI testing, with a fondness for web UI automation. Aims to deliver high-quality, maintainable test solutions.# Acknowledgment: Gratitude extended to family, colleagues, mentors, readers, reviewers, technical experts, editors, the open-source community, and the Playwright team. Special thanks to BPB Publications and readers interested in the book.# Preface: This book answers questions about Playwright, including user-friendliness, requirements, learning curve, differences from other tools, cost, and license. It covers automation testing, Playwright overview, setup, and scripting. Topics include handling web elements (drag and drop, file downloads, alerts, tabs, iframes, Shadow DOM), built-in tools (Codegen, Playwright inspector, Trace view, UI mode), reports, assertions, annotations, locators, hooks, Page Object Model (POM), Cucumber/BDD integration, API testing, mocking data, authentication, session storage, accessibility testing, visual testing, CI/CD integration, and AI in test automation.# Chapter 1: Introduction to Playwright- Understanding automation testing and its benefits, overview of Playwright, comparison between Playwright vs. Selenium and Playwright vs. Cypress.# Chapter 2: Getting Started with Playwright- Installation of Playwright, setting up the development environment, basic architecture, features, creating the first script, and cross-browser testing.# Chapter 3: Locator Strategies and Handling Various Actions- Interacting with input boxes, buttons, checkboxes, dropdowns, menus, and radio buttons. Also handling multi-select dropdowns and mouse drag-and-drop operations.# Chapter 4: Handling Complex Elements- Handling complex elements like upload/download files, iframe, JavaScript alerts, tabs, pop-ups, and Shadow DOM.# Chapter 5: Exploring Playwright Tools in Depth- Generating code using Codegen, leveraging Inspector, executing test cases in UI mode, and debugging with Trace Viewer.# Chapter 6: Reporter, Assertion, Annotations, and Hooks in Playwright- Exploring reports, assertions (soft/hard), annotations, and hooks with detailed examples.# Chapter 7: Page Object Model Pattern in Playwright- What is POM design pattern, delving into how POM simplifies test code structure, Pros and Cons of POM, creating Page Objects using Playwright; hands-on approach.# Chapter 8: Playwright Cucumber/BDD Framework Integration- Understanding cucumber, writing BDD scenarios in Given-When-Then format, exploration of cucumber background, data tables, integrating cucumber with Playwright, and generating cucumber HTML Report.# Chapter 9: API Testing Using Playwright, Authentication, and Session Storage- Exploring Playwright’s capabilities for API testing, performing GET, POST, PUT, and DELETE requests, handling authentication, and managing session data effectively.# Chapter 10: Accessibility Testing with Playwright- Introduction to accessibility testing, Web Content Accessibility Guidelines (WCAG), and automating accessibility testing with Playwright.# Chapter 11: Visual Testing with Playwright- Visual testing, benefits, catching visual discrepancies and regressions, and automating visual testing using Playwright.# Chapter 12: Integrate Playwright Tests with CI/CD and Run Tests in Parallel- CI/CD, GitHub Actions, parallel test execution, distributing tests across virtual environments, reducing test execution time, setting up CI/CD pipeline, executing test cases in parallel mode, and using the concept of sharding.# Chapter 13: Using AI with Playwright for E2E Testing- Introduction to Artificial intelligence (AI) in test automation, AI automation tools, Generative AI, leveraging ChatGPT to create test scripts in Playwright, debugging scripts, limitations of Generative AI tools.# The link to download the Code Bundle and the Coloured Images of the book: https://rebrand.ly/24de24. The code bundle for the book is also hosted on GitHub at https://github.com/bpbpublications/Web-Automation-Testing-Using-Playwright.# Details on downloading code and images, GitHub repository, errata reporting, eBook versions, free technical articles, newsletters, discounts, offers, piracy reporting, becoming an author, leaving reviews, and joining the book's Discord space.# Table of Contents1. Introduction to Playwright1. Introduction2. Structure3. Objectives4. Understanding automation testing5. Manual testing6. Record and playback tools7. Script-based tools8. Framework based tools9. AI/ML-based tools10. Journey into the future11. Testim12. Applitools13. Mabl14. Functionize15. testRigor16. TestCraft17. Benefits of automation testing18. Overview of Playwright19. Playwright vs. Selenium20. Feature comparison21. Playwright vs. Cypress22. Feature comparison23. Conclusion24. Multiple choice questions25. Answers# Table of Contents26. Getting Started with Playwright1. Introduction2. Structure3. Objectives4. Installing Playwright in a different environment5. Install Playwright on Mac6. Install Playwright in Window7. Install Playwright using VS Code extension8. Understanding the architecture of Playwright9. Understanding why Playwright is faster than Selenium10. Overview of Playwright's features11. Creating Playwright project12. Writing your first Playwright script13. UI testing with Playwright and JavaScript14. Different ways of running the script15. Cross-browser testing with example16. Importance of cross-browser testing17. Cross-browser testing with desktop18. Cross-browser testing with mobile viewports19. Conclusion20. Multiple choice questions21. Answers# Table of Contents1. Locator Strategies and Handling Various Actions1. Introduction2. Structure3. Objectives4. Locator's strategies5. Understanding what is locator6. Locate element in Playwright using CSS, XPath selector7. CSS selectors in Playwright a. Example of CSS selectors8. XPath selectors in Playwright a. Example of XPath selectors9. Built-in locators from Playwright a. Locating elements by role b.Locating elements by text c.Locating elements by lable d. Locating elements by placeholder e. Locating elements by AltText f. Locating elements by title g. Locating elements by Test-ID Chaining selectors10. Chaining with more complex selectors11. Filtering locators a.Filter by text b. Filter by not having text c. Filter by child/descendant12. Best practices for locator strategies13. Handling element input box, buttons, and checkboxes14. Handling input boxes and buttons15. Handling checkbox a. Handling single checkbox b. Handling multi-checkboxes16. Handling element dropdowns, and multi-select dropdown a. Handling single-select dropdowns b. Handling multi-select dropdowns17. Handling radio buttons, and mouse drag and drop a. Handling radio buttons b. Handling drag and drop18. Conclusion19. Multiple choice questions20. Answers# Table of Contents21. Handling Complex Elements1. Introduction2. Structure3. Objectives4. Handling upload and download the file5. Handling upload file a. Upload single file b. Upload multiple file6. Handling download file a. Single file download b. Multiple file download7. Handling iframe8. Handling JavaScript alerts a. Standard alert b. Confirm alert c. Prompt alert9. Handling tabs and window pop-ups a. Handling new tabs b. Handling multi page using browser context c. Handling window pop up model10. Handling shadow DOM11. Conclusion12. Multiple choice questions13. Answers# Table of Contents14. Exploring Playwright Tools in Depth1. Introduction2. Structure3. Objectives4. Understanding of record and playback script5. About record and playback tools6. Advantages of using record and playback tool7. Disadvantages of using record and playback tool8. Learn how to generate code in VS Code9. Record the test10. Record at cursor11. Pick locator12. Learn about test generator with Codegen13. About test generator14. Codegen15. Recording Script with Playwright Codegen16. Steps for recording test in Playwright17. Learn about Playwright Inspector and debug script18. Running tests in UI Mode19. Learn about Trace Viewer20. Recording a trace locally21. Recording a trace on CI22. Conclusion23. Multiple choice questions24. Answers# Table of Contents25. Reporter, Assertion, Annotations, and Hooks in Playwright1. Introduction2. Structure3. Objectives4. Reporters in Playwright5. Third-party reporter a. Reasons to use Allure Report b. Setting up Allure Report6. Learn about assertions in Playwright7. Need for assertions8. About hard and soft assertions9. Assertions in Playwright10. Auto-retrying assertions11. Soft assertions12. Annotations in Playwright13. Learn about hooks in Playwright14. Conclusion15. Multiple choice questions16. Answers# Table of Contents17. Page Object Model Pattern in Playwright1. Introduction2. Structure3. Objectives4. Introduction to Page Object Model5. Essential components of POM6. Playwright and POM for test automation7. Benefits of using POM8. Implications of not using Page Object Model9. Implementing Page Object Model with Playwright10. Use case one11. Use case two12. Data-driven from external files to Playwright tests13. Conclusion14. Multiple choice questions15. Answers# Table of Contents16. Playwright Cucumber/BDD Framework Integration1. Introduction2. Structure3. Objectives4. Introduction to behavior-driven development5. BDD lifecycle6. Benefit of using BDD7. Introduction to Cucumber8. Understanding features and scenarios9. Understanding Cucumber hooks and tags10. Add multiple tags in feature file11. Understanding Cucumber Background, Data Tables12. Integrating Cucumber with Playwright13. Cucumber HTML reporter14. Conclusion15. Multiple choice questions16. Answers# Table of Contents17. API Testing Using Playwright, Authentication, and Session Storage1. Introduction2. Structure3. Objectives4. About application programming interface a.API workflow5. Application programming interface testing6. API layer in test automation pyramid7. Various components of the API8. Benefits of API testing a.Playwright for API testing9. Setup Playwright for API testing10. GET request test with example11. POST request test with example12. PUT request test with example13. API testing with authentication14. Authentication and session storage15. Mock the APIs16. Mock API requests17. Modify API responses18. Conclusion19. Multiple choice questions20. Answers# Table of Contents21. Accessibility Testing with Playwright1. Introduction2. Structure3. Objectives4. About accessibility testing5. Importance of accessibility testing6. Web Content Accessibility Guidelines7. Tools for accessibility testing8. Browser extensions9. Playwright for accessibility testing10. Writing accessibility tests using Playwright11. Scanning an entire page a.Code walkthrough b.Output12. Scanning a specific part of a page a. Output13. Scanning a specific element of a page14. Scanning with WCAG violations a.Output15. Excluding elements from a scan a.Output16. Disabling particular scan rules a.Output17. Conclusion18. Multiple choice questions19. Answers# Table of Contents20. Visual Testing with Playwright1. Introduction2. Structure3. Objectives4. About visual testing5. Ways to perform visual testing6. Tools to perform visual testing7. Benefits of visual testing a.Benefits of automating visual testing8. Create visual tests using Playwright9. Create visual tests for single page a.Code walkthrough b.Test execution10. Create visual tests for full page a.Code walkthrough b.Test execution11. Create visual tests with masking the element or object a.Code walkthrough b.Test execution12. Create visual tests with maxDiffPixels a.Code walkthrough13. Create visual tests with difference in entered text14. Conclusion15. Multiple choice questions16. Answers# Table of Contents21. Integrate Playwright Tests with CI/CD and Run Tests in Parallel1. Introduction2. Structure3. Objectives4. About CI/CD5. Benefits of CI/CD6. Popular CI/CD tools7. Introduction to CI/CD tool GitHub Actions8. Setting up basic GitHub Actions workflow9. Running Playwright tests in GitHub Actions10. Cross browser testing with Playwright a.Benefits of using Playwright for cross-browser testing b.Running test scripts on different browsers11. Running test scripts across browsers from VS Code12. Test execution in serial and parallel mode a.Running test scripts in serial mode b.Running test scripts in parallel mode c. Execute test scripts in serial parallel mode13. Sharding tests between multiple machines a.Sharding tests in Playwright with GitHub action14. Execution result in CI/CD GitHub action15. Conclusion16. Multiple choice questions17. Answers# Table of Contents21. Using AI with Playwright for E2E Testing1. Introduction2. Structure3. Objectives4. Artificial intelligence in test automation5. Benefits of AI in test automation6. AI automation tools7. About generative AI8. Leveraging ChatGPT to automate tests with Playwright9. About prompts10. ChatGPT prompts to generate the script11. Leveraging ChatGPT to debug Playwright test12. ChatGPT prompts to debug the script13. E2E script generation with ChatGPT14. Limitations with ChatGPT15. Conclusion16. Multiple choice questions17. Answers# Table of Contents21. Index