January 14, 2026 vibssingh

Run Playwright Java tests in headed mode

Last Updated On

We know that Playwright runs the tests in non-headed mode. This means we can’t see the test opening the web page and performing various actions on it. But, we can run the tests in headed mode. This is useful for debugging or observing the actions taken by the test.

System requirements

The following prerequisites are required to be installed on the machine to begin with a smooth setup and installation.

Java 8 or higher
IntelliJ IDE or any other IDE to create a project
Maven
Browsers on which tests need to be run, like Chrome, Firefox, etc.

To run the tests in headed mode, use the below command:-

launch(new BrowserType.LaunchOptions().setHeadless(false));

We will be automating the following test scenario using Playwright Java.

Open the https://opensource-demo.orangehrmlive.com/web/index.php/auth/login website in UI mode
Print the heading of the page
Verify that the Home page title is equal to “OrangeHRM”

Below is an example of running the tests in the headed mode.

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

import java.util.regex.Pattern;

import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;

public class PlaywrightDemo {

    public static void main(String[] args) {

        try (Playwright playwright = Playwright.create()) {

            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
            Page page = browser.newPage();
            page.navigate("https://opensource-demo.orangehrmlive.com/web/index.php/auth/login");
            page.waitForTimeout(2000);
            System.out.println("Title :" + page.title());
            assertThat(page).hasTitle(Pattern.compile("OrangeHRM"));
        }
    }
}

Explanation

1. Initialize Playwright

Below method is used to initialize a new Playwright instance. It is placed inside a try-with-resources block. This ensures that resources are closed automatically after use.

(Playwright playwright = Playwright.create())

2. Launch Web Browser in Visible mode

A new Chromium browser instance is launched in visible mode. The BrowserType.LaunchOptions class contains various settings that define how the browser should be started. The setHeadless(false) call is a method on the LaunchOptions object. Setting headless to false causes the browser to launch in visible mode. This allows us to see the browser window as the automation runs.

Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

3. Create a new page

Creates a new page/tab in the browser.

Page page = browser.newPage();

4. Navigate to the URL

This statement navigates the newly created page to a specified URL.

page.navigate("https://opensource-demo.orangehrmlive.com/web/index.php/auth/login");

5. Implement wait

The script pauses execution for 2000 milliseconds (or 2 seconds) using `page.waitForTimeout(2000)`, allowing time for the page to fully load. This is often used in testing to manage asynchronous loading of elements.

page.waitForTimeout(2000);

6. Print the title

The title of the page is retrieved and printed to the console using page.title().

System.out.println("Title :" + page.title());

7. Assert the page title

Below line asserts that the page has the title matching the regular expression “OrangeHRM”. The use of Pattern.compile() allows for matching with a regular expression, which can be beneficial for flexible title checking.

assertThat(page).hasTitle(Pattern.compile("OrangeHRM"));

8. Close Resources

The try-with-resources structure ensures the browser and Playwright instance close automatically after the test completes.

The test execution in Playwright is very fast. Therefore, I have used the waitForTimeout() method to slow down the execution for 2 seconds. This allows for taking a print screen of the page. It opens the website as shown below.

The output of the above program is

To know more about Playwright, please refer to the official website of Playwright – https://playwright.dev/java/docs/running-tests.

January 12, 2026January 14, 2026 vibssingh

Web Automation Testing with Playwright Java

Last Updated On

January 14, 2026

HOME

In this tutorial, we will learn to create and set up the project using Playwright Java.

Table of Contents

System requirements

The following prerequisites are required to be installed on the machine to begin with a smooth setup and installation.

Java 8 or higher
IntelliJ IDE or any other IDE to create a project
Maven
Browsers on which tests need to be run, like Chrome, Firefox, etc.

Implementation Steps

1. Create a new Maven Project

The first step in setup is to create a new Maven project. I will be using IntelliJ in this tutorial. The following steps need to be followed to create a new Maven project :

Open IntelliJ, Navigate to File >> New >> Project

2. In the New Project window, enter the following details:

Name of the Project – Playwright_Java_Demo
Location/path where the project needs to be saved – Documents/Playwright (my location)
Select JDK version – I am using JDK 17
Archetype – Search for “quickstart” and select maven-archetype-quickstart from the results

Click on the Create button to create the project.

This will create a project as shown below in the IntelliJ.

2. Updating the Dependencies

Add the Playwright dependency to the pom.xml. The latest dependency can be found from here.

<!-- https://mvnrepository.com/artifact/com.microsoft.playwright/playwright -->
<dependency>
    <groupId>com.microsoft.playwright</groupId>
    <artifactId>playwright</artifactId>
    <version>1.57.0</version>
</dependency>

After adding the dependency, refresh the project. We will see that the Playwright jar files are downloaded in External Libraries.

3. Test Creation

Create a Java class as Test file under src/test/java as shown below – PlaywrightDemo

We will be automating the following test scenario using Playwright Java.

Open the https://qaautomation.expert/ website
Print the heading of the page
Verify that the Home page title is equal to “QA Automation Expert”

Below is the sample code for the above scenario. The test is using Chromium browser.

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

import java.util.regex.Pattern;

import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;

public class PlaywrightDemo {

