---
title: QA Touch Playwright Integration
url: https://www.qatouch.com/blog/qa-touch-playwright-integration/
published: 2024-04-09T08:58:49+00:00
modified: 2024-04-09T08:58:49+00:00
author: Premnath M
post_type: post
categories: [Integration Guides]
tags: [Playwright Integration]
featured_image: https://www.qatouch.com/wp-content/uploads/2024/04/Playwright-Integration.webp
word_count: 406
reading_time_minutes: 3
---

# QA Touch Playwright Integration

## Playwright Integration &#8211; QA Touch Reporter

The day is finally here. After months of undeterred work, we are pleased to announce to our community that QA Touch is now integrated with Playwright IntegrationÂ  in Test Case Management.

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

**Step 1 : Playwright Installation &#8211; Local Setup**

**npm init playwright@latest**

**![Playwright Integration ](https://www.qatouch.com/wp-content/uploads/2024/04/install.png)**

### **Step 2 : Running the Example Test**

npx playwright test

**How to check Version**

npx playwright &#8211;version

## **System requirements**

### Node.js 18+

## **QA Touch &amp; Playwright Integration Process**

- Login in QA Touch.

- Click My profile &#8211; Generate API key.

- 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 ](https://www.qatouch.com/wp-content/uploads/2024/04/node-1.png)

## **Installation &#8211; QA Touch plugin**

**npm i playwright-qatouch-reporter**

## **Prerequisites**

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)

Add **.env** file to playwright project root folder with the following keys:

QATOUCH_DOMAIN=your-domain

QATOUCH_API_TOKEN=your-api-token

QATOUCH_PROJECT_KEY=Project-Key

QATOUCH_TESTRUN_ID=Test-Run-Id

## ![Playwright Integration ](https://www.qatouch.com/wp-content/uploads/2024/04/env.png)**Usage**

Please open** playwright.config.js file,** replace below code

### **Â reporter: [[&#8220;html&#8221;],[&#8220;playwright-qatouch-reporter&#8221;]],**

![Playwright Integration ](https://www.qatouch.com/wp-content/uploads/2024/04/Screenshot-from-2024-04-08-18-39-47.png)Go to tests/example.spec.js Open

In order to use reporter, you should add meta information to your tests. Meta key should be TRXXX (TestRun Code in qatouch), e.g.:

**Replace below code**

const { test, expect } = require(&#8216;@playwright/test&#8217;);

test(**&#8216;TR0030** has title&#8217;, async ({ page }) =&gt; {

Â Â await page.goto(&#8216;https://qatouch.com&#8217;);

Â Â // Expect a title &#8220;to contain&#8221; a substring.

Â Â await expect(page).toHaveTitle(/End to End Test Management Tool | Software Test Management tool | QA Touch/);

});

![Playwright Integration ](https://www.qatouch.com/wp-content/uploads/2024/04/2.png)**
Running Playwright Command**

npx playwright test

## ![Playwright Integration ](https://www.qatouch.com/wp-content/uploads/2024/04/Playwright-Test-Report-1.png)

## QA Touch Test Result Sync &#8211; Successfully

Please see the below screenshotÂ

![Playwright Integration ](https://www.qatouch.com/wp-content/uploads/2024/04/QA-Touch-Test-Runs-Result.png)![](https://www.qatouch.com/wp-content/uploads/2024/04/status.png)

This integration is just the beginning of a lot more platforms with which we plan to collaborate in the near future to make testing accessible for all.

[Register here](https://register.qatouch.com/) and be the master of your application testing.