How To Get Started With Playwright

Test automation is critical to modern software development, enabling faster and more reliable releases. While Selenium has been the go-to framework for browser automation in Java for over a decade, Playwright has emerged as a new challenger, offering modern features and an intuitive developer experience.

What is Playwright?

Playwright is an open-source automation framework developed by Microsoft for end-to-end testing of modern web applications. It enables developers and testers to automate browsers like Chromium, Firefox, and WebKit with a single API, ensuring cross-browser testing with great reliability. Though it primarily supports JavaScript/TypeScript, Playwright also provides bindings for Python, Java, and .NET, making it a versatile tool across teams.

Easy to Start:

• We don't need to install a lot of extra tools. Just install Node.js and one command will set up Playwright.

 (No need to worry about drivers like ChromeDriver, GeckoDriver, etc.)

Works with All Browsers:

• With Playwright, we can test our app on Chrome, Firefox, and Safari — using just one tool!

Super Fast:

• Playwright tests run faster because it talks directly to the browser — not through a middle layer like Selenium WebDriver.

Smart Waiting:

• Playwright automatically waits for pages to load, buttons to appear, and actions to complete (No need to write lots of waits and sleeps).

Can Record our Actions:

• Playwright has a cool tool called Codegen that can record our actions on a website and create the test script for us. (Like magic!)

Easy Debugging:

• If a test fails, Playwright gives us screenshots, videos, and logs automatically. It’s like having a detective help us find out what went wrong.

Runs on Different Devices:

• We can even simulate mobile phones, tablets, or different screen sizes easily without any extra setup.

  
  

Prerequisites for Installing Playwright

Before installing Playwright, you need:

• Node.js environment.

• Visual Studio Code (VS Code) editor.

Install Visual Studio Code

• Go to: https://code.visualstudio.com/

• Click Download for Windows / Mac / Linux

• Run the installer and complete the setup.

  
  

Install Node.js (if not already installed)

• Visit https://nodejs.org/

• Download LTS version (Recommended for stability), Run the installer and complete the setup.

• Along with Node.js, we will get npm node package manager.

• After installation, verify installation by running the below commands separatly in VS Code terminal or Command prompt:

node -v
npm -v

We should see versions like:

v20.12.2
10.5.0

Setting Up First Playwright Project

• Create a Project folder (e.g., DSALGOPLAYWRIGHT) in File Explorer, and open it in VS Code.

• Install Playwright: (Multiple ways were there, VS Code terminal or Windows Command or through VS Code extensions.) Here I provided steps to install through the terminal. Run the below command in VS Code terminal.

npm init playwright@latest

• After installation, we will see the below folders in Project Explorer:

  • node_modules: Contains all Playwright packages.

  • tests folder: Default location for your test scripts.

  • tests-examples folder: Some sample tests.

  • package.json: Like pom.xml in Selenium, it manages project dependencies.

  • playwright.config.js: Manages project configurations.

  
  
  
  

  

  
  

Basic Commands to Run Playwright Tests

npx playwright test

• By default it will pick all the test modules under test folder

npx playwright test -- headed

• To run in the headed mode

npx playwright show-report

• To see the HTML Reports

  
  

How to Create and Run Playwright Tests

Creating a Test File

Inside the tests folder:

• Right click on tests foder -> New File

• All the test files should be having extension spec.js, file name can be anything, but extension should be spec.js

• Here I want to verify the login page, home page of dsportal application. I will launch the application, and I will register and first verify login page. So here in tests folder I created the below files.

  • home.spec.js files,

  • registration. spec.js,

  • login spec.js,

    
    

Writing Our First Test

Import Playwright Module: We have to add the below line at the top of every .spec.js file:

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

OR  (using ES6 syntax):

import { test, expect } from '@playwright/test';

• test is used to define and run individual test cases.

• expect is used for assertions/validations.

You'll notice a folder named node_modules in your project directory. Inside it, the @playwright/test module contains everything Playwright offers.

However, you don’t need to import the entire package. You only need two core components:

