Publishing Playwright test results to mabl

Configure your Playwright test suites to export all test run results into the mabl cloud. With the @mablhq/playwright-reporter package, teams can see results from their Playwright tests alongside mabl test runs, making it easier to analyze outcomes and share insights across testing platforms.

Before you start

To use the @mablhq/playwright-reporter package, you will need:

• Playwright 1.43.1 or greater - see Playwright requirements for more information.
• mabl workspace ID - in the mabl workspace where you want to send Playwright test results, get the workspace ID from Settings > Workspace
• mabl API key - create a “Command Line Interface” API key in Settings > API in the mabl app

Install playwright-reporter

Install the @mablhq/playwright-reporter package:

npm install @mablhq/playwright-reporter -D

Configure playwright-reporter

Configure the reporter inside the playwright.config.ts file. Add it under the reporter key in the defineConfig function.

To use the following sample script, store the MABL_API_KEY and MABL_WORKSPACE_ID variables in a separate .env file in the root directory of the test suite, and import their values using dotenv. Include the planName option if you want to publish results as a mabl plan.

import { defineConfig } from '@playwright/test';
import dotenv from 'dotenv';
import path from 'path';
dotenv.config({ path: path.resolve(__dirname, '.env') });

export default defineConfig({
  use: {
    trace: "on",
    screenshot: "on",
  },
  reporter: [
    // Reference the mabl Playwright reporter for use in your test runs
    [
      '@mablhq/playwright-reporter',
      {
        apiKey: process.env.MABL_API_KEY,
        workspaceId: process.env.MABL_WORKSPACE_ID,
        planName: 'SAMPLE_PLAN_NAME'
      },
    ],
  ],
});

The sample script also sets trace and screenshots to “on” so that the test output in mabl includes mabl step details and a screenshot of the final state of the application.

For more information on configuring Playwright reports, refer to the following docs.

Associate Playwright runs with an application and environment

For more effective filtering of your Playwright results in the mabl app, we recommend including the application and environment. Add their associated mabl resource IDs to the project section of the playwright.config.ts file.

To use the following example, store the application ID and environment ID as the environment variables MABL_ENVIRONMENT_ID and MABL_APPLICATION_ID in the .env file.

projects: [
   {
     name: "chromium",
     use: {
       mabl: {
         environmentId: process.env.MABL_ENVIRONMENT_ID,
         applicationId: process.env.MABL_APPLICATION_ID,
       },
     },
   },
  ]

All together, the following script includes the changes required to publish Playwright run results to mabl and associate it with a mabl application and environment:

import { defineConfig } from '@playwright/test';
import dotenv from 'dotenv';
import path from 'path';
dotenv.config({ path: path.resolve(__dirname, '.env') });

export default defineConfig({
  use: {
    trace: "on",
    screenshot: "on",
  },
  reporter: [
    [
      "@mablhq/playwright-reporter",
      {
        apiKey: process.env.MABL_API_KEY,
        workspaceId: process.env.MABL_WORKSPACE_ID,
        planName: "SAMPLE PLAN NAME",
      },
    ],
  ],
  projects: [
    {
      name: "chromium",
      use: {
        mabl: {
          environmentId: process.env.MABL_ENVIRONMENT_ID,
          applicationId: process.env.MABL_APPLICATION_ID,
        },
      },
    },
  ],
});

View results in mabl

When you run your Playwright tests, the output is published back to mabl upon completion of the test. These results are available under the Results tab alongside all other mabl test results.