    public static void main(String[] args) {

        try (Playwright playwright = Playwright.create()) {

            Browser browser = playwright.chromium().launch();
            Page page = browser.newPage();
            page.navigate("https://qaautomation.expert/");
            System.out.println("Title :" + page.title());
            assertThat(page).hasTitle(Pattern.compile("QA Automation Expert"));
        }
    }
}

Explanation

1. Initialize Playwright

Below method is used to initialize a new Playwright instance. It is placed inside a try-with-resources block. This ensures that resources are closed automatically after use.

  try (Playwright playwright = Playwright.create())

2. Launch Web Browser

A new Chromium browser instance is launched.

Browser browser = playwright.chromium().launch();

3. Create a new page

Creates a new page/tab in the browser.

 Page page = browser.newPage();

4. Open the web application

This statement navigates the newly created page to a specified URL.

page.navigate("https://qaautomation.expert/");

5. Print the title

The title of the page is retrieved and printed to the console using`page.title()`.

System.out.println("Title :" + page.title());

6. Assert the page title

Below line asserts that the page has the title matching the regular expression “QA Automation Expert”. The use of `Pattern.compile()` allows for matching with a regular expression, which can be beneficial for flexible title checking.

assertThat(page).hasTitle(Pattern.compile("QA Automation Expert"));

4. Test Execution

Click on the green arrow next to the Java program name. A dialog box will appear with the various options. These options can be seen in the image.

By default, the tests are run in headless mode, so the browser UI is not loaded.

Below is the test execution result.

When the tests are executed for the first time, Playwright downloads Chromium, Firefox, and WebKit browsers into OS-specific Cache folders.

%USERPROFILE%\AppData\Local\ms-playwright on Windows
~/Library/Caches/ms-playwright on MacOS
~/.cache/ms-playwright on Linux

As I am running the test on a Windows OS machine, the browser binaries are downloaded into the %USERPROFILE%\AppData\Local\ms-playwright folder.

More details about Playwright with Java can be found in the official website of Playwright – https://playwright.dev/java/docs/intro.

January 9, 2026 vibssingh

Send JSON File as Payload in Playwright

Last Updated On

HOME

Sending a JSON file as a payload from an external source using Playwright requires you to read the file from the local filesystem. You then include its contents in the HTTP request. In this tutorial, I will explain to pass a JSON file as a payload to the request. This is needed when the payload is static or there is minimal change in the request payload.

Table of Contents

System Requirement

Node.js version 18 or higher and npm (comes with Node.js)
Windows 10+, macOS 12+, or Ubuntu 20.04+
Visual Studio for Code is already installed.
Playwright is already installed

Below is the sample JSON payload used in the request.

Here’s how you can handle them in Playwright:

1. Setup Your Playwright Testing Environment:

Verify that the Playwright installed in your project. If you haven’t yet installed it, you can use:

npm install playwright

2. Update playwright.config.ts

Playwright Test comes with a few built-in reporters for different needs and ability to provide custom reporters. We will add detail in playwright.config.ts to generate the html report, once the test execution is finished.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
});

3. Writing the API Test

First, ensure your JSON file is well-structured and readable.

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

test('Send JSON file as payload', async ({ request }) => {

  try {
    // Read and parse JSON file directly into a JavaScript object
    const jsonPayload = JSON.parse(fs.readFileSync('tests/payloads/jsonpayload.json', 'utf8'));

    console.log('JSON data parsed successfully:', jsonPayload);

    // Perform a POST request
    const postResponse = await request.post('https://jsonplaceholder.typicode.com/users', {
      headers: {
        'Content-Type': 'application/json'
      },
      data: JSON.stringify(jsonPayload)
    });

    // Check the response status code - expecting 201 if the resource creation is successful
    expect(postResponse.status()).toBe(201);

    // Parse the response data
    const postResponseBody = await postResponse.json();
    console.log('RESPONSE:', postResponseBody);

    // Validate the response properties - adapt as needed
    expect(postResponseBody).toHaveProperty('title', 'Architect');
    expect(postResponseBody).toHaveProperty('body', 'DW-BI');
    expect(postResponseBody).toHaveProperty('userId', 5);

  } catch (error) {
    if (error instanceof Error) {
      console.error('Error message:', error.message);
    } else {
      console.error('An unknown error occurred:', error);
    }
  }
});

Explanation:

1. Imports

This line imports the test and expect functions from Playwright’s testing library. These functions provide a structure for writing tests and asserting conditions within them.

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

2. Test Definition

This defines an asynchronous test case named “Send JSON file as payload”. The test receives a request object as a parameter, which is used to perform HTTP requests.