• test — for writing the test logic

• expect — for adding validations

These are constants and should be included at the top of every test file to access Playwright’s core functionality. The require function used above is part of Node.js, which handles module loading in JavaScript projects.

Structure of a Test

Add below code snippet below in login.spec.js

test('LoginPage Test', async ({ page }) => {

    await page.goto('https://example.com/login');
  
    await expect(page).toHaveURL('/home');
  
    await page.close();
  
  });

Running Playwright Tests

As I mentioned earlier, by default, Playwright will execute all the tests inside the tests folder, in all three browsers (Chromium, Firefox, and WebKit), and in headless mode. This happens when we run the following command in VS Code terminal:

To execute all tests in default settings:

npx playwright test

If we want to execute a specific spec file, we need to provide the file name along with the command:

To execute a specific test file:

npx playwright test home.spec.js

If we want to run tests in a specific browser and in headed mode, we must mention the browser name and headed flag:

To run in a specific browser with UI visible:

npx playwright test homespec.js  --project=chromium --headed

To run the test in debug mode (with pause, step-through, and dev tools), we use this command:

To run in debug mode:

 npx playwright test homespec.js  --project=chromium --headed --debug

Explaining the login.spec.js code snippet:

Learn two important things Anonymous Function and Fixture which are used in code snippet.

What is an Anonymous Function and What is a Fixture?

• Anonymous Function: An anonymous function is simply a function without a name. These are commonly used in Playwright test blocks, especially when the function is only meant to be used once or passed as an argument.

  Here, the function passed to test() is anonymous — it's not declared with a name, and it's executed as part of the test definition.

  
  

• Fixture (page): A fixture in Playwright is a special helper that provides access to the tools and environment your test needs - like launching a browser, navigating pages, or interacting with elements.

  The most common built-in fixture is a page. Suppose when we interact with some element or click an element we want to get the text from the page or we want to check whether some element is present on the page or not or if we want to launch the web page, all these commands are available in the page. By using all these page fixtures we access all these commands.

  It’s automatically injected into your test and gives you access to key browser actions such as:

  • page.goto() – open a web page

  • page.click() – click on an element

  • page.textContent() – extract text

  • page.isVisible() – check visibility

  • page.title() – get page title

  • ...and much more.

Playwright has built-in fixtures like page, browser, and context, and we can create our own too!

This fixture (page) we need to pass in an anonymous function. It contains so many functions that we can automate web applications.

Async/Await in Playwright

Why Async/Await?

JavaScript is an asynchronous programming language — which means it doesn’t wait for one operation to finish before moving to the next. This behavior can cause issues in automation, where each step typically depends on the success of the previous one.

To handle this, Playwright uses async and await to manage the flow of execution and work with promises.

How It Works

• async: Marks a function as asynchronous, which means it returns a Promise.

• await: Pauses the execution of the function until the Promise resolves.

These two keywords are essential in Playwright, especially when dealing with actions like navigating pages, clicking elements, or extracting text — all of which return promises.

• async is used before the function to enable the use of await.

• await is used before actions like page.goto(), page.fill(), and page.title() to ensure they are complete before moving to the next step.

  
  

Why It Matters in Automation

In test automation, every step needs to happen in sequence:

• First load the page

• Then fill the form

• Then click login

• Then verify the title or URL

If await is not used, these operations might execute out of order, leading to flaky or failed tests.

Example:

const title = await page.title(); // Waits for the title to be available before continuing

This ensures your test waits for the page to load completely before checking the title or moving on.

Conclusion

Playwright offers a fresh and powerful take on browser automation—combining speed, simplicity, and modern tooling. From recording actions to running across multiple devices, its capabilities eliminate the pain points of older frameworks and help testers ship with confidence.

Whether you're transitioning from Selenium or starting fresh, Playwright's intuitive API and rich feature set make it a smart choice for any modern automation strategy.

"Learning gives creativity, creativity leads to thinking, thinking provides knowledge, and knowledge makes you great." — Dr. A.P.J. Abdul Kalam