--- title: QA Touch Playwright Integration 2.0 url: https://www.qatouch.com/blog/qa-touch-playwright-integration-2-0/ published: 2026-03-24T12:26:03+00:00 modified: 2026-04-09T14:01:43+00:00 author: Premnath M post_type: post categories: [Playwright, Playwright Integration 2.0] tags: [Playwright, Playwright Integration 2.0] featured_image: https://www.qatouch.com/wp-content/uploads/2026/03/Playwright-Integration-2.0.png word_count: 670 reading_time_minutes: 4 --- # QA Touch Playwright Integration 2.0 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: - 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** ![playwright-integration-2.0.png](https://www.qatouch.com/wp-content/uploads/2026/03/playwright-integration-1.png) #### 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](https://doc.qatouch.com/#qa-touch-api) - Access the Package URL [https://www.npmjs.com/package/playwright-qatouch-reporter](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. ![playwright-integration-2.png](https://www.qatouch.com/wp-content/uploads/2026/03/playwright-integration-2.png) ![playwright-integration-3.png](https://www.qatouch.com/wp-content/uploads/2026/03/playwright-integration-3.png) ![playwright-integration-4.png](https://www.qatouch.com/wp-content/uploads/2026/03/playwright-integration-4.png) ![playwright-integration-5.png](https://www.qatouch.com/wp-content/uploads/2026/03/playwright-integration-5.png) **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](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 Access your Domain, API Token, and Project Key by visiting the Test Run page and selecting the configuration icon to view all the necessary information. ![playwright-integration-10.png](https://www.qatouch.com/wp-content/uploads/2026/03/playwright-integration-10.png) ![playwright-integration-9.png](https://www.qatouch.com/wp-content/uploads/2026/03/playwright-integration-9.png) #### 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** ![playwright-integration-6.png](https://www.qatouch.com/wp-content/uploads/2026/03/playwright-integration-6.png) ## QA Touch Test Result Sync – Successfully If you’re already using QA Touch + Playwright, upgrading to 2.0 will immediately enhance your testing workflow. **Browser Different Result (WebKit, Chrome, Firefox):** 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. **Attachment Sync:** Automatically uploads and links Playwright-generated screenshots to the respective test cases in QA Touch, helping teams quickly debug failures with complete visual and execution evidence. **Time Spent:** 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. Ready to try it? Start upgrading your integration today and experience smarter test automation. ![playwright-integration-7.png](https://www.qatouch.com/wp-content/uploads/2026/03/playwright-integration-7.png) ![playwright-integration-8.png](https://www.qatouch.com/wp-content/uploads/2026/03/playwright-integration-8.png)