test('Send JSON file as payload', async ({ request })

3. Read the JSON File

First, you need to read the JSON file into your script. This is typically done using the `fs` module in Node.js.

const fs = require('fs');

4. Read and Parse JSON File

The script attempts to read a JSON file located at ‘tests/payloads/jsonpayload.json’ using fs.readFileSync.

The JSON content is parsed into a JavaScript object using JSON.parse.

// Read and parse JSON file directly into a JavaScript object
const jsonPayload = JSON.parse(fs.readFileSync('tests/payloads/jsonpayload.json', 'utf8'));

console.log('JSON data parsed successfully:', jsonPayload);

5. Performing a POST Request

Sends a POST request to the specified URL. The headers include ‘Content-Type’: ‘application/json’, denoting the request body data format. The request body is the stringified version of the JSON payload.

 // Perform a POST request
    const postResponse = await request.post('https://jsonplaceholder.typicode.com/users', {
      headers: {
        'Content-Type': 'application/json'
      },
      data: JSON.stringify(jsonPayload)
    });

6. Checking the Response Status Code

Retrieve HTTP status code for response validation.

expect(postResponse.status()).toBe(201);

7. Parsing the Response Data

Parse response data into JSON format

// Parse the response data
const postResponseBody = await postResponse.json();

8. Logging the Response

This outputs the response body to the console, allowing you to see the returned JSON data.

console.log(postResponseBody);

9. Perform assertions on the response

The assertions verify that the response contains expected data. expect assertions validate certain properties in the response

The property `title` should be ‘Architect’.
The property `body` should be ‘DW-BI’.
The property `userId` should be 5.

// Validate the response properties - adapt as needed
expect(postResponseBody).toHaveProperty('title', 'Architect');
expect(postResponseBody).toHaveProperty('body', 'DW-BI');
expect(postResponseBody).toHaveProperty('userId', 5);

10. Error Handling

There’s a `try-catch` block capturing errors during file reading, request making, and response handling. The `catch` block checks if the error is an instance of `Error` to log its message.

4. Execute the tests through Test Explorer View

Go to the funnel shape icon called “Testing” or “Test Explorer View”. You can run the tests from the test Explorer view too now. You can run all of the tests in all of the test specs in this directory.

You can also come in and run all of the tests in a particular specification file. Alternatively, run individual tests within a specification file. Here, I want to run the tests of api_json_payload_tests.spec.ts file.

The output of the above program is

5. Execute the tests through Command Line

You can also run the tests through the command line. Go to the terminal and use the below command:-

npx playwright test api_json_payload.spec.ts

This command runs all the tests present in this file.

6. Evaluate Test Results

Analyze console outputs and assertions to validate the response data, ensuring that your API endpoints are functioning as designed.

Playwright generates a test report after the execution of the tests. This test report can be viewed by using the below command:

npx playwright show-report

The output of the above command is

The Index.html report is shown below:

Summary:

File Paths: The file paths are correctly specified relative to the execution directory or use absolute paths.
Content-Type Headers: The `Content-Type` header should match the format of the data being sent (`application/json` for JSON).
Network Configuration: The target endpoint should support POST requests and accept data in the given formats.

To know more about Playwright UI mode, please refer to this website – https://playwright.dev/docs.

January 6, 2026January 6, 2026 vibssingh

Mastering Query Parameters in Playwright API Tests

Last Updated On

January 6, 2026

HOME

Playwright can be used to get access to the REST API of the application.

In this tutorial, we will see how to handle Query Parameters in Playwright API Tests.

Table of Contents

What is Query Parameters?

Query parameters are a way to pass information to an API flexibly and simply. They are added to the end of the API endpoint URL as a series of key-value pairs. To append query params to the end of a URL, a ‘?’ Is added followed immediately by a query parameter.

Handling HTTP query parameters in Playwright typically involves setting up your request with the desired parameters before navigating to a URL. Playwright provides methods to easily construct and use URLs with query parameters.

Below is an example of Query Parameter.

https://jsonplaceholder.typicode.com/comments?users=2

Here’s how you can handle them in Playwright:

1. Setup Your Playwright Testing Environment:

Verify that the Playwright installed in your project. If you haven’t yet installed it, you can use:

npm install playwright

2. Update playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
});

3. Writing the API Test

You can construct a URL using Node.js’s `URL` API, where you append your query parameters to a base URL.

// Define a type for the expected structure of a comment
type Comment = {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
};

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

test('API Testing - Query Params with Playwright', async ({ request }) => {
  const queryParams = new URLSearchParams({ postId: '1' });

  // Perform a GET request
  const response = await request.get(`https://jsonplaceholder.typicode.com/comments?${queryParams.toString()}`);

  // Check the response status code
  expect(response.status()).toBe(200);

  // Parse the response data
  const responseBody = await response.json();
  console.log(responseBody);

  // Assertions based on expected response
  const postIds = responseBody.map((item: Comment) => item.postId);
  console.log(postIds);

  // Assert that every postId in the response is '1'
  expect([...new Set(postIds)]).toEqual([1]);

  // Extract IDs from the response body
  const ids = responseBody.map((item: Comment) => item.id);
  console.log(ids);

  // Expected IDs to assert against
  const expectedIds = [1, 2, 3, 4, 5];

  // Assert that the IDs are as expected
  expect(ids).toEqual(expectedIds);
});

Explanation:

1. Type Definition

A TypeScript type Comment is defined to specify the structure of the expected response object. This includes properties like postId, id, name, email, and body.

type Comment = {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
};

2. Imports

This line imports the test and expect functions from Playwright’s testing library. These functions provide a structure for writing tests and asserting conditions within them.

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

3. Test Definition

This defines an asynchronous test case named “Query Params with Playwright”. The test receives a `request` object as a parameter, which is used to perform HTTP requests.

