Smarter Cross-Browser Testing with Screenshots, Timing Insights & Enhanced Reporting The evolution of test automation continues and so does QA Touch. Building on our initial Playwright integration, we are excited to introduce Playwright Integration 2.1.2, designed to give QA teams deeper insights, better debugging capabilities, and more control over cross-browser testing. If you’ve already explored the earlier integration, you know that Playwright enables reliable automation across Chromium, WebKit, and Firefox . Now, with version 2.1.2, QA Touch takes it a step further.

What’s New in Playwright Integration 2.0?

1. Browser Different Results TrackingBrowser Different Results Tracking

Captures and displays test execution results separately for each browser, enabling easy comparison of pass/fail status, errors, and behavior differences to quickly identify browser-specific issues and ensure consistent cross-browser functionality. Run a single test case across:

1. Chromium (Chrome)
2. WebKit (Safari engine)
3. 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:

1. Node.js 18+
2. QA Touch account with API access
3. 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

1. Login to QA Touch
2. Go to My Profile
3. Generate API Token
4. You can refer QA Touch API from https://doc.qatouch.com/#qa-touch-api
5. Access the Package URL https://www.npmjs.com/package/playwright-qatouch-reporter
6. 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"]
],
				
			

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

				
					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`});

});