GitHub Actions Reporter for Playwright

This action reports test results from Playwright to GitHub summaries.

Installation

Install from npm:

npm install @estruyf/github-actions-reporter

Usage

You can configure the reporter by adding it to the playwright.config.js file:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],
    ['@estruyf/github-actions-reporter']
  ],
});

More information on how to use reporters can be found in the Playwright documentation.

Configuration

The reporter supports the following configuration options:

Option	Description	Default
title	Title of the report. Use an empty string ("") to remove the heading.	Test results
useDetails	Use details in summary which creates expandable content	false
showAnnotations	Show annotations from tests	true
showAnnotationsInColumn	Shows annotations from tests but in a column. To enable showAnnotations must be set to true	false
showTags	Show tags from tests	true
showError	Show error message in summary	false
includeResults	Define which types of test results should be shown in the summary	['pass', 'skipped', 'fail', 'flaky']
quiet	Do not show any output in the console	false
showArtifactsLink	Show a link to the artifacts section in the workflow overview	false
azureStorageUrl	URL to the Azure Storage account where the screenshots are stored (optional)	""
azureStorageSAS	Shared Access Signature (SAS) token to access the Azure Storage account (optional)	""

To use these option, you can update the reporter configuration:

import { defineConfig } from '@playwright/test';
import type { GitHubActionOptions } from '@estruyf/github-actions-reporter';

export default defineConfig({
  reporter: [
    ['@estruyf/github-actions-reporter', <GitHubActionOptions>{
      title: 'My custom title',
      useDetails: true,
      showError: true
    }]
  ],
});

Example without details

Example with details

Showing result attachments

If you want to show attachments like when you use pixel matching, you need to provide the configuration for the blob service where the images will be stored.

Note

GitHub does not have an API to link images to the summary. Therefore, you need to store the images in a blob storage service and provide the URL to the images.

Important

To show the attachments, you need to make sure to enable showError as well.

Azure Blob Storage

If you are using Azure Blob Storage, you need to provide the azureStorageUrl and azureStorageSAS configuration options.

Follow the next steps to get the URL and SAS token:

• Go to your Azure Portal
• Navigate to your storage account or create a new one
• Navigate to data storage > containers
• Create a new container. Set the access level to Blob (anonymous read access for blobs only)
• Open the container, and click on Shared access signature
• Create a new shared access signature with the following settings:
  • Allowed permissions: Create
  • Expiry time: Custom (set the time you want)
  • Allowed protocols: HTTPS only
• Click on Generate SAS and URL
• Copy the Blob SAS token, this will be your azureStorageSAS value
• Copy the Blob service URL and append the container name to it, this will be your azureStorageUrl value. Example: https://<name>.blob.core.windows.net/<container-name>.
• Update the playwright.config.js file with the following configuration:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['@estruyf/github-actions-reporter', {
      showError: true,
      azureStorageUrl: 'https://<name>.blob.core.windows.net/<container-name>',
      azureStorageSAS: '<your-sas-token>'
    }]
  ],
});