# Playwright (JS/TS)
## Installation
First we need to install cloudbeat/playwright in your project:
```
npm install @cloudbeat/playwright
```
Then add cloudbeat as the reporter inside playwright.config:
```
reporter: process.env.CB_AGENT ? '@cloudbeat/playwright' : 'html'
```
In order to save screenshots and videos in cloudbeat, make sure to enable them:
```typescript
use: {
trace: "on-first-retry",
video: "on-first-retry",
screenshot: "only-on-failure",
headless: process.env.CB_AGENT ? true : false
},
```
{% hint style="info" %}
When setting `video`, `screenshot`, or `trace` to `on`, Playwright will generate attachments for **every action**, even if it succeeds. This is generally **not recommended**, as it creates many unnecessary files and increases storage and execution time.\
Instead, it's better to use the `on-first-retry` option, which only captures these artifacts if a test fails for the first time (on the first retry). This approach provides a good balance between debugging needs and resource efficiency.
{% endhint %}
{% hint style="info" %}
Since CloudBeat agents run on Linux-based environment, enabling headless mode is mandatory and resulting in faster test execution and more efficient CPU and memory utilization.
{% endhint %}
## Creating a Playwright project in Cloudbeat
Under Manage, open projects and click on add project, choose a name and select Playwright
### Connect your test project to CloudBeat
CloudBeat is a platform for both test reporting and execution. To use CloudBeat, you must upload your test project files to execute tests and access report analytics. You can upload your project as a Zip file, or CloudBeat can automatically synchronize with your test project Git repository.
### Git synchronization
In order to sync your test project from git, select Git Integration and paste the url to your repository.
You can use your username and password, or with an access token.
### Uploading manually
If you want to upload a local test project, you need to zip your project folder, then select upload.
{% hint style="warning" %}
**Make sure you skip node\_modules, and preferably all the unnecessary files such as results, reports, etc.**
{% endhint %}
## Configuring Environments
Under manage, open Environments and recreate the values that you have inside your .env file.
## Running your tests
Under Testing, go to cases and you will see all your tests, make sure Location is enabled under test mode, click on Run Now to execute the selected test on your selected location.
After your test is completed, click on the results tab to see all of the test steps, videos, logs and data.
### Running multiple tests
Under Testing, go to Suites, right-click on Dashboard to create a new suite, or start by creating a new folder then right-click on it and choose Create suites - web.
Go to settings and make sure test mode is set to Location, save changes and choose your location.
Click on the cases tab and select your desired cases.
Similar to a single case, clicking on Run Now will execute all the selected cases.
Under results tab, you will see the status of your tests.