test('API Testing - Query Params with Playwright', async ({ request })

4. Query Parameters Setup

The `URLSearchParams` API is utilized to build the query parameters, in this case, `postId=1`.

These query parameters are appended to the base URL to form the complete URL for the GET request.

const queryParams = new URLSearchParams({ postId: '1' });

5. Performing a GET Request

Sends a GET request to the specified URL.

const response = await request.get(`https://jsonplaceholder.typicode.com/comments?${queryParams.toString()}`);

6. Checking the Response Status Code

Retrieve HTTP status code for response validation.

 expect(response.status()).toBe(200);

7. Parsing the Response Data

Parse response data into JSON format

const responseBody = await response.json();

8. Logging the Response

This outputs the response body to the console, allowing you to see the returned JSON data.

console.log(responseBody);

9. Perform assertions on the response

The assertions verify that the response contains expected data.

The code extracts and logs postIds from each item in the `responseBody`.
An assertion ensures all postId‘s in the response are 1, corresponding to the query parameter used
Similarly, ids are extracted, logged, and compared against a predefined list of expected IDs [1, 2, 3, 4, 5].
An assertion checks that the `ids` match the expected IDs. This ensures that the response is consistent with the anticipated results when querying with postId=1

// Assertions based on expected response
  const postIds = responseBody.map((item: Comment) => item.postId);
  console.log(postIds);

  // Assert that every postId in the response is '1'
  expect([...new Set(postIds)]).toEqual([1]);

  // Extract IDs from the response body
  const ids = responseBody.map((item: Comment) => item.id);
  console.log(ids);

  // Expected IDs to assert against
  const expectedIds = [1, 2, 3, 4, 5];

  // Assert that the IDs are as expected
  expect(ids).toEqual(expectedIds);

4. Execute the tests through Test Explorer View

The output of the above program is

5. Execute the tests through Command Line

You can also run the tests through the command line. Go to the terminal and use the below command:-

npx playwright test api_queryparam_tests.spec.ts

This command runs all the tests present in this file.

6. Evaluate Test Results

Analyze console outputs and assertions to validate the response data, ensuring that your API endpoints are functioning as designed.

Playwright generates a test report after the execution of the tests. This test report can be viewed by using the below command:

npx playwright show-report

The output of the above command is

Below is an example of Index.html Report generated by Playwright.

To know more about Playwright UI mode, please refer to this website – https://playwright.dev/docs.

January 2, 2026 vibssingh

How to Execute DELETE Requests in Playwright

Last Updated On

HOME

Playwright can be used to get access to the REST API of the application.

In this tutorial, I will go through the steps to execute the PATCH requests in Playwright.

Table of contents

What is DELETE Request?

A DELETE request is an HTTP method used in web development to remove a specific resource from a server. Upon a successful deletion, the server will respond with a status code like 200 OK or 204 No Content.

System Requirement

Node.js version 18 or higher and npm (comes with Node.js)
Windows 10+, macOS 12+, or Ubuntu 20.04+
Visual Studio for Code is already installed.
Playwright is already installed

3.1 Setup Your Playwright Testing Environment:

Verify that the Playwright installed in your project. If you haven’t yet installed it, you can use:

npm install playwright

3.2 Update playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
});

3.3 Writing the API Test

Here’s an example script demonstrating API testing for DELETE operation using Playwright:

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

 test('API Testing - DELETE with Playwright', async ({ request }) => {

// Perform a DELETE request
const response = await request.delete('https://jsonplaceholder.typicode.com/posts/1');
     
     // Check the response status code
     expect(response.status()).toBe(200);

      // Parse the response data
     const responseBody = await response.json();
     console.log(responseBody);
     
   });

Explanation:

1. Imports

This line imports the test and expect functions from Playwright’s testing library. These functions provide a structure for writing tests and asserting conditions within them.

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

2. Test Definition

This defines an asynchronous test case named “API Testing – DELETE with Playwright”. The test receives a request object as a parameter, which is used to perform HTTP requests.

test('API Testing - DELETE with Playwright', async ({ request }) => {

3. Performing a DELETE Request

Sends a DELETE request to the specified URL.

const response = await request.delete('https://jsonplaceholder.typicode.com/posts/1');

4. Checking the Response Status Code

Retrieve HTTP status code for response validation.

expect(response.status()).toBe(200);

5. Parsing the Response Data

Parse response data into JSON format

 const responseBody = await response.json();

6. Logging the Response

This outputs the response body to the console, allowing you to see the returned JSON data.

console.log(responseBody);

3.4 Execute the tests through Test Explorer View

The output of the above program is

3.5 Execute the tests through Command Line

You can also run the tests through the command line. Go to the terminal and use the below command:-

npx playwright test api_delete_tests.spec.ts

This command runs all the tests present in this file.

3.6 Evaluate Test Results

Analyze console outputs and assertions to validate the response data, ensuring that your API endpoints are functioning as designed.

Playwright generates a test report after the execution of the tests. This test report can be viewed by using the below command:

npx playwright show-report

The output of the above command is

Below is the Test Report generated by Playwright.

To know more about Playwright UI mode, please refer to this website – https://playwright.dev/docs.

December 15, 2025 vibssingh

How to Execute PATCH Requests in Playwright

Last Updated On

HOME

Playwright can be used to get access to the REST API of the application.

In this tutorial, I will go through the steps to execute the PATCH requests in Playwright.

Table of Contents:

System Requirement

Node.js version 18 or higher and npm (comes with Node.js)
Windows 10+, macOS 12+, or Ubuntu 20.04+
Visual Studio for Code is already installed.
Playwright is already installed

What is PATCH Request?

A PATCH request is an HTTP method used in RESTful APIs to apply partial modifications to a resource. Unlike other methods that may require a complete representation of the resource, PATCH allows for updating only specific parts of the data.

1. Setup Your Playwright Testing Environment:

Verify that the Playwright installed in your project. If you haven’t yet installed it, you can use:

npm install playwright

2. Update playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
});

