Playwright Generate Test

playwright-generate-test skill for entertainment & gaming

Category: productivity Source: github

Playwright Generate Test is an AI skill that helps developers automatically generate Playwright test scripts from user interaction recordings, page analysis, and test specifications. It produces well-structured test code with proper assertions, selectors, and wait conditions that follow Playwright best practices for reliable end-to-end testing.

What Is This?

Overview

Playwright Generate Test creates comprehensive test scripts by analyzing web application pages and user flows. It generates test code that uses resilient locator strategies, includes meaningful assertions that verify both UI state and data correctness, handles asynchronous operations with proper wait conditions, and follows the Page Object Model pattern for maintainable test organization. Generated tests cover positive paths, error handling, and edge cases based on the application behavior analysis.

Who Should Use This

This skill serves QA engineers who need to quickly create test coverage for new features, frontend developers writing end-to-end tests alongside their implementation, teams adopting Playwright who want to establish testing patterns quickly, and managers seeking to accelerate test creation for applications that currently lack automated testing.

Why Use It?

Problems It Solves

Writing end-to-end tests is time-consuming and requires understanding of browser automation patterns, selector strategies, and timing issues. Developers often write fragile tests that break when UI changes because they use implementation-specific selectors. Tests frequently lack sufficient assertions, checking only that pages load without verifying that data and interactive states are correct.

Core Highlights

The skill generates tests with accessibility-based locators that survive UI refactoring, includes assertions that verify meaningful application state rather than just element presence, handles common async patterns like loading states and API responses, and organizes tests using Page Object Model for maintainability. Generated tests include setup and teardown hooks for test data management.

How to Use It?

Basic Usage

import { test, expect } from '@playwright/test';

test.describe('User Authentication', () => {
  test('successful login redirects to dashboard', async ({ page }) => {
    await page.goto('/login');

    // Use accessible locators for resilience
    await page.getByLabel('Email').fill('user@example.com');
    await page.getByLabel('Password').fill('validpassword');
    await page.getByRole('button', { name: 'Sign In' }).click();

    // Verify redirect and content
    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
    await expect(page.getByText('user@example.com')).toBeVisible();
  });

  test('invalid credentials shows error message', async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill('user@example.com');
    await page.getByLabel('Password').fill('wrongpassword');
    await page.getByRole('button', { name: 'Sign In' }).click();

    await expect(page.getByRole('alert')).toContainText('Invalid credentials');
    await expect(page).toHaveURL('/login');
  });
});

Real-World Examples

// Page Object Model for maintainable tests
class ProductPage {
  constructor(private page: any) {}

  async addToCart(productName: string) {
    const product = this.page.locator('.product-card').filter({ hasText: productName });
    await product.getByRole('button', { name: 'Add to Cart' }).click();
    await expect(this.page.getByText('Added to cart')).toBeVisible();
  }

  async getCartCount() {
    return parseInt(await this.page.getByTestId('cart-count').textContent() || '0');
  }
}

test('add product to cart updates count', async ({ page }) => {
  await page.goto('/products');
  const productPage = new ProductPage(page);

  const initialCount = await productPage.getCartCount();
  await productPage.addToCart('Wireless Headphones');
  const newCount = await productPage.getCartCount();

  expect(newCount).toBe(initialCount + 1);
});

Advanced Tips

Use Playwright's codegen tool as a starting point and then refine generated selectors to use role-based and label-based locators. Implement test fixtures for common setup patterns like authentication to avoid duplicating login steps across tests. Use API calls in test setup to create test data rather than navigating through UI flows for data preparation.

When to Use It?

Use Cases

Use Playwright Generate Test when building initial test coverage for an application that lacks automated tests, when adding tests for new features alongside development, when migrating from another testing framework to Playwright, or when establishing test patterns and Page Object Models for a team adopting end-to-end testing.

Important Notes

Requirements

Playwright Test package installed with at least one browser engine. Node.js 16 or later. Understanding of the application under test helps refine generated assertions. Access to a running instance of the application for test execution.

Usage Recommendations

Do: review and refine generated tests before adding them to your test suite. Replace auto-generated selectors with accessible locators when possible. Add custom assertions that verify business logic beyond basic element visibility.

Don't: commit generated tests without reviewing them for correctness and appropriate assertion coverage. Use generated tests as the sole source of quality assurance without complementing them with unit and integration tests. Rely on timing-based waits when Playwright's auto-waiting and explicit conditions are more reliable.

Limitations

Generated tests cover observable UI behavior but may miss edge cases that require domain knowledge. Complex multi-step workflows may need manual refinement of the generated interaction sequence. Tests for real-time features like WebSocket updates require additional patterns beyond standard page interaction. Generated Page Object Models need updating when the interface changes.