# Playwright Integration Testing Prompt

A specialized .cursorrules prompt for creating comprehensive integration tests using Playwright with TypeScript support.

## What You Can Build

- **Integration Test Suites**: Tests that verify interactions between UI and API components
- **Critical User Flow Tests**: Tests for essential user journeys across multiple components
- **API Mock-Based Testing**: Integration tests with controlled API response scenarios
- **State Transition Tests**: Validations of application state changes during component interactions
- **Cross-Component Tests**: Tests that verify data flows between connected components

## Benefits

- **Complete Component Interaction Coverage**: Tests that verify how components work together
- **API Dependency Isolation**: Control over API responses using page.route for reliable testing
- **Realistic User Journey Testing**: Focus on critical flows that users actually experience
- **Strong TypeScript Integration**: Type-safe testing with interfaces for API requests and responses
- **Error Path Coverage**: Testing of both happy paths and error scenarios
- **Modern Testing Architecture**: Leverage Playwright's powerful routing and mocking capabilities

## Synopsis

This prompt helps QA engineers create high-quality integration tests with Playwright that focus on how UI components interact with APIs and each other, ensuring critical user flows work correctly across the application.

## Overview of .cursorrules Prompt

The .cursorrules prompt guides QA engineers in creating effective integration tests using Playwright with these key elements:

- **TypeScript Detection**: Automatically detects and adapts to TypeScript usage in the project
- **Integration Testing Focus**: Guidelines for testing component interactions and critical user flows
- **Best Practices**: Eight essential practices for integration testing, including critical flows, semantic selectors, and API mocking
- **Example Test Patterns**: Detailed examples of integration tests for both form submission and shopping cart scenarios
- **API Mocking Strategy**: Approach for using page.route to control API responses during integration tests
- **State Validation**: Methods for verifying UI state updates correctly based on API interactions
- **Type Safety**: TypeScript interfaces for request and response data to ensure type safety