3. Writing the API Test

Here’s an example script demonstrating API testing for PATCH operation using Playwright:

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

test('API Testing - PATCH with Playwright', async ({ request }) => {

const response = await request.get('https://jsonplaceholder.typicode.com/posts/1');
      
    // Check the response status code 
    expect(response.status()).toBe(200);

    // Parse the response data 
    const responseBody = await response.json();
    console.log(responseBody);

  
     // Perform a PATCH request
     const patchResponse = await request.patch('https://jsonplaceholder.typicode.com/posts/1', {
       data: {
         title: 'Manager'
       }
     });

    // Check the response status code 
    expect(patchResponse.status()).toBe(200);

    // Parse the response data
    const patchResponseBody = await patchResponse.json();
    console.log(patchResponseBody);

    // Validate the response 
    expect(patchResponseBody).toHaveProperty('title', 'Manager');

   });

Explanation:

In the above example, first I have sent a GET request to see the body structure of the response. Then I sent a PATCH request to see the changes in the response body.

1. Imports

This line imports the `test` and `expect` functions from the Playwright testing module. They provide a structure for creating tests and validating outcomes.

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

2. Test Definition

This defines a test case named “API Testing – PATCH with Playwright” using an asynchronous function. The request parameter allows you to perform HTTP operations like GET, PATCH, etc.

test('API Testing - PATCH with Playwright', async ({ request }) => {

3. Performing a PATCH Request

Sends a PATCH request to the specified URL. data transmits the body of the request.

const patchResponse = await request.patch('https://jsonplaceholder.typicode.com/posts/1', {
      data: {
        title: 'Manager'
      }
    });

4. Verifying the status code of the response

Retrieve HTTP status code for response validation.

expect(patchResponse.status()).toBe(200);

5. Parse response data

Parse response data into JSON format

const patchResponseBody = await patchResponse.json();

6. Print response body to console

This outputs the response body to the console, allowing you to see the returned JSON data.

console.log(patchResponseBody);

7. Verifying the response body

Perform assertions on the response.

Check that the title property of the resource now matches ‘Manager’. This verifies that the PATCH request successfully updated the intended field.

expect(patchResponseBody).toHaveProperty('title', 'Manager');

4. Execute the tests through Test Explorer View

The output of the above program is

5. Execute the tests through Command Line

You can also run the tests through the command line. Go to the terminal and use the below command:-

npx playwright test api_patch_tests.spec.ts

This command runs all the tests present in this file.

6. Evaluate Test Results

Analyze console outputs and assertions to validate the response data, ensuring that your API endpoints are functioning as designed.

Playwright generates a test report after the execution of the tests. This test report can be viewed by using the below command:

npx playwright show-report

The output of the above command is

Below is the Test Report generated by Playwright.

To know more about Playwright UI mode, please refer to this website – https://playwright.dev/docs.

December 12, 2025December 15, 2025 vibssingh

Mastering Snapshot Testing with Playwright

Last Updated On

December 15, 2025

HOME

Playwright’s snapshot assertions are an incredibly powerful tool. They ensure your app’s UI remains consistent across code changes. This applies to different browsers and devices. This allows developers to ensure that the UI remains consistent across changes and helps detect unintended changes.

Table of Content

System Requirement

Node.js version 18 or higher and npm (comes with Node.js)
Windows 10+, macOS 12+, or Ubuntu 20.04+
Visual Studio for Code is already installed.
Playwright is already installed

What is the use of Snapshot Testing?

The primary goal of snapshot testing is to automatically detect any visual discrepancies introduced by code modifications. This is particularly useful for components or pages where the visual layout is important and needs to be maintained accurately.

Advantages of Snapshot Testing

Regression Detection: Quickly detects unintended UI changes or regressions.
Efficiency: Offers efficient way to check UI consistency across various browsers and devices.
Reduces Manual UI Testing: Automates a part of the visual testing process. It often involves manual inspection. This automation saves time and reduces human error.

How Snapshot Testing works:

Capture: Playwright captures the current state of a web page or a specific element. It does this by taking a screenshot during the test execution.
Compare: The captured screenshot is compared against a previously stored “baseline” or “expected” snapshot.
Detect Changes: If any differences are found between the current and baseline screenshots, it’s flagged as a failed test. This indicates a visual change.

Project Structure

When should I use page snapshots?

Page snapshots are excellent for verifying the entire page works as expected. Use page snapshots to test layout, responsiveness, and accessibility. Page snapshots can be flaky. After all, if anything within the viewport changes, the entire snapshot will fail.

Below is an example of Snapshot testing of full page.

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

test('snapshot test example', async ({ page }) => {
    
    // Navigate to the page you want to test
     await page.goto('https://playwright.dev/');

     // Capture a snapshot of the whole page
     const screenshot = await page.screenshot();

     // Compare the screenshot to a stored baseline snapshot
     expect(screenshot).toMatchSnapshot('login_page.png');
  
    });

Go to the command line and use the below command to run the test:

npx playwright test snapshot_fullpage_tests.spec.ts

When we run the tests, all the tests will fail. The screenshot is then generated. This screenshot is used as a baseline for the future tests.

Go to the project. You will see a new folder in the tests directory. It contains the screenshots of the tests. Here, we are running 1 test on 3 different browsers, so 3 screenshots are generated.

Playwright also generates Test Report – index.html.

Now, let us rerun the test. This time, the tests will pass, because we have a baseline to compare with the new screenshot.

The test report generated is shown below:

When should I use element snapshots?

Element snapshots, as you expect, focus exclusively on a single page element. This makes them an excellent choice for testing components in isolation, or for verifying an element behaves as expected within a certain context.

Element snapshots are substantially less brittle than page snapshots, but they require a bit more overhead to set up.

Here’s an example of an element snapshot:

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

test('snapshot test example', async ({ page }) => {

    // Navigate to the page you want to test
    await page.goto('https://playwright.dev/');

    // Select the specific UI component using a locator method
    const component = await page.locator('//*[@id="__docusaurus_skipToContent_fallback"]/header/div/h1/span'); 
    
    // Capture a snapshot of a component in the page
    const screenshot = await component.screenshot();

    // Compare the screenshot to a stored baseline snapshot
    expect(screenshot).toMatchSnapshot('Title.png');

});

The output of the above program

Challenges

1. Dynamic Content: Handling pages with unpredictable dynamic content can result in false positives due to differences in dynamic data.
2. Storage: More snapshots mean increased storage requirements.
3. Maintenance: Baselines need to be updated when deliberate visual changes are made.

December 10, 2025 vibssingh

Unlocking Playwright: Test Reports with Tags and Annotations

Last Updated On

HOME

Playwright supports tags and annotations that are displayed in the test report.

You can add your own tags and annotations at any moment, but Playwright comes with a few built-in ones:

Table Of Contents

Below is the playwright.config.ts used in the project.

playwright.config.ts

import { defineConfig, devices } from '@playwright/test';

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './tests',

 /* Run tests in files in parallel */
  fullyParallel: true,
 
 /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
 
 /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry'

  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

  ]

});

