Playwright with JavaScript Tutorial

Web applications are becoming more complex, making reliable test automation essential for delivering high-quality software. Playwright with JavaScript is a modern automation solution that helps testers and developers automate web applications across multiple browsers.

In this tutorial, you will learn what Playwright is, how to install it with JavaScript, create your first test, work with locators and web elements, perform assertions, take screenshots, and explore advanced automation features.

What is Playwright?

Playwright is an open-source browser automation framework developed by Microsoft. It allows you to automate modern web applications using browsers such as Chromium, Firefox, and WebKit.

Playwright supports several programming languages, including:

• JavaScript
• TypeScript
• Python
• Java
• .NET

Playwright with JavaScript is particularly useful for testers and developers who want to build fast and reliable end-to-end test automation.

Why Use Playwright with JavaScript?

JavaScript is widely used in modern web development, making it a natural choice for web automation. Playwright provides powerful features that simplify browser testing and automation.

Some key benefits include:

• Cross-browser testing
• Fast test execution
• Automatic waiting
• Powerful locators
• Built-in assertions
• Parallel test execution
• Screenshot and video recording
• API testing
• Network interception
• Mobile device emulation
• Test reporting

Prerequisites for Learning Playwright with JavaScript

Before starting this tutorial, it is helpful to have basic knowledge of:

• JavaScript
• HTML and CSS
• DOM concepts
• Web application testing
• Basic programming concepts

You don’t need to be an advanced JavaScript developer to start learning Playwright.

How to Install Playwright with JavaScript

First, make sure Node.js is installed on your system.

Create a new project folder and open it in your terminal.

Initialize a Node.js project:

npm init -y

Install Playwright:

npm init playwright@latest

During installation, Playwright will ask you a few configuration questions, such as the programming language and browser setup.

Select JavaScript if you want to create a JavaScript-based Playwright project.

Playwright Project Structure

A typical Playwright project may contain files and folders such as:

tests/
playwright.config.js
package.json

The tests folder contains your test cases, while playwright.config.js contains configuration settings for your Playwright project.

Your First Playwright Test

Create a test file such as:

example.spec.js

A simple Playwright test looks like this:

const { test, expect } = require('@playwright/test');

test('Homepage test', async ({ page }) => {
    await page.goto('https://example.com');

    await expect(page).toHaveTitle(/Example/);
});

This test opens the website and verifies that the page title contains the expected text.

Understanding Playwright Locators

Locators are used to identify elements on a web page. Playwright provides several built-in locator methods.

Common examples include:

page.getByRole()
page.getByText()
page.getByLabel()
page.getByPlaceholder()
page.locator()

For example:

await page.getByLabel('Username').fill('testuser');
await page.getByLabel('Password').fill('password123');

await page.getByRole('button', { name: 'Login' }).click();

Using reliable locators makes your automation scripts more stable and easier to maintain.

Handling Web Elements

Playwright makes it easy to interact with common web elements.

Enter Text

await page.getByPlaceholder('Enter Email').fill('test@example.com');

Click a Button

await page.getByRole('button', { name: 'Submit' }).click();

Click a Link

await page.getByRole('link', { name: 'Home' }).click();

Check a Checkbox

await page.getByLabel('Accept Terms').check();

Select a Dropdown Option

await page.locator('select').selectOption('option1');

These commands can be combined to automate complete user workflows.

Assertions in Playwright

Assertions are important because automated tests should verify whether the expected result actually occurred.

For example:

await expect(page).toHaveTitle('My Website');

You can also check whether an element is visible:

await expect(page.getByText('Login Successful')).toBeVisible();

Other commonly used assertions include:

toBeVisible()
toBeEnabled()
toBeChecked()
toHaveText()
toHaveValue()
toHaveAttribute()

Running Playwright Tests

You can run your Playwright tests using:

npx playwright test

To run tests with the browser visible:

npx playwright test --headed

You can also run a specific test file:

npx playwright test tests/example.spec.js

Taking Screenshots

Playwright allows you to capture screenshots during test execution.

await page.screenshot({ path: 'homepage.png' });

For a full-page screenshot:

await page.screenshot({
    path: 'fullpage.png',
    fullPage: true
});

Screenshots can be useful when debugging failed automation tests.

Handling Multiple Browsers

One of Playwright’s biggest advantages is cross-browser testing.

Playwright supports:

• Chromium
• Firefox
• WebKit

This allows teams to verify that their web applications work correctly across different browser engines.

Playwright Auto-Waiting

Playwright automatically waits for elements to become ready before performing actions in many situations.

