Playwright (JS/TS)

Integrating Playwright JavaScript/TypeScript based tests

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:

  use: {
    trace: "on-first-retry",
    video: "on-first-retry",
    screenshot: "on-first-retry",
    headless: true
  },

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.

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.

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.

Make sure you skip node_modules, and preferably all the unnecessary files such as results, reports, etc.

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.