Playwright
Playwright
What is Playwright:
Playwright is a powerful and versatile automation library developed by Microsoft. It enables developers and testers to automate web applications across multiple browsers with ease. This guide will walk you through the basics of using Playwright for test automation, from installation to writing and running your first tests. Playwright automation supports Chromium, Firefox, and WebKit, allowing you to test across different browsers.
In this blog, we will deep dive into the various features of Playwright and how we can perform end-to-end testing with Playwright with detailed examples.
Key Features of Playwright:
Free and Open Source
Playwright is an open-source automation tool maintained by Microsoft and is entirely free to use. Its no-cost, open-access nature makes it suitable for individuals, startups, and large enterprises alike, with no licensing fees involved.
Cross-Browser and Multi-Language Compatibility
Playwright offers robust support for all major browsers—Chromium, Firefox, and WebKit—and is compatible with various programming languages, including JavaScript, TypeScript, Python, Java, and .NET, ensuring seamless integration across different development environments.
Simple Installation and Configuration
Setting up Playwright is quick and hassle-free. With just a few commands, you can install the tool, launch browsers, and begin writing your first test—no complex setups or additional dependencies needed
Comprehensive Testing: Functional, API, and Accessibility
Playwright goes beyond just UI testing by offering:
• Functional testing for user interface interactions
• API testing through its built-in request capabilities• Accessibility testing with support for tools like Axe integration.
Built-in and Customizable Reporting
Playwright Test includes built-in support for HTML and JSON reports, and also allows seamless integration with custom reporting tools such as Allure, JUnit, or your own formats—offering greater flexibility and visibility into test results.
CI/CD & Docker Integration
Playwright integrates easily with CI/CD pipelines like GitHub Actions, Jenkins, or GitLab CI, and supports Docker containers for consistent test environments.
Parallel Testing
The provided text, "Playwright supports parallel execution at the test level and project level. This dramatically reduces test execution time, especially when testing across multiple browsers or devices simultaneously," can be
Playwright significantly cuts down on test execution time by enabling parallel testing at both the individual test and entire project levels, which is particularly beneficial when running tests concurrently across various browsers or devices.
Auto Wait:
Playwright's "Auto-Wait" feature automatically ensures that elements are ready for interaction (e.g., visible and enabled) before executing actions like clicking, filling, or typing. This built-in waiting mechanism makes tests more stable and less prone to intermittent failures, removing the need for developers to manually add wait commands or delays.
For example, await page.click('button#submit') will only click the submit button once it's confirmed to be visible and interactive.
Built-in Assertions
Playwright provides powerful built-in assertions that are auto-retried until they pass or timeout. These include checks like toBeVisible, toHaveText, and toBeEnabled.
Example: await expect(page.locator('h1')).toHaveText('Welcome')
Multi-Tab and Multi-Window Support:
Playwright can manage and interacting with multiple browser tabs and windows. This functionality enables the automation of intricate scenarios such as handling OAuth authentication flows, managing pop-up windows, or navigating new tabs opened by user actions.
For example, const [newPage] = await Promise.all([ context.waitForEvent('page'), page.click('a[target="_blank"]') ]) demonstrates how to wait for and capture a newly opened page after clicking a link that opens in a new tab.
Frames and Shadow DOM:
Playwright provides powerful support for working with iframes and Shadow DOM elements—areas that can be difficult for many automation tools to handle. It enables smooth interaction with elements inside embedded documents or web components.
For instance, the command await page.frameLocator('#myFrame').locator('button').click();
demonstrates how to click a button located within an iframe identified by the ID myFrame.
Test Parameters:
Playwright Test enables flexible test automation by allowing you to configure test parameters through its configuration file. You can pass various inputs to your tests—such as environment variables, browser settings, device configurations, or other custom data.
For example, by defining multiple test "projects" in the playwright.config.js file, you can run your tests across different browsers or regional settings with ease.
Mobile Device Emulation:
Playwright allows you to emulate real mobile devices like iPhone or Pixel using built-in device descriptors. This emulation replicates key mobile characteristics such as viewport dimensions, user agent strings, and touch capabilities.
For example, to simulate an iPhone 12, you can use:const iPhone = devices['iPhone 12'];const context = await browser.newContext({ ...iPhone });This creates a browser context that closely mimics the behavior of the actual device.
Playwright Support:
1.Applications Support - Web Browser App, Mobile Web App, API
2.Language Support - Java Script, Type Script, Java, Python & .Net
3.Browser Support - Chromium, Webkit(Safari), and Firefox (headed/headless mode)
4.Operating System - Windows, Mac OS, Linux
Prerequisites for Installing Playwright:
Node.js
Make sure Node.js is installed (LTS version recommended).
You can download it from https://nodejs.org
Visual Studio Code (VS Code)
A powerful code editor used to write and run Playwright tests.
Download from https://code.visualstudio.com
Steps to Install Playwright:
Create a New Folder
Name the folder, e.g., Playwright_Demo.
Open the Folder in VS Code
Launch VS Code and open the Playwright_Demo folder.
Initialize Playwright
Open the terminal in VS Code (Ctrl + ~) and run:
npm init playwright@latestChoose Options When Prompted
Select the language (JavaScript/TypeScript).
Choose whether to add GitHub Actions, test examples, etc.
What Happens Automatically
Playwright downloads required browsers.
It generates the following configuration and setup files:
playwright.config.js – test settings
package.json – project dependencies
package-lock.json – lock file for dependencies
Sample Test Case:
Explanation:
test(...): Defines a Playwright test.
{ page }: Playwright provides a browser page context.
page.goto(...): Opens the specified URL.
expect(page).toHaveTitle(...): Validates that the title includes "Example".
Run Playwright Test Case:
1.Run all test cases:
npx playwright test
2. Run a specific test file (HomepageTest.spec.js)
npx playwright test HomepageTest.spec.js
3. Run HomepageTest.spec.js on the Chromium browser:
npx playwright test HomepageTest.spec.js --project=chromium
4. Run HomepageTest.spec.js on Chromium in headed mode (with UI):
npx playwright test HomepageTest.spec.js --project=chromium --headed
5.Run HomepageTest.spec.js on Chromium in headed mode with debugging enabled:
npx playwright test HomepageTest.spec.js --project=chromium --headed --debug
Locator In Playwright:
A locator is a more powerful Playwright-specific abstraction that helps automatically wait for elements to be ready before interacting with them. It allows chaining and better element handling.
What is CodeGen in Playwright?
CodeGen is a powerful Playwright feature that automatically records your actions on a web page and generates test code based on those interactions.
npx playwright codegen – code for CodeGen
This command launches a browser, and as you interact with the website—through clicks, typing, or navigation—Playwright automatically generates the corresponding test code in real time.
Benefits of Using CodeGen:
1.Quick Script Generation – Instantly create tests as you browse.
2.Saves Time – No need to manually write every line.
3.Multi-language Support – Export code in JavaScript, Python, Java, and .NET.
4.Great Starting Point – Use it as a foundation and enhance your tests later.