Below are the tests mentioned in login_page.spec.ts

login_page.spec.ts

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

test('has title', async ({ page, browserName }) => {
  await page.goto('https://opensource-demo.orangehrmlive.com/');

  // Print the browser name
  console.log(`Running test on browser: ${browserName}`);

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/OrangeHRM/);
});


test('valid login', async ({ page, browserName }) => {

  const username = 'Admin';
  const password = 'admin123'

  await page.goto('https://opensource-demo.orangehrmlive.com/');

  // Print the browser name
  console.log(`Running test on browser: ${browserName}`);

  // Fill in the username
  await page.fill('input[name="username"]', username);

  // Fill in the password
  await page.fill('input[name="password"]', password);

  // Click the login button - Use XPath to locate and click the login button
  const loginButton = await page.locator('//button[@type="submit" and contains(@class, "orangehrm-login-button")]').click();

  // Get the text content from the element
  const dashboardText = await page.locator('//h6[contains(@class, "oxd-topbar-header-breadcrumb-module")]').textContent();

  // Print the text
  console.log(`Dashboard text: ${dashboardText}`);

  expect(dashboardText).toContain('Dashboard');

});


test('invalid username', async ({ page, browserName }) => {

  const username = 'Admin123';
  const password = 'admin123'

  await page.goto('https://opensource-demo.orangehrmlive.com/');

  // Print the browser name
  console.log(`Running test on browser: ${browserName}`);

  // Fill in the username
  await page.fill('input[name="username"]', username);

  // Fill in the password
  await page.fill('input[name="password"]', password);

  // Click the login button - Use XPath to locate and click the login button
  const loginButton = await page.locator('//button[@type="submit" and contains(@class, "orangehrm-login-button")]').click();

  // Get the text content from the element
  const actualErrorMessage = await page.locator('//p[contains(@class, "oxd-alert-content-text") and text()="Invalid credentials"]').textContent();

  // Print the text
  console.log(`Dashboard text: ${actualErrorMessage}`);

  expect(actualErrorMessage).toContain('Invalid credentials');

});

In the above playwright.config file, we have specified 1 browser – chromium.

1. test.skip()

Playwright does not run such a test. Use this annotation when the test is not applicable in some configuration.

