Playwright Test Generator

The Playwright Test Generator is a tool designed to streamline the process of generating Playwright test scripts for automated web testing. This tool reads a configuration file, generates test scripts based on the URLs specified, and sets up a default Playwright configuration for testing across multiple browsers and devices.

Table of Contents

• Playwright Test Generator
  • Table of Contents
  • Features
  • Prerequisites
  • Installation
  • Usage
    • Running the Generator
    • Configuration
    • Running the Tests
  • Example Workflow
  • Playwright Configuration
  • Troubleshooting

Features

• Automated Test Script Generation: Automatically generate Playwright test scripts for specified URLs.
• Cross-Browser Testing: Out-of-the-box configuration for testing on Chromium, Firefox, WebKit, and branded browsers like Microsoft Edge and Google Chrome.
• Mobile Testing: Includes configuration for testing on mobile devices such as Pixel 5 and iPhone 12.
• Customizable Output: Easily specify the output file for generated tests through a configuration file.
• First-time Setup: Automatically generates a default Playwright configuration file (playwright.config.ts) if one doesn't exist.

Prerequisites

Before using this tool, ensure you have the following installed:

• Node.js (version 18 or higher)
• npm (version 6 or higher)

Installation

You can run the Playwright Test Generator using npx, which requires no additional installation steps:

npx pw-test-gen

Usage

Running the Generator

To generate test scripts, use the following command:

npx pw-test-gen -c <path-to-config>

• -c <path-to-config>: Specify the path to your configuration file. If not provided, the default path ./screenshotTestConfig.json will be used.

Example:

npx pw-test-gen -c myConfig.json

Configuration

Create a JSON configuration file to specify the URLs you want to test and the output path for the generated test file. Below is an example configuration file named screenshotTestConfig.json:

{
  "urls": [
    "https://example.com",
    "https://another-example.com",
    "https://more-examples.com"
  ],
  "outputFile": "tests/multiDeviceScreenshotTests.spec.ts"
}

• urls: An array of URLs you wish to test. The script will generate a separate test for each URL.
• outputFile: The path where the generated test file will be saved. You can specify a custom directory and filename.

Running the Tests

Once the tests are generated, you can run them using the Playwright Test Runner. First, ensure that Playwright is installed:

npx playwright install

Then, execute the tests:

npx playwright test

• The tests will be executed as specified in the playwright.config.ts file.
• Test results and reports will be generated as per the configuration settings.

Example Workflow

1. Generate Tests:

   Run the following command to generate Playwright test scripts:

   npx pw-test-gen -c screenshotTestConfig.json

   This command will read from screenshotTestConfig.json and generate the test file specified in the configuration.

2. Install Playwright:

   If you haven't already, install Playwright to ensure all required browsers and dependencies are available:

   npx playwright install

3. Execute Tests:

   Run the generated tests with:

   npx playwright test

   The test runner will execute the tests across the specified browsers and devices, providing a comprehensive test suite.

Playwright Configuration

The first time you run the script, it will automatically create a default playwright.config.ts file in the current directory. This configuration file includes settings for parallel execution, retry policies, and device/browser configurations.

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./tests",
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: "html",
  use: {
    trace: "on-first-retry",
  },
  projects: [
    {
      name: "chromium",
      use: { ...devices["Desktop Chrome"] },
    },
    {
      name: "firefox",
      use: { ...devices["Desktop Firefox"] },
    },
    {
      name: "webkit",
      use: { ...devices["Desktop Safari"] },
    },
    {
      name: "Mobile Chrome",
      use: { ...devices["Pixel 5"] },
    },
    {
      name: "Mobile Safari",
      use: { ...devices["iPhone 12"] },
    },
    {
      name: "Microsoft Edge",
      use: { ...devices["Desktop Edge"], channel: "msedge" },
    },
    {
      name: "Google Chrome",
      use: { ...devices["Desktop Chrome"], channel: "chrome" },
    },
  ],
});

Feel free to modify this file to suit your specific testing needs, such as changing the test directory or altering the devices and browsers used for testing.

Troubleshooting

• Common Errors: If you encounter any issues related to Playwright or npm, ensure your Node.js and npm versions meet the prerequisites.
• Config File Not Found: Double-check the path to your configuration file if you encounter errors during test generation.