For example:

await page.getByRole('button', { name: 'Login' }).click();

Instead of manually adding unnecessary delays, Playwright waits for the element to be actionable.

This helps make automation scripts more reliable.

Handling Alerts and Dialogs

Playwright can handle browser dialogs such as alerts, confirmations, and prompts.

Example:

page.on('dialog', async dialog => {
    console.log(dialog.message());
    await dialog.accept();
});

This allows you to automate applications that display browser dialogs.

Handling Screenshots, Videos and Traces

Playwright provides useful debugging features for automation testing.

You can configure your tests to capture:

• Screenshots
• Videos
• Execution traces

The Trace Viewer is especially useful for understanding what happened during a failed test by providing information about actions, screenshots, and network activity.

Playwright Page Object Model

For larger automation projects, maintaining all locators and test logic in individual test files can become difficult.

The Page Object Model (POM) helps organize your automation framework by creating separate classes for different application pages.

For example:

class LoginPage {
    constructor(page) {
        this.page = page;
        this.username = page.getByLabel('Username');
        this.password = page.getByLabel('Password');
        this.loginButton = page.getByRole('button', { name: 'Login' });
    }

    async login(username, password) {
        await this.username.fill(username);
        await this.password.fill(password);
        await this.loginButton.click();
    }
}

POM makes test automation code more reusable, structured, and maintainable.

API Testing with Playwright

Playwright can also be used for API testing. This allows testers to validate API endpoints along with UI workflows.

For example:

const response = await request.get('/api/users');

expect(response.ok()).toBeTruthy();

API testing can be combined with UI automation to create comprehensive test scenarios.

Advanced Playwright Features

After learning the fundamentals, you can explore advanced Playwright concepts such as:

Cross-Browser Testing

Run the same test suite across Chromium, Firefox, and WebKit.

Parallel Testing

Execute multiple tests simultaneously to reduce testing time.

Network Interception

Monitor, modify, or mock network requests.

Authentication

Reuse authenticated browser states to avoid logging in for every test.

API Testing

Validate backend APIs as part of your automation framework.

Device Emulation

Test applications using different device and browser configurations.

CI/CD Integration

Integrate Playwright tests with continuous integration and deployment pipelines.

Real-World Playwright Automation Examples

Playwright with JavaScript can be used to automate many real-world scenarios, including:

• Login and logout testing
• Registration workflows
• E-commerce applications
• Shopping cart and checkout
• Search functionality
• Form validation
• File upload and download
• Dashboard testing
• Payment workflows
• Regression testing
• Cross-browser testing
• End-to-end testing

Best Practices for Playwright Automation

Follow these practices to create reliable Playwright automation frameworks:

1. Use stable and meaningful locators.
2. Prefer Playwright’s built-in auto-waiting.
3. Avoid unnecessary hard-coded waits.
4. Keep test cases independent.
5. Use Page Object Model for larger projects.
6. Add meaningful assertions.
7. Use reusable functions and fixtures.
8. Capture traces and screenshots for debugging.
9. Run tests across multiple browsers.
10. Integrate automation tests into CI/CD pipelines.

Playwright with JavaScript vs Selenium

Selenium is a long-established browser automation framework, while Playwright is designed with many modern web application testing requirements in mind.

Playwright provides features such as automatic waiting, browser contexts, network interception, tracing, and built-in test runner capabilities.

The best automation tool depends on your project requirements, application architecture, existing technology stack, and team expertise.

Frequently Asked Questions

Is Playwright with JavaScript easy to learn?

Yes. If you have basic knowledge of JavaScript and web concepts, you can start learning Playwright and gradually move toward advanced automation.

Is Playwright used for automation testing?

Yes. Playwright is widely used for UI, end-to-end, regression, and cross-browser test automation.

Can Playwright test Chrome?

Yes. Playwright can automate Chromium-based browsers and can also work with Chrome configurations.

Can Playwright perform API testing?

Yes. Playwright includes API testing capabilities, allowing testers to validate backend services along with UI workflows.

Is JavaScript required for Playwright?

Playwright supports multiple programming languages. However, JavaScript and TypeScript are popular choices, especially for teams working with modern web applications.

Conclusion

Playwright with JavaScript is a powerful technology for modern web automation and software testing. With features such as cross-browser testing, auto-waiting, powerful locators, API testing, parallel execution, and advanced debugging, Playwright helps testers build reliable automation frameworks.

At Coding Masters, we provide Playwright Training with real-time projects and placement assistance, helping learners develop practical automation skills and prepare for real-world software testing and automation opportunities.