test.skip('invalid username',  async ({ page, browserName }) => {
//
}

The output of the above program

We can see this in the Index.html report generated by Playwright.

2. test.fail()

Playwright will run this test and ensure it does indeed fail. If the test does not fail, Playwright will complain. It marks the test as failing.

test.fail('invalid username',  async ({ page, browserName }) {
//
}

The output of the above program

We can see this in the Index.html report generated by Playwright. I have marked invalid username as fail, but the test passes. So, it shows that the test failed.

3. test.fixme()

The `fixme` annotation is used for tests that are expected to fail due to known issues or bugs. It indicates that the test should be skipped until the problems are resolved. It also serves as a reminder that attention is needed to fix the test.

test.fixme('invalid username',  async ({ page, browserName }) => { 
//
}

The output of the above program

We can see this in the Index.html report generated by Playwright.

4. test.slow()

It marks the test as slow and triples the test timeout.

test.slow('invalid username',  async ({ page, browserName }) => { 
//
}

5. Focus a test

You can focus some tests. When there are focused tests, only these tests run.

test.only('invalid username',  async ({ page, browserName }) => {
//
}

The output of the above program

We can see only test – invalid username is executed in the Index.html report generated by Playwright.

6. Conditionally skip a test

You can skip certain test based on the condition.

test('skip this test', async ({ page, browserName }) => {
  test.skip(browserName === 'firefox', 'Still working on it');
});

7. Group tests

We can group tests to give them a logical name or to scope before/after hooks to the group.

test.describe('login check',() => {
test('valid login', async ({ page, browserName }) => {

  const username = 'Admin';
  const password = 'admin123'

  await page.goto('https://opensource-demo.orangehrmlive.com/');
  console.log(`Running test on browser: ${browserName}`);

  await page.fill('input[name="username"]', username);
  await page.fill('input[name="password"]', password);

  const loginButton = await page.locator('//button[@type="submit" and contains(@class, "orangehrm-login-button")]').click();

  const dashboardText = await page.locator('//h6[contains(@class, "oxd-topbar-header-breadcrumb-module")]').textContent();

  console.log(`Dashboard text: ${dashboardText}`);
  expect(dashboardText).toContain('Dashboard');

});


test('invalid username',  async ({ page, browserName }) => {

  const username = 'Admin123';
  const password = 'admin123'

  await page.goto('https://opensource-demo.orangehrmlive.com/');
  console.log(`Running test on browser: ${browserName}`);

  await page.fill('input[name="username"]', username);
  await page.fill('input[name="password"]', password);

  const loginButton = await page.locator('//button[@type="submit" and contains(@class, "orangehrm-login-button")]').click();

  const actualErrorMessage = await page.locator('//p[contains(@class, "oxd-alert-content-text") and text()="Invalid credentials"]').textContent();

  console.log(`Dashboard text: ${actualErrorMessage}`);
  expect(actualErrorMessage).toContain('Invalid credentials');

});

});

The output of the above program

We can see that we have grouped 2 tests into 1 with title – login check in the Index.html report generated by Playwright.

8. Tag tests

8.1 Sometimes you want to tag your tests as @fast or @slow, and then filter by tag in the test report. Or you might want to only run tests that have a certain tag.

To tag a test, either provide an additional details object when declaring a test, or add @-token to the test title. Note that tags must start with @ symbol.

test('invalid username',   {
  tag: '@fast',
}, async ({ page, browserName }) => {
//
}

You can now run tests that have a particular tag with --grep command line option in Powershell. To run the test tagged as @fast, use the below command:

npx playwright test --grep "@fast"

The output of the above program

We can see tagged test in the Index.html report generated by Playwright.

8.2 If we want the opposite, we can skip the tests with a certain tag:

npx playwright test login_page.spec.ts --grep-invert "@fast"

8.3 To run tests containing either tag (logical OR operator):

npx playwright test --grep --% "@fast^|@slow"

8.4 Run tests containing both tags (logical AND operator) using regex lookaheads:

npx playwright test --grep "(?=.*@fast)(?=.*@slow)"

To know more about Playwright, please refer to this website – https://playwright.dev/docs/test-annotations.

That’s it! Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!!

December 8, 2025 vibssingh

How to Execute PUT Requests in Playwright

Last Updated On

HOME

Playwright can be used to get access to the REST API of the application.

In this tutorial, I will go through the steps to execute the PUT requests in Playwright.

What is PUT Request?

A PUT request is an HTTP method used to update a resource at a specified URL, or to create the resource if it does not exist. A key feature of PUT requests is idempotency. This means that multiple identical PUT requests will have the same effect as a single request.

1. Setup Your Playwright Testing Environment:

Verify that the Playwright installed in your project. If you haven’t yet installed it, you can use:

npm install playwright

2. Update playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
});

3. Writing the API Test

Here’s an example script demonstrating API testing for PUT operation using Playwright:

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

 test('API Testing - PUT with Playwright', async ({ request }) => {

    // Perform a GET request
    const response = await request.get('https://jsonplaceholder.typicode.com/posts/1');
      
     // Check the response status code
     expect(response.status()).toBe(200);

     // Parse the response data
     const responseBody = await response.json();
     console.log(responseBody);
  
     // Perform a PUT request
     const putResponse = await request.put('https://jsonplaceholder.typicode.com/posts/1', {
       data: {
         title: 'Manager',
         body: 'Test',
         userId: 1
       }
     });

     // Check the response status code
     expect(putResponse.status()).toBe(200);

     // Parse the response data
     const putResponseBody = await putResponse.json();
     console.log(putResponseBody);

     // Validate the response
     expect(putResponseBody).toHaveProperty('title', 'Manager');
     expect(putResponseBody).toHaveProperty('body', 'Test');
     expect(putResponseBody).toHaveProperty('userId', 1);
   });

Explanation:

In the above example, first I have sent a GET request to see the body structure of the response. Then I sent a PUT request to see the changes in the response body.

1. Imports

This line imports the test and expect functions from Playwright’s testing library. These functions provide a structure for writing tests and asserting conditions within them.

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

2. Test Definition

This defines an asynchronous test case named “API Testing – PUT with Playwright”. The test receives a request object as a parameter, which is used to perform HTTP requests.2.

test('API Testing - PUT with Playwright', async ({ request })

3. Performing a GET Request

 // Perform a GET request
    const response = await request.get('https://jsonplaceholder.typicode.com/posts/1');
      
     // Check the response status code
     expect(response.status()).toBe(200);

     // Parse the response data
     const responseBody = await response.json();
     console.log(responseBody);

4. Performing a PUT Request

Sends a PUT request to the specified URL. data transmits the body of the request.

const putResponse = await request.put('https://jsonplaceholder.typicode.com/posts/1', {
       data: {
         title: 'Manager',
         body: 'Test',
         userId: 1
       }
 });

5. Checking the Response Status Code

Retrieve HTTP status code for response validation.

expect(putResponse.status()).toBe(200);

6. Parsing the Response Data

Parse response data into JSON format

const putResponseBody = await putResponse.json();

7. Logging the Response

This outputs the response body to the console, allowing you to see the returned JSON data.

console.log(putResponseBody);

8. Perform assertions on the response

expect(putResponseBody).toHaveProperty('title', 'Manager');
expect(putResponseBody).toHaveProperty('body', 'Test');
expect(putResponseBody).toHaveProperty('userId', 1);

4. Execute the tests through Test Explorer View

The output of the above program is

5. Execute the tests through Command Line

You can also run the tests through the command line. Go to the terminal and use the below command:-

npx playwright test api_put_tests.spec.ts

This command runs all the tests present in this file.

6. Evaluate Test Results

Analyze console outputs and assertions to validate the response data, ensuring that your API endpoints are functioning as designed.

Playwright generates a test report after the execution of the tests. This test report can be viewed by using the below command:

npx playwright show-report

The output of the above command is

Below is the Test Report generated by Playwright.

To know more about Playwright UI mode, please refer to this website – https://playwright.dev/docs.

December 4, 2025 vibssingh

How to Execute POST Requests in Playwright

Last Updated On

HOME

Playwright can be used to get access to the REST API of the application.

In this tutorial, I will go through the steps to execute the POST requests in Playwright.

Table of Contents

What is POST Request?

A POST request is a type of HTTP request used to send data to a server to create or update a resource. It is one of the most common methods used in web services for communicating between a client (such as a web browser) and a server.

1. Setup Your Playwright Testing Environment:

Verify that the Playwright installed in your project. If you haven’t yet installed it, you can use:

npm install playwright

2. Update playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
});

3. Writing the API Test

Here’s an example script demonstrating API testing for POST operation using Playwright:

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

 test('API Testing - POST with Playwright', async ({ request }) => {

     // Perform a POST request
     const postResponse = await request.post('https://jsonplaceholder.typicode.com/users', {
       data: {
         title: 'Manager',
         body: 'Test',
         userId: 10,
       }
     }); 

     // Check the response status code
     expect(postResponse.status()).toBe(201);

      // Parse the response data
     const postResponseBody = await postResponse.json();
     console.log(postResponseBody);

     // Validate the response
     expect(postResponseBody).toHaveProperty('title', 'Manager');
     expect(postResponseBody).toHaveProperty('body', 'Test');
     expect(postResponseBody).toHaveProperty('userId', 10);
   });

Explanation:

1. Imports

This line imports the test and expect functions from Playwright’s testing library. These functions provide a structure for writing tests and asserting conditions within them.

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

2. Test Definition

This defines an asynchronous test case named “API Testing – POST with Playwright”. The test receives a request object as a parameter, which is used to perform HTTP requests.

test('API Testing - POST with Playwright', async ({ request })

3. Performing a POST Request

Sends a POST request to the specified URL. data transmits the body of the request.

 const postResponse = await request.post('https://jsonplaceholder.typicode.com/users', {
       data: {
         title: 'Manager',
         body: 'Test',
         userId: 10,
       }
     });

4. Checking the Response Status Code

Retrieve HTTP status code for response validation.

expect(postResponse.status()).toBe(201);

5. Parsing the Response Data

Parse response data into JSON format

const postResponseBody = await postResponse.json();

6. Logging the Response

This outputs the response body to the console, allowing you to see the returned JSON data.

console.log(postResponseBody);

7. Perform assertions on the response

The assertions verify that the response contains expected data.

Confirms the response contains a title property with the value Manager.
Asserts that the body property matches ‘Test’.
Checks that the userId property matches 10.

expect(postResponseBody).toHaveProperty('title', 'Manager');
expect(postResponseBody).toHaveProperty('body', 'Test');
expect(postResponseBody).toHaveProperty('userId', 10);

4. Execute the tests through Test Explorer View

The output of the above program is

5. Execute the tests through Command Line

You can also run the tests through the command line. Go to the terminal and use the below command:-

npx playwright test api_post_tests.spec.ts

This command runs all the tests present in this file.

6. Evaluate Test Results

Analyze console outputs and assertions to validate the response data, ensuring that your API endpoints are functioning as designed.

Playwright generates a test report after the execution of the tests. This test report can be viewed by using the below command:

npx playwright show-report

The output of the above command is

Below is the Test Report generated by Playwright.

To know more about Playwright UI mode, please refer to this website – https://playwright.dev/docs.