How to Integrate Playwright with QA Touch

What Is PlayWright?

Playwright is an open-source automation tool developed by Microsoft that allows developers to automate the testing of web applications across different browsers (such as Chromium, WebKit, and Firefox) and platforms (including Windows, macOS, and Linux). Playwright enables developers to write reliable and maintainable tests for web applications by automating user interactions such as clicking buttons, filling forms, navigating pages, and validating UI elements.

What’s New in Playwright Integration 2.0?

1) Browser Different Results Tracking

Captures allows for the quick identification of browser-specific problems and the assurance of consistent cross-browser functionality by capturing and displaying test execution results independently for each browser, making it simple to compare pass/fail status, errors, and behaviour differences.

Run a single test case across:

Chromium (Chrome)
WebKit (Safari engine)
Firefox

2) Automatic Screenshot Capture

Playwright generated screenshots to the respective test cases in QA Touch, helping teams quickly debug failures with complete visual and execution evidence. Visual proof for failures Faster root cause analysis. Improved collaboration between QA & Dev teams

3) Time Spent Tracking

Records the execution time of each test case across different browsers, providing insights into performance variations, helping identify slow-running tests, and supporting optimization of overall test execution efficiency.

Prerequisites

Before getting started, ensure you have:

Node.js 18+
QA Touch account with API access
Playwright installed

Step-by-Step Setup (Playwright Integration 2.0)

Step 1: Install Playwright

npm init playwright@latest

After complete the playwright installation and run the

npx playwright test

Step 2: Install QA Touch Reporter

npm i playwright-qatouch-reporter

Step 3: Generate QA Touch API Key

Login to QA Touch
Go to My Profile
Generate API Token
You can refer QA Touch API from https://doc.qatouch.com/#qa-touch-api
Access the Package URL https://www.npmjs.com/package/playwright-qatouch-reporter
Install the package in Playwright root directory by executing the below command from your automation environment from the command line.

Generate API Key

To use QA Touch Reporter, you will need to set up the following environment variables:

Ensure that your QA Touch API is enabled and generate your API keys. See https://doc.qatouch.com/#qa-touch-api

Step 4: Configure Environment Variables

Create a .env file in your Playwright root directory:

QATOUCH_DOMAIN=your-domain
QATOUCH_API_TOKEN=your-api-token
QATOUCH_PROJECT_KEY=your-project-key
QATOUCH_TESTRUN_ID=your-test-run-id

Step 5: Update Playwright Config

Modify your playwright.config.js:

reporter: [
["html"],
["playwright-qatouch-reporter"]
],

Step 6: Enable Screenshot Setting

use: {
    /* Base URL to use in actions like `await page.goto('')`. */
     screenshot:'on',
 
  },

Step 7: Add Test Case Mapping

Playwright-generated screenshots to the respective test cases in QA Touch, helping teams quickly debug failures with complete visual and execution evidence.

Go to tests/example.spec.js Open

Meta key should be TRXXX ID (TestRun Code in qatouch), TR001 Replace below code

test.only('TR0035 hastitle', async ({ page }) => {
  await page.goto('https://qatouch.com/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/End to End Test Management Tool | Software Test Management tool | QA Touch/);

  const timestamp = Date.now();
  await page.screenshot({ path: `tests/screenshots/qatouch-${timestamp}.png`});

});

Final Step :

npx playwright test

QA Touch Test Result Sync – Successfully

PreviousPyTest Plugin

NextRuby Framework