Author: vibssingh

vibssingh

How to Execute GET Requests in Playwright

Last Updated On

HOME

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

There are instances when you might prefer to send requests directly from Node.js without the need to load a webpage or execute JavaScript within it. Here are a few scenarios where this approach can be particularly useful:

Evaluating your server API directly for testing purposes.
Configuring the server-side state prior to interacting with your web application during a test.
Verifying server-side conditions after performing certain actions within the browser.

In this tutorial, we will execute GET request in Playwright.

What is GET Request?

A GET request is an HTTP method used to retrieve data from a specified resource on a server, such as when you browse a website or an API. It’s considered a safe, read-only operation that should not change any data on the 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

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

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

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

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

     // Perform a GET request
     const response = await request.get('https://jsonplaceholder.typicode.com/users/1');
      
     // 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
     expect(responseBody).toHaveProperty('id', 1);
     expect(responseBody).toHaveProperty('name','Leanne Graham');
     expect(responseBody).toHaveProperty('address.zipcode','92998-3874');
     expect(responseBody).toHaveProperty('address.geo.lat','-37.3159');

   });

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 with Playwright”. The test receives a `request` object as a parameter, which is used to perform HTTP requests.

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

3. Performing a GET Request

Sends a GET request to the specified URL.

 const response = await request.get('https://jsonplaceholder.typicode.com/users/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);

7. Perform assertions on the response

The assertions verify that the response contains expected data.

  • Confirms the response contains an id property with the value 1.
  • Asserts that the name property matches ‘Leanne Graham’.
  • Checks that the zipcode within the address object is ‘92998-3874’.
  • Ensures the latitude within the geo object of the address is ‘-37.3159’.
expect(responseBody).toHaveProperty('id', 1);
expect(responseBody).toHaveProperty('name','Leanne Graham');
expect(responseBody).toHaveProperty('address.zipcode','92998-3874');
expect(responseBody).toHaveProperty('address.geo.lat','-37.3159');

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_get_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_get_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.

vibssingh

How to Attach Screenshots in Playwright for Failed Tests

Last Updated On

HOME

Attaching screenshots to failed tests is a beneficial practice in testing, especially for browser automation testing. It helps in visualizing what went wrong and aids in debugging. Here’s how you can attach screenshots to failed tests using Playwright.

Table of Contents

  1. Update Playwright Test Configurations
  2. Run the test through Test Explorer View
  3. Run the tests through Command Line

1. Update Playwright Test Configurations

You can configure the playwright.config.js file to take screenshots for failed tests. These screenshots are saved in the test-results folder and attach to the index.html report:

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

export default defineConfig({
  
  testDir: './tests',

  /* Retries each failed test 1 time automatically */
  retries: 0,  

  /* 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',

    headless: false,
    
    screenshot: 'only-on-failure',
  },

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

     ],

});

Below is the project structure.

Below are the tests. 

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('Dashboard1');

});

2. Run the test 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 login_page.spec.ts file.

The output of the above program is

We can see that playwright-report folder is created. This folder contains index.html.

test-results folder is created that contains the screenshot of the failed test with the name of “test-failed-1.png”

Below is the image of the index.html report.

3. Run the tests through Command Line

You can also run the tests through the command line

npx playwright test login_page.spec.ts

This command runs the tests. It generates the screenshot of the failed tests. It attaches the failed tests screenshot to the index.html report.

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

vibssingh

Automate Playwright Tests with Command-Line Options

Last Updated On

HOME

Command-line interfaces (CLI) are essential for automating tasks. Using CLI commands, you can integrate Playwright tests into Continuous Integration/Continuous Deployment (CI/CD) pipelines. This allows for automatic testing whenever code changes are made. This ensures quality and consistency.

Running tests via the command line can be more resource-efficient, as it minimizes overhead from graphical interfaces. This is particularly helpful in headless testing environments where UI rendering is unnecessary.

Table Of Contents

  1. Running all the tests
  2. Run single test file
  3. Specific File or Directory
  4. Using Test Title Filtering
  5. List Tests

Below is the structure of 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'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    } 

  ]

});

example.spec.ts 

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

test('has title', async ({ page, browserName }) => {
  await page.goto('https://playwright.dev/');

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

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

});

test('get started link', async ({ page, browserName }) => {
  await page.goto('https://playwright.dev/');

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

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

login_page.specs.ts

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

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

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

  // 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 = page.locator('//button[@type="submit" and contains(@class, "orangehrm-login-button")]');
  await loginButton.click();

  // Check if the page contains text Dashboard - Locate the element using XPath
  const dashboardElement = await page.locator('//h6[contains(@class, "oxd-topbar-header-breadcrumb-module")]');

  // Get the text content from the element
  const dashboardText = await dashboardElement.textContent();
  
  // Print the text
  console.log(`Dashboard text: ${dashboardText}`);
  
  expect(dashboardText).toContain('Dashboard');
});

In the above playwright.config file, we have specified 3 browsers. So, a single test will run on 3 different browsers – chromium, firefox and webkit.

1. Running all the tests

You can run your tests with the playwright test command. This runs your tests on all browsers as configured in the playwright.config file, and results appear in the terminal. Tests run in headless mode by default, meaning no browser window opens while running the tests.

npx playwright test

2. Run single test file

To run a single test file, pass in the test file name that you want to run.

npx playwright test login_page.spec.ts

3. Specific File or Directory

To run files that has example in the file name, simply pass in these keywords to the CLI.

npx playwright test example

4. Using Test Title Filtering

To run a test with a specific title, use the -g flag followed by the title of the test.

npx playwright test -g "valid login"

5. List Tests

You can list all available tests to verify which tests are being recognized by Playwright using:

npx playwright test --list

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

vibssingh

How to Run Playwright Tests in UI Mode

Last Updated On

HOME

By default, Playwright runs in headless mode, but you can switch to UI mode by configuring the browser options. 

Why do we need to run the tests in UI mode?

UI mode allows testers to see each step of their script being executed visually, which is incredibly useful for debugging. You can observe visual changes and responses in real-time. It helps in identifying visual and interaction-based errors. These errors might only manifest when elements are rendered visibly. Examples include layout issues, hidden buttons, or dynamic element changes.

There are multiple ways to run the tests in UI mode.

1.Update Playwright Test Configurations

Playwright’s test runner has configuration options. You can set it in the configuration file to run tests in UI mode for specific scenarios. Alternatively, you can configure it to run tests in UI mode generally. Modify the playwright.config.js:

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,
 
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  
  /* 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: {

   // Running tests in UI mode
    headless: false
  }

});

Below is the project structure.

Below are the tests. 

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

test('has title', async ({ page, browserName }) => {
  await page.goto('https://playwright.dev/');

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

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

test('get started link', async ({ page, browserName }) => {
  await page.goto('https://playwright.dev/');

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

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

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.

Click on the inverted triangle red icon. The tests are running in UI mode now.

2. Launch Tests in UI Mode

To start running your tests in UI mode, execute the following command from your project’s root folder:

npx playwright test --ui

This command opens the Playwright Test Runner in UI mode. You will see a graphical interface where you can:

  1. Watch Test Execution: See individual tests being run and viewing the browser interactions step-by-step.
  2. Inspect Elements: Directly interact with the page under test.
  3. Debug Failed Tests: Access console logs, network information, and more.
  4. Rerun Specific Tests: Select different tests to rerun without restarting the whole suite

The Playwright UI allows you to:

  1. Filter Tests: Use search functionality to find specific tests.
  2. Select Browsers: Choose different browsers to execute the tests.
  3. Pause and Step Through: Review the execution step-by-step for a deeper understanding of test behavior.

Simply close the UI or stop the command line process to exit the UI mode.

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

vibssingh

How to Specify Browsers in Playwright Tests

Last Updated On

HOME

In Playwright, you can specify which browser to use when running your tests. This can be done through configuration settings. You can also do it directly via command-line options. Playwright supports multiple browsers including Chromium, Firefox, and WebKit.

Here are the steps to run tests using a specific browser:

1. Configuration in `playwright.config.js`:

You can set a default browser in your Playwright configuration file. Create or modify playwright.config.js to specify the browser, like I have specified Chromium in playwright.config.js file.

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'] },
    }
  ]

});

By setting the `browserName` in the configuration, all tests will run using the specified browser by default unless overridden.

Below are the tests. 

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

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

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

  await page.waitForTimeout(3000); // Wait for 3 seconds

  // 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);
  
  // Print the username
  console.log(`Logging in with username: ${username}`);

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

  // Print the password
  console.log(`Logging in with 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');

});

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.

Click on the inverted triangle red icon. The tests are running in UI mode now.

The output of the above program is

2. Command-Line Options

To specify which browser you would like to run your tests on, use the --project flag. Follow it with the browser name.

npx playwright test login_page.spec.ts --project webkit

The output of the above program is

To specify multiple browsers to run your tests on, use the --project flag multiple times followed by each browser name.

npx playwright test login_page.spec.ts --project webkit --project firefox

The output of the above program is

3. Projects for Multiple Browsers:

If you want to run tests across multiple browsers consistently, you can define projects in your configuration file:

npx playwright test login_page.spec.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'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    } 
  ]
});

The output of the above program is

By configuring which browser to use, Playwright provides flexibility to ensure your tests are compatible across multiple browser environments.

vibssingh

How to install Playwright in Windows?

HOME

In this tutorial, I will explain the steps to install Playwright on a Window machine. To install Playwright on a Windows machine, you will typically use Node.js and the npm (Node Package Manager).

Table of Contents

  1. System Requirements
  2. Implementation Steps
    1. Install Node.js and npm
    2. Create a Project Directory
    3. Install Playwright
    4. Create a new Playwright project
    5. Running the Example Test through Terminal
    6. HTML Test Reports

System Requirements:

  • Node.js version 18 or higher
  • npm (comes with Node.js)
  • Windows 10+, macOS 12+, or Ubuntu 20.04+
  • At least 2GB free disk space for browser binaries
  • Visual Studio for Code is already installed.

Visual Studio for Code must be installed. If it is not already installed, please refer to this tutorial – How to Install Visual Studio Code on Windows.

Below are the step-by-step instructions to get Playwright up and running on Windows:

Implementation Steps:

1. Install Node.js and npm

Please refer the below tutorial to install node.js.

How to install node.js on windows 11

2. Create a Project Directory

Open Command Prompt or PowerShell. Make a new directory for your Playwright project and navigate into it:

The new empty folder “playwright-demo-project” is created in Documents/Playwright folder.

3. Install Playwright

Open Visual Studio for Code. Install “Playwright Test for VSCode” from Microsoft via the Extensions tab.

Once the plugin is installed. We can see a new Funnel icon called Testing as shown in the image.

4. Create a new Playwright project

Go to File and select Open Folder we have created earlier – playwright-demo-project.

We can see the project is opened in VS code.

Go to the terminal in this project and open a New Terminal.

Type the below command in the terminal

npm init playwright@latest

When prompted, choose / confirm:

  • TypeScript or JavaScript (default: TypeScript)
  • Tests folder name (default: tests, or e2e if tests already exists)
  • Add a GitHub Actions workflow (recommended for CI) – Initial project, so mentioned False
  • Install Playwright browsers (default: yes)

Playwright downloads required browser binaries and creates the scaffold below.

playwright.config.ts         # Test configuration
package.json
package-lock.json            # Or yarn.lock / pnpm-lock.yaml
tests/
  example.spec.ts            # Minimal example test

The playwright.config centralizes configuration: target browsers, timeouts, retries, projects, reporters and more. In existing projects dependencies are added to your current package.json.

tests/ contains a minimal starter test. tests-examples/ provides richer samples (e.g. a todo app) to explore patterns.

5. Running the Example Test through Terminal

By default tests run headless in parallel across Chromium, Firefox and WebKit (configurable in playwright.config). Output and aggregated results display in the terminal.

npx playwright test

6. HTML Test Reports

After a test run, the HTML Reporter provides a dashboard filterable by the browser, passed, failed, skipped, flaky and more. Click a test to inspect errors, attachments and steps. It auto-opens only when failures occur; open manually with the command below.

npx playwright show-report

The report is also present in playwright-report folder with the name of “index.html”.

Summary:
1. Install Node.js.
2. Initialize npm project.
3. Install Playwright.
4. Run a test script to verify your setup.
5. View Test report – Index.html report

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

vibssingh

Playwright Tutorials

Last Updated Date

HOME

Playwright is a modern and powerful end-to-end testing framework developed by Microsoft, specifically designed for the automation of web applications.  It supports programming languages like Java, Python, C#, and NodeJS. Playwright comes with Apache 2.0 License and is most popular with NodeJS with Javascript/Typescript.

Playwright with Java

Chapter 1 Web Automation Testing with Playwright Java – NEW
Chapter 2 Run Playwright Java tests in headed mode – NEW
Chapter 3 Cross Browser Testing in Playwright Java – Coming Soon
Chapter 4 Integration of Playwright Java with TestNG – Coming Soon
Chapter 5 Integration of Playwright Java with JUnit5 – Coming Soon

Playwright with TypeScript

UI Testing

Chapter 1 How to install node.js on windows 11
Chapter 2 How to Install Visual Studio Code on Windows
Chapter 3 Why Choose Playwright for Browser Automation?
Chapter 4 How to install Playwright in Windows?
Chapter 5 How to run tests in UI mode in Playwright
Chapter 6 How to Specify Browsers in Playwright Tests
Chapter 7 Automate Playwright Tests with Command-Line Options
Chapter 8 How to Attach Screenshots in Playwright for Failed Tests
Chapter 9 Unlocking Playwright: Test Reports with Tags and Annotations – NEW
Chapter 10 Mastering Snapshot Testing with Playwright – NEW

API Testing

Chapter 1 How to Execute GET Requests in Playwright
Chapter 2 How to Execute POST Requests in Playwright
Chapter 3 How to Execute PUT Requests in Playwright
Chapter 4 How to Execute PATCH Requests in Playwright
Chapter 5 How to Execute DELETE Requests in Playwright – NEW
Chapter 6 Mastering Query Parameters in Playwright API Tests – NEW
Chapter 7 Send JSON File as Payload in Playwright – NEW
Chapter 8 Send XML File as Payload in Playwright – Coming Soon
vibssingh

Why Choose Playwright for Browser Automation?

HOME

Table of Contents

  1. What is Playwright?
  2. Features of Playwright
  3. Disadvantages of Playwright
  4. Why choose Playwright Automation?

What is Playwright?

Playwright is a modern and powerful end-to-end testing framework developed by Microsoft, specifically designed for the automation of web applications.  It supports programming languages like Java, Python, C#, and NodeJS. Playwright comes with Apache 2.0 License and is most popular with NodeJS with Javascript/Typescript.

Playwright was created by the same engineering team that built Puppeteer. The Playwright team created Playwright to extend Puppeteer’s UI automation capabilities to all rendering engines, no longer just supporting Chromium.

Features of Playwright

Cross-Browser Support:

Playwright can automate web pages across all major browsers. This includes Chromium, which is used by Google Chrome, Firefox, and WebKit, which is used by Safari. These capabilities allow for extensive cross-browser testing.

2. Multi-Language Support:

Playwright is available in several programming languages, including JavaScript, TypeScript, Python, .NET, and Java, making it accessible to a wide range of developers.

3. Multi-Platform Compatibility:

 It supports running tests on various operating systems, including Windows, macOS, and Linux.

4. Auto-Waiting

Playwright waits for elements to be actionable prior to performing actions. It also has a rich set of introspection events. The combination of the two eliminates the need for artificial timeouts – the primary cause of flaky tests.

5. Mobile Emulation

Playwright allows you to emulate mobile devices, such as iPhones and iPads. You can test how your web application behaves on different screen sizes and orientations.

6. Headless Mode

Playwright run tests in visible or headless mode efficiently. It allows testing in headless mode, that means executing browser actions without displaying the UI. This method is faster and suitable for CI/CD pipelines.

7. Video Recording

Playwright automatically records videos of your tests, which can be useful for debugging and for creating visual regression tests.

8. Built-in Test Assertions and Features

Playwright supports assertions and various testing features directly integrated within its framework, allowing testers to verify results seamlessly. Checks are automatically retried until the necessary conditions are met.

9. Visual and Screenshot Testing

Playwright supports visual and screenshot testing helping you capture full-page screenshots, element snapshots, and video recordings.

10. Network Interception and Customization

It allows manipulation and interception of network requests. This feature can be used for testing API calls in isolation. Additionally, it helps in simulating network conditions like offline mode.

11. Code Generation

Playwright includes a code generator. It can generate code for your tests. This feature saves you time and reduces the risk of errors.

12. Shadow DOM and iframe support

Playwright selectors can pierce deep DOM structures and handle nested frames seamlessly.

13. Browser contexts

Playwright creates a browser context for each test. Browser context is equivalent to a brand new browser profile. This delivers full test isolation with zero overhead. Creating a new browser context only takes a handful of milliseconds.

14. Authentication state reuse

Save the authentication state of the context and reuse it in all the tests. This bypasses repetitive log-in operations in each test, yet delivers full isolation of independent tests.

15. Accessibility testing

It includes tools for testing web accessibility, helping ensure that web applications are usable by people with disabilities.

Disadvantages of Playwright

1.Community and Ecosystem

The Playwright ecosystem and community are growing. However, they are smaller compared to more established tools like Selenium. This size difference can affect the availability of plugins and extensions.

2. Learning Curve:

Playwright’s API can be somewhat complex for users new to web testing frameworks. The ability to handle multiple contexts and browsers simultaneously might be overwhelming for beginners who are more familiar with simpler tools.

3. Resource Consumption

Running tests across multiple browsers simultaneously can be resource-intensive. Ensuring that the testing environment can handle the load without affecting performance might require additional infrastructure or optimizations.

4. Rapid Development Changes

As Playwright is actively developed, frequent changes and version updates are necessary. These changes help to keep up with the latest features and fixes. However, they can potentially impact long-term project stability.

5. Limited Built-in Integrations

Compared to some other tools like Cypress, Playwright has fewer out-of-the-box integrations with third-party services (e.g., dashboards).

6. Debugging Complexity

Debugging may require deeper knowledge of asynchronous code, especially where modern applications have complex behaviors needing careful handling within tests.

Why choose Playwright Automation?

Deciding when to use the Playwright framework for web testing involves evaluating several factors. These factors relate to your project’s specific requirements. You should also consider the capabilities of Playwright and your existing infrastructure.

As of end of 2025, the current snapshot of Microsoft Playwright on Github:

  • Active Users: 426.0k
  • Forks (copy of a repository that you manage): 4.8k
  • Releases: 154 (This shows how active they are in fixing and releasing new features)

Ease of Installation and Setup

Playwright’s setup is straightforward. It includes automatic download of compatible browsers. This reduces initial configuration overhead. Other frameworks require manual installation of browser drivers.

Cross-Browser Testing Needs

Playwright offers robust support for Chromium, Firefox, and WebKit, enabling comprehensive cross-browser testing from a single API. If this is critical for your project, Playwright is a strong candidate.

Parallel execution

Playwright’s ability to run tests in parallel across isolated browser contexts significantly reduces execution time.

CI/CD Integration Support

Playwright supports CI/CD integration. It even provides docker images for some language bindings.

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

vibssingh

How to update XML Documents Using Java DOM Parser

Last Updated On

HOME

In this article, we will explain how to update an existing XML file. We will do this by adding new elements using the DOM (Document Object Model) parser. 

Table of Contents

  1. Updating existing Element
  2. Creating and Appending New Elements
  3. Limitations of JAVA DOM

Below is the sample XML which is created and saved in resources/Payloads as SimpleXML.xml. We are going to modify this XML.

Updating existing Element:

Here, I’m updating the position of employee id “1” from “Software Engineer” to “Consultant”.

The complete program looks like as shown below:

package XML.DOM;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.File;
import java.io.IOException;

public class DOM_ModifyXMLDemo {

    public static void main(String[] args) {

        try {

            //Create a DocumentBuilderFactory and DocumentBuilder
            DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
            DocumentBuilder builder = factory.newDocumentBuilder();

            // Parse the XML file into a Document
            Document document = builder.parse(new File("src/test/resources/Payloads/SimpleXML.xml"));

            // Normalize XML structure
            document.getDocumentElement().normalize();

            // Step 3: Update the XML content
            NodeList nodeList = document.getElementsByTagName("employee");

            for (int i = 0; i < nodeList.getLength(); i++) {
                Element employee = (Element) nodeList.item(i);
                String id = employee.getAttribute("id");

                if ("1".equals(id)) {
                    Element position = (Element) employee.getElementsByTagName("position").item(0);
                    position.setTextContent("Consultant");
                }
            }

            //Traverse the nodes to normalize spaces in text nodes
            Node rootNode = document.getDocumentElement();
            normalizeSpace(rootNode);

            //Write changes back to the XML file
            TransformerFactory transformerFactory = TransformerFactory.newInstance();
            Transformer transformer = transformerFactory.newTransformer();
            transformer.setOutputProperty(OutputKeys.INDENT, "yes");
            transformer.setOutputProperty("{http://xml.apache.org/xslt}indent-amount", "2");

            //Writing updated content into the file
            DOMSource domSource = new DOMSource(document);

            StreamResult fileResult = new StreamResult(new File("src/test/resources/Payloads/UpdatedXML.xml"));
            transformer.transform(domSource, fileResult);

            // Print updated XML to console
            StreamResult consoleResult = new StreamResult(System.out);
            transformer.transform(domSource, consoleResult);

            System.out.println("\n XML file updated successfully!");

        } catch (ParserConfigurationException | TransformerException | IOException e) {
            e.printStackTrace();
        } catch (SAXException e) {
            throw new RuntimeException(e);
        }
    }

    private static void normalizeSpace(Node node) {
        if (node.getNodeType() == Node.TEXT_NODE) {
            String trimmedText = node.getTextContent().trim().replaceAll("\\s+", " ");
            node.setTextContent(trimmedText);
        }
        NodeList children = node.getChildNodes();
        for (int i = 0; i < children.getLength(); i++) {
            normalizeSpace(children.item(i));
        }
    }
}

Explanation

Here’s a detailed breakdown of the code:

1. Creating a DocumentBuilder Object

It has ‘newDocumentBuilder()’ method that creates an instance of the class ‘DocumentBuilder’. This DocumentBuilder class is used to get input in the form of streams, files, URLs and SAX InputSources.

DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();

2. Parsing the XML File

The code parses “SimpleXML.xml” from the specified path and normalizes the XML structure (i.e., adjusts the whitespace within the document).

Document document = builder.parse(new File("src/test/resources/Payloads/SimpleXML.xml"));

3. Normalize XML Structure

The method normalize() is invoked on the document’s root element. It cleans up the XML by merging adjacent text nodes. It also removes empty ones.

 document.getDocumentElement().normalize();

4. Update XML Content

A NodeList of “employee” elements is retrieved, and each element is iterated over. The code checks each “employee” element’s “id” attribute. If an employee with id=”1″ is found, its “position” element’s text content is updated to “Consultant”.

  NodeList nodeList = document.getElementsByTagName("employee");

            for (int i = 0; i < nodeList.getLength(); i++) {
                Element employee = (Element) nodeList.item(i);
                String id = employee.getAttribute("id");

                if ("1".equals(id)) {
                    Element position = (Element) employee.getElementsByTagName("position").item(0);
                    position.setTextContent("Consultant");
                }
            }

5. Normalize Spaces in Text Nodes

The normalizeSpace method is defined to recursively traverse nodes, trimming and normalizing spaces in text nodes to ensure consistent formatting. This is called with the root node as an argument.

private static void normalizeSpace(Node node) {
        if (node.getNodeType() == Node.TEXT_NODE) {
            String trimmedText = node.getTextContent().trim().replaceAll("\\s+", " ");
            node.setTextContent(trimmedText);
        }
        NodeList children = node.getChildNodes();
        for (int i = 0; i < children.getLength(); i++) {
            normalizeSpace(children.item(i));
        }
    }

6. Write Changes Back to XML File

After building the elements inside the document with their corresponding attributes, we must write this content into an XML file. We do this by creating a Transformer object, which transforms our source document into StreamResult. It then stores the result in the specified file path with the given name.

TransformerFactory transformerFactory = TransformerFactory.newInstance();
Transformer transformer = transformerFactory.newTransformer();

transformer.setOutputProperty(OutputKeys.INDENT, "yes"); // Pretty print the XML
transformer.setOutputProperty("{http://xml.apache.org/xslt}indent-amount", "4");

DOMSource domSource = new DOMSource(document);

 // Write XML to file
 StreamResult fileResult = new StreamResult(new File("src/test/resources/Payloads/UpdatedXML.xml"));
transformer.transform(domSource, fileResult);

7. Printing the output on the console

We can test our XML file by printing it on the console. This is an optional step.

StreamResult consoleResult = new StreamResult(System.out);
transformer.transform(domSource, consoleResult);

8. Exception Handling

The code handles exceptions that arise from parser configuration, transformation, I/O operations, or SAX parsing.

try {
 } catch (ParserConfigurationException | TransformerException | IOException e) {
            e.printStackTrace();
        } catch (SAXException e) {
            throw new RuntimeException(e);
        }
    }

Creating and Appending New Elements:

It reads an existing XML file. It adds a new “employee” element with nested elements (“name” and “position”). It normalizes spaces within text nodes. Then, it writes the updated content back to an XML file. 

package XML.DOM;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.File;
import java.io.IOException;

import static org.apache.commons.lang3.StringUtils.normalizeSpace;

public class DOM_ModifyXMLAddElementsDemo {

    public static void main(String[] args) {

        try {

            //Create a DocumentBuilderFactory and DocumentBuilder
            DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
            DocumentBuilder builder = factory.newDocumentBuilder();

            // Parse the XML file into a Document
            Document document = builder.parse(new File("src/test/resources/Payloads/SimpleXML.xml"));

            // Normalize XML structure
            document.getDocumentElement().normalize();

            //Locate the root element
            Element rootElement = document.getDocumentElement();

            // Create a new employee element
            Element employee = document.createElement("employee");
            employee.setAttribute("id", "4");

            // Create name element
            Element name = document.createElement("name");
            name.appendChild(document.createTextNode("Milly Mathew"));
            employee.appendChild(name);

            // Create position element
            Element position = document.createElement("position");
            position.appendChild(document.createTextNode("Architect"));
            employee.appendChild(position);

            //Append the new employee node to the root element
            rootElement.appendChild(employee);

            //Traverse the nodes to normalize spaces in text nodes
            Node rootNode = document.getDocumentElement();
            normalizeSpace(rootNode);

            //Write changes back to the XML file
            TransformerFactory transformerFactory = TransformerFactory.newInstance();
            Transformer transformer = transformerFactory.newTransformer();
            transformer.setOutputProperty(OutputKeys.INDENT, "yes");
            transformer.setOutputProperty("{http://xml.apache.org/xslt}indent-amount", "2");

            //Writing updated content into the file
            DOMSource domSource = new DOMSource(document);

            StreamResult fileResult = new StreamResult(new File("src/test/resources/Payloads/UpdatedXML1.xml"));
            transformer.transform(domSource, fileResult);

            // Print updated XML to console
            StreamResult consoleResult = new StreamResult(System.out);
            transformer.transform(domSource, consoleResult);

            System.out.println("\n XML file updated successfully!");

        } catch (ParserConfigurationException | TransformerException | IOException e) {
            e.printStackTrace();
        } catch (SAXException e) {
            throw new RuntimeException(e);
        }
    }

    private static void normalizeSpace(Node node) {
        if (node.getNodeType() == Node.TEXT_NODE) {
            String trimmedText = node.getTextContent().trim().replaceAll("\\s+", " ");
            node.setTextContent(trimmedText);
        }
        NodeList children = node.getChildNodes();
        for (int i = 0; i < children.getLength(); i++) {
            normalizeSpace(children.item(i));
        }
    }

}

The output of the above program is

Explanation

Step 1, 2 and 3 are same as the above program.

4. Locating the Root Element

It retrieves the root element of the XML document using getDocumentElement().

Element rootElement = document.getDocumentElement();

5. Creating and Appending New Elements

A new “employee” element with an attribute “id” is created. Nested elements “name” and “position” are created with relevant text nodes “Milly Mathew” and “Architect”. These elements are appended to the “employee” element, which is then appended to the root element of the XML document.

 // Create a new employee element
 Element employee = document.createElement("employee");
employee.setAttribute("id", "4");

// Create name element
Element name = document.createElement("name");
name.appendChild(document.createTextNode("Milly Mathew"));
employee.appendChild(name);

// Create position element
Element position = document.createElement("position");
position.appendChild(document.createTextNode("Architect"));
employee.appendChild(position);

//Append the new employee node to the root element
rootElement.appendChild(employee);

Step 6, 7 and 8 are same as the above program.

Limitations of JAVA DOM

  1. DOM loads the entire XML file into memory as a tree structure. For very large XML files, this can consume a significant amount of memory. It may lead to potential memory exhaustion. This affects system performance.
  2. Parsing large XML files with DOM can be slower compared to other parsers, such as SAX. This is because the entire document must be read and loaded into memory before any processing can begin.

We are done! Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!!

vibssingh

How to Install Visual Studio Code on Windows

HOME

Visual Studio Code (VS Code) is a free, lightweight, and open-source code editor developed by Microsoft. It supports multiple operating systems, including Windows, macOS, and Linux.

Installation Steps:

Download Visual Studio Code

Step 1: Visit the Official Website of the Visual Studio Code using any web browser like Google Chrome, Microsoft Edge, etc.

This website download the Visual Studio Code Application.

Step 2: When the download finishes, then the Visual Studio Code Icon appears in the downloads folder.

Run Installer

Step 3: Locate the downloaded installer file (it’s usually saved in the “Downloads” folder). Click on the Installer icon to start the installation process of the Visual Studio Code.

Setup Installation

Step 4: After the Installer opens, it will ask you to accept the terms and conditions of the Visual Studio Code. Click on “I accept the agreement” and then click the “Next” button.

Step 5: Choose the location data for running the Visual Studio Code. It will then ask you to browse the location. Then click on the “Next” button.

Step 6: Assign a program name to the VisualStudio Code to appear in the Start Menu folder.

Step 7: Select the additional tasks as per your requirement. I have selected to Create a desktop icon. register code as an editor and app to PATH.

 Step 8: The program will ask to begin the installation setup. Click on the “Install” button.

Install Visual Studio Code

Step 9: Click “Install” to begin the installation. After clicking on Install, it will take about 1 minute to install the Visual Studio Code on your device.

Step 10: Once installation is complete, you’ll be given the option to launch Visual Studio Code immediately. Click “Finish” to complete the setup.

Launch Visual Studio Code

Step 11: After the previous step, the Visual Studio Code window opens successfully. Now you can create a new file in the Visual Studio Code window and choose a language of yours to begin your programming journey

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