If Node.js is not installed, download and install it from here.
2. Installing Playwright
To install Playwright, run the following command in your terminal:
| npm init playwright@latest |
This command will initialize a new project with Playwright, download the necessary binaries, and create a basic project structure.
3. Creating Your First Test
After installation, you can create your first test. Here is an example of a simple test in this playwright testing tutorial:
| const { test, expect } = require(‘@playwright/test’);
test(‘basic test’, async ({ page }) => {
await page.goto(‘https://example.com’);
const title = await page.title();
expect(title).toBe(‘Example Domain’);
});
|
This test navigates to https://example.com, grabs the page title, and checks if it matches the Example Domain.
4. Running Your Test
To run your test, use the following command:
This will execute the test and provide you with the results in the terminal.
5. Understanding the Playwright Test Runner
The Playwright test runner is powerful and comes with many features such as parallel testing, automatic retries, and test fixtures. For a comprehensive guide on these features and how to use them effectively, check out the Playwright testing tutorial and the Playwright’s documentation.
6. Recording Tests (Optional)
Playwright also allows you to record tests, which can help you create tests quickly:
| npx playwright codegen https://example.com |
This command opens a browser where you can interact with the website. The playwright will generate the corresponding code automatically.
7. Running Tests in Different Browsers
By default, Playwright runs tests in Chromium. However, you can run tests in other browsers like Firefox or WebKit:
| npx playwright test –project=firefox
npx playwright test –project=webkit
|
8. Continuous Integration (CI) Setup
Playwright can be easily integrated into your CI/CD pipelines. It supports a variety of CI providers such as GitHub Actions, Azure Pipelines, and more.
9. Learning More
To dive deeper into Playwright, you can explore the following resources:
This playwright’s example should give you a good start with it.
Advanced Playwright Concepts
You can reuse Playwright and Browser instances to improve performance. But it is better to run each test in a new BrowserContext. To keep the browser state separate as well as avoid issues between tests. For detailed guidance on this and other best practices, read this Playwright testing tutorial carefully.
JUnit
In JUnit, you can set up Playwright and Browser in the @BeforeAll method and close them in @AfterAll. This way, all the tests share the same Browser, but each test gets its own BrowserContext and Page.
| package org.example;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import org.junit.jupiter.api.*;
import static org.junit.jupiter.api.Assertions.assertEquals;
import static org.junit.jupiter.api.Assertions.assertTrue;
public class TestExample {
// Shared between all tests in this class.
static Playwright playwright;
static Browser browser;
// New instance for each test method.
BrowserContext context;
Page page;
@BeforeAll
static void launchBrowser() {
playwright = Playwright.create();
browser = playwright.chromium().launch();
}
@AfterAll
static void closeBrowser() {
playwright.close();
}
@BeforeEach
void createContextAndPage() {
context = browser.newContext();
page = context.newPage();
}
@AfterEach
void closeContext() {
context.close();
}
@Test
void shouldClickButton() {
page.navigate(“data:text/html,<script>var result;</script><button onclick=’result=\”Clicked\”‘>Go</button>”);
page.locator(“button”).click();
assertEquals(“Clicked”, page.evaluate(“result”));
}
@Test
void shouldCheckTheBox() {
page.setContent(“<input id=’checkbox’ type=’checkbox’></input>”);
page.locator(“input”).check();
assertTrue((Boolean) page.evaluate(“() => window[‘checkbox’].checked”));
}
@Test
void shouldSearchWiki() {
page.navigate(“https://www.wikipedia.org/”);
page.locator(“input[name=\”search\”]”).click();
page.locator(“input[name=\”search\”]”).fill(“playwright”);
page.locator(“input[name=\”search\”]”).press(“Enter”);
assertEquals(“https://en.wikipedia.org/wiki/Playwright”, page.url());
}
}
|
Check out the new JUnit integration that makes it easier to set up Playwright objects and other cool stuff automatically during testing.
Running Tests in Parallel
By default, JUnit runs all tests one after the other on a single thread. Starting with JUnit 5.3, you can make tests run in parallel to save time. However, using the same Playwright objects in multiple threads isn’t safe. It is best to create a separate Playwright instance for each thread and only use it within that thread. So, here is in this playwright testing tutorial how you can set up multiple test classes to run in parallel.
Use the @TestInstance(TestInstance.Lifecycle.PER_CLASS) annotation in JUnit. To create a single instance of a test class for all its test methods (instead of creating a new instance for each method by default). You can store Playwright and Browser objects as instance fields, so they are shared between tests in that class. Each test class will have its own Playwright instance.
| // Subclasses will inherit PER_CLASS behavior.
@TestInstance(TestInstance.Lifecycle.PER_CLASS)
class TestFixtures {
// Shared between all tests in the class.
Playwright playwright;
Browser browser;
@BeforeAll
void launchBrowser() {
playwright = Playwright.create();
browser = playwright.chromium().launch();
}
@AfterAll
void closeBrowser() {
playwright.close();
}
// New instance for each test method.
BrowserContext context;
Page page;
@BeforeEach
void createContextAndPage() {
context = browser.newContext();
page = context.newPage();
}
@AfterEach
void closeContext() {
context.close();
}
}
class Test1 extends TestFixtures {
@Test
void shouldClickButton() {
page.navigate(“data:text/html,<script>var result;</script><button onclick=’result=\”Clicked\”‘>Go</button>”);
page.locator(“button”).click();
assertEquals(“Clicked”, page.evaluate(“result”));
}
@Test
void shouldCheckTheBox() {
page.setContent(“<input id=’checkbox’ type=’checkbox’></input>”);
page.locator(“input”).check();
assertTrue((Boolean) page.evaluate(“() => window[‘checkbox’].checked”));
}
@Test
void shouldSearchWiki() {
page.navigate(“https://www.wikipedia.org/”);
page.locator(“input[name=\”search\”]”).click();
page.locator(“input[name=\”search\”]”).fill(“playwright”);
page.locator(“input[name=\”search\”]”).press(“Enter”);
assertEquals(“https://en.wikipedia.org/wiki/Playwright”, page.url());
}
}
class Test2 extends TestFixtures {
@Test
void shouldReturnInnerHTML() {
page.setContent(“<div>hello</div>”);
assertEquals(“hello”, page.innerHTML(“css=div”));
}
@Test
void shouldClickButton() {
Page popup = page.waitForPopup(() -> {
page.evaluate(“window.open(‘about:blank’);”);
});
assertEquals(“about:blank”, popup.url());
}
}
|
Set up JUnit to run tests within each class one after the other and run multiple classes at the same time on different threads. The number of threads should be half the number of CPU cores.
| junit.jupiter.execution.parallel.enabled = true
junit.jupiter.execution.parallel.mode.default = same_thread
junit.jupiter.execution.parallel.mode.classes.default = concurrent
junit.jupiter.execution.parallel.config.strategy=dynamic
junit.jupiter.execution.parallel.config.dynamic.factor=0.5
|
Using Gradle
You have the option to utilize a Gradle build setup script, which can be written in Groovy or Kotlin.
| plugins {
application
id ‘java’
}
repositories {
mavenCentral()
}
dependencies {
implementation ‘com.microsoft.playwright:playwright:1.46.0’
}
application {
mainClass = ‘org.example.App’
}
// Usage: ./gradlew playwright –args=”help”
task playwright(type: JavaExec) {
classpath sourceSets.test.runtimeClasspath
mainClass = ‘com.microsoft.playwright.CLI’
}
test {
useJUnitPlatform()
}
|
Tests can then be launched as follows:
Also, Playwright command line tools can be run with :
| ./gradlew playwright –args=”help” |
TestNG
In TestNG, you can set up Playwright and Browser in the @BeforeClass method and close them in @AfterClass. This means all test methods will share the same Browser, but each test will have its own BrowserContext and Page. For a detailed walkthrough of these practices, focus on the Playwright testing tutorial carefully.
| package org.example;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import org.testng.annotations.*;
import static org.testng.Assert.assertEquals;
import static org.testng.Assert.assertTrue;
public class TestExample {
// Shared between all tests in this class.
Playwright playwright;
Browser browser;
// New instance for each test method.
BrowserContext context;
Page page;
@BeforeClass
void launchBrowser() {
playwright = Playwright.create();
browser = playwright.chromium().launch();
}
@AfterClass
void closeBrowser() {
playwright.close();
}
@BeforeMethod
void createContextAndPage() {
context = browser.newContext();
page = context.newPage();
}
@AfterMethod
void closeContext() {
context.close();
}
@Test
void shouldClickButton() {
page.navigate(“data:text/html,<script>var result;</script><button onclick=’result=\”Clicked\”‘>Go</button>”);
page.locator(“button”).click();
assertEquals(“Clicked”, page.evaluate(“result”));
}
@Test
void shouldCheckTheBox() {
page.setContent(“<input id=’checkbox’ type=’checkbox’></input>”);
page.locator(“input”).check();
assertTrue((Boolean) page.evaluate(“() => window[‘checkbox’].checked”));
}
@Test
void shouldSearchWiki() {
page.navigate(“https://www.wikipedia.org/”);
page.locator(“input[name=\”search\”]”).click();
page.locator(“input[name=\”search\”]”).fill(“playwright”);
page.locator(“input[name=\”search\”]”).press(“Enter”);
assertEquals(“https://en.wikipedia.org/wiki/Playwright”, page.url());
}
}
|
Playwright Automation Framework
Playwright can be used as part of a bigger automation system, which makes it useful for testing all aspects of software in the development and deployment process.
Setting Up CI/CD Integration: Playwright works well with CI/CD tools like Jenkins, CircleCI, and GitHub Actions. For GitHub Actions, just create a file named .github/workflows/playwright.yml to set it up:
| name: Playwright Tests
on: [push]
jobs:
test:
runs-on: ubuntu-latest
steps:
– uses: actions/checkout@v2
– name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: ’14’
– run: npm install
– run: npx playwright install –with-deps
– run: npm test
|
Once everything is set up, your Playwright tests will run on their own every time you make changes to your code and save them in your online storage space.
Playwright for Different Programming Languages
This playwright testing tutorial mainly covers JavaScript, but Playwright also works with other languages like Python, C#, and Java.
Playwright Python Example
Playwright provides Python developers with an interface that is similar to the one used in JavaScript.
- Install Playwright for Python:
- Write a Simple Test in Python:
| from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto(‘https://example.com’)
print(page.title()) # Outputs “Example Domain”
browser.close()
|
Playwright Tools and Integrations
Playwright is compatible with various tools and libraries that enhance its functionality.
- Test Reporting: You can use Playwright with tools like Allure and Mochawesome to create detailed test reports.
- Visual Testing: The playwright works with visual testing tools like Applitools to check for UI changes.
- API Testing: It can be used with libraries like Axios or SuperTest to test APIs.
Best Practices for Playwright Testing
To ensure your Playwright tests are efficient and maintainable, follow these best practices:
- Modularize Your Tests: Split complex tests into smaller, reusable functions or modules.
- Use Page Objects: Use the Page Object Model (POM) to separate test actions from page details.
- Leverage Playwright’s API: Use Playwright’s API for tasks like mocking networks, emulating devices, and testing multiple tabs.
- Keep Tests Independent: Make sure each test can run on its own to avoid flaky results.
Playwright vs Other Testing Frameworks
When comparing Playwright to other testing frameworks, focus on features, how easy it is to use, and support for different browsers. As well as how well it integrates with other tools. So, here is a comparison of Playwright with some popular testing frameworks in this playwright testing tutorial:
Playwright vs Selenium
1. Cross-Browser Support
- Playwright: Works with Chromium, Firefox, and WebKit. Same API for all.
- Selenium: Supports Chrome, Firefox, Safari, and Edge. Needs separate browser drivers.
2. API and Language Support
- Playwright: Modern API. Works with JavaScript, TypeScript, Python, C#, and Java.
- Selenium: Traditional API. Supports Java, Python, Ruby, C#, and JavaScript.
3. Parallel Execution
- Playwright: Built-in support for running tests at the same time and managing test suites.
- Selenium: Needs extra setup like Selenium Grid for parallel tests.
4. Auto-Waiting
- Playwright: Automatically waits for elements to be ready.
- Selenium: Requires manual setup with explicit waits.
5. Network Interception
- Playwright: Built-in tools for intercepting and mocking network requests.
- Selenium: Needs external tools or proxies for network handling.
Playwright vs. Cypress
1. Architecture
- Playwright: Direct browser control, runs in headless or full mode.
- Cypress: Runs inside the browser with a GUI, and interacts in the same context.
2. Cross-Browser Support
- Playwright: Supports Chromium, Firefox, and WebKit.
- Cypress: Mainly supports Chromium-based browsers, expanding support.
3. API and Language Support
- Playwright: Modern API for multiple languages (JavaScript, TypeScript, Python, C#, Java).
- Cypress: Uses only JavaScript/TypeScript.
4. Testing Features
- Playwright: Auto-waiting, network interception, multi-page support.
- Cypress: Time-travel debugging, automatic waiting, network stubbing, limited browser support.
5. Test Execution and Reporting
- Playwright: Supports parallel testing, detailed tracing, and video recording.
- Cypress: Built-in video recording, the dashboard for test results.
Playwright vs. Puppeteer
1. Cross-Browser Support
- Playwright: Works with Chromium, Firefox, and WebKit.
- Puppeteer: Mainly supports Chromium. Separate library for Firefox (less maintained).
2. API Features
- Playwright: Advanced features like network interception, multi-page support, and mobile emulation.
- Puppeteer: Simpler API, focused on Chromium.
3. Community and Ecosystem
- Playwright: Developed by Microsoft’s growing community.
- Puppeteer: Developed by Google, the strong Chromium community.
Playwright vs. TestCafe
1. Cross-Browser Support
- Playwright: Supports Chromium, Firefox, and WebKit.
- TestCafe: Works with Chrome, Firefox, Safari, Edge, and mobile browsers.
2. API and Language Support
- Playwright: Modern API, supports JavaScript, TypeScript, Python, C#, and Java.
- TestCafe: Uses JavaScript/TypeScript.
3. Parallel Execution
- Playwright: Native support for parallel test runs and sharding.
- TestCafe: It also supports parallel test execution across browsers.
4. Test Reporting and Integration
- Playwright: Good integration with CI/CD, detailed reports, and tracing.
- TestCafe: Built-in reporting, smooth CI/CD integration.
Troubleshooting Common Issues
While moving forward in this playwright automation tutorial it is important to know even with this robust framework, you might encounter issues. Here is how to troubleshoot common problems:
- Browser Launch Failures: Ensure that your environment has all the necessary dependencies. Running npx playwright install –with-deps often resolves such issues.
- Timeout Errors: If your tests are timing out, increase the default timeout setting in your configuration file.
- Flaky Tests: Use Playwright’s retry mechanism to re-run failed tests and reduce flakiness.
Conclusion
In conclusion, Playwright is a powerful tool for testing web applications, making running tests across different browsers easier. It works with multiple programming languages and integrates well with CI/CD tools. This playwright testing tutorial has walked you through setting up Playwright and running tests by using its features and best practices. As well as you will be able to test your web apps effectively. With more practice, you’ll be ready to tackle even the toughest testing challenges confidently.
Frequently Asked Questions (FAQs)
Q. Is Playwright a tool or framework? Ans. The playwright is both a tool and a framework. It offers APIs for automating web testing, which is great for developers and QA engineers. It also includes a testing framework with features like test runners, parallel execution, and reporting, making it a complete solution for end-to-end testing.
Q. Does Playwright require coding? Ans. Yes, Playwright needs coding. It is made for developers and QA engineers who can write code to automate web tests. But its API is easy to use and well-documented. So even people with less coding experience can use it.
Q. How many days are required to learn Playwright? Ans. How quickly you learn Playwright depends on your background. If you know similar tools like Selenium or Cypress, you might get good at Playwright in a week. In fact, for beginners, it could take a couple of weeks to learn the basics and about a month to handle more complex tests.
₹ 29,499/-Included 18% GST
Buy Course
- Overview of Digital Marketing
- SEO Basic Concepts
- SMM and PPC Basics
- Content and Email Marketing
- Website Design
- Free Certification
₹ 41,299/-Included 18% GST
Buy Course
- Fundamentals of Digital Marketing
- Core SEO, SMM, and SMO
- Google Ads and Meta Ads
- ORM & Content Marketing
- 3 Month Internship
- Free Certification
Trusted By
Advanced Certification in Applied Data Science, Machine Learning & IoT By E&ICT Academy, IIT Guwahati
9 months
Certification in Data Science and Machine Learning With Python By The
IoT Academy Noida
180 Hrs
