Skip to content

🎭 Add Playwright Testing Setup with MCP Integration #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
codegen-sh wants to merge 2 commits into from
Closed

🎭 Add Playwright Testing Setup with MCP Integration #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8382f54
feat: Add Playwright testing setup with MCP integration
codegen-sh[bot] Aug 6, 2025
915f25a
fix: Remove sensitive tokens from documentation
codegen-sh[bot] Aug 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions README-PLAYWRIGHT.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
# Playwright Testing Setup

This document provides a quick start guide for the Playwright testing setup in the Lambda Query Forms repository.

## 🚀 Quick Start

### 1. Install Dependencies
Dependencies are already installed! The setup includes:
- Playwright test framework
- Browser binaries (Chromium, Firefox, WebKit)
- System dependencies for headless browser execution

### 2. Run Tests

```bash
# Run all Playwright tests
yarn test:playwright

# Run tests with UI mode (interactive)
yarn test:playwright:ui

# Run tests in debug mode
yarn test:playwright:debug

# Run specific test file
yarn playwright test tests/mcp-integration.spec.ts
```

### 3. Start Storybook for Component Testing

```bash
# In one terminal - start Storybook
cd apps/docs && yarn dev

# In another terminal - run form-specific tests
yarn playwright test tests/forms-mcp-demo.spec.ts
```

## 📁 Test Files

- `tests/example.spec.ts` - Basic Storybook navigation tests
- `tests/mcp-integration.spec.ts` - External website testing examples
- `tests/forms-mcp-demo.spec.ts` - Form component testing demonstrations

## 🔧 Configuration

The Playwright configuration is in `playwright.config.ts` and includes:
- Multi-browser testing (Chromium, Firefox, WebKit)
- Screenshot and trace collection on failures
- Base URL configuration for Storybook
- HTML reporting

## 🤖 MCP Integration

The repository is configured to work with the Playwright MCP server for AI-driven testing. See `docs/playwright-mcp-integration.md` for detailed information.

### MCP Configuration
```json
{
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--browser=chromium",
"--headless",
"--no-sandbox"
]
}
}
```

## 📊 Test Results

Test results are stored in:
- `test-results/` - Screenshots and artifacts
- `playwright-report/` - HTML test reports

## 🐛 Troubleshooting

### Common Issues

1. **Storybook not running**: Make sure Storybook is started with `cd apps/docs && yarn dev`
2. **Browser dependencies**: System dependencies are pre-installed, but if you encounter issues, check the integration guide
3. **Port conflicts**: Storybook runs on port 6006 by default

### Getting Help

- Check `docs/playwright-mcp-integration.md` for detailed setup information
- Review test examples in the `tests/` directory
- Consult the [Playwright documentation](https://playwright.dev/docs/intro)

## 🎯 Next Steps

1. Write tests specific to your form components
2. Set up CI/CD integration
3. Add visual regression testing
4. Explore MCP integration for AI-driven testing

164 changes: 164 additions & 0 deletions docs/playwright-mcp-integration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
# Playwright MCP Integration Guide

This document outlines how to integrate Playwright with the MCP (Model Context Protocol) server for automated browser testing in the Lambda Query Forms repository.

## Setup Complete ✅

The following components have been successfully installed and configured:

### 1. Playwright Installation
- ✅ Playwright and @playwright/test packages installed
- ✅ Browser binaries downloaded (Chromium, Firefox, WebKit)
- ✅ System dependencies installed for browser execution
- ✅ Playwright configuration file created (`playwright.config.ts`)

### 2. Test Scripts Added
- ✅ `yarn test:playwright` - Run Playwright tests
- ✅ `yarn test:playwright:ui` - Run tests with UI mode
- ✅ `yarn test:playwright:debug` - Run tests in debug mode

### 3. MCP Server Configuration

The updated MCP configuration (as recommended) removes the explicit executable path to let Playwright auto-detect the browser:

```json
{
"mcpServers": {
"context7": { "url": "https://mcp.context7.com/mcp" },
"medusa": { "url": "https://docs.medusajs.com/mcp" },
"supabase": {
"command": "npx",
"args": [
"-y",
"@supabase/mcp-server-supabase@latest",
"--project-ref=YOUR_PROJECT_REF"
],
"env": {
"SUPABASE_ACCESS_TOKEN": "YOUR_SUPABASE_ACCESS_TOKEN"
}
},
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--browser=chromium",
"--headless",
"--no-sandbox"
]
}
}
}
```

### Key Changes Made:
- ✅ Removed `--executable-path` argument to allow auto-detection
- ✅ Added `--no-sandbox` for containerized environments
- ✅ Configured for headless operation

## Available MCP Tools

The Playwright MCP server provides the following tools for browser automation:

### Navigation
- `playwright_1mcp_browser_navigate` - Navigate to URLs
- `playwright_1mcp_browser_navigate_back` - Go back in history
- `playwright_1mcp_browser_navigate_forward` - Go forward in history

### Interaction
- `playwright_1mcp_browser_click` - Click elements
- `playwright_1mcp_browser_type` - Type text into inputs
- `playwright_1mcp_browser_press_key` - Press keyboard keys
- `playwright_1mcp_browser_hover` - Hover over elements
- `playwright_1mcp_browser_drag` - Drag and drop
- `playwright_1mcp_browser_select_option` - Select dropdown options

### Information Gathering
- `playwright_1mcp_browser_snapshot` - Get accessibility snapshot
- `playwright_1mcp_browser_take_screenshot` - Capture screenshots
- `playwright_1mcp_browser_console_messages` - Get console logs
- `playwright_1mcp_browser_network_requests` - View network activity

### Browser Management
- `playwright_1mcp_browser_resize` - Resize browser window
- `playwright_1mcp_browser_tab_list` - List open tabs
- `playwright_1mcp_browser_tab_new` - Open new tab
- `playwright_1mcp_browser_tab_select` - Switch tabs
- `playwright_1mcp_browser_tab_close` - Close tabs

### Utilities
- `playwright_1mcp_browser_wait_for` - Wait for conditions
- `playwright_1mcp_browser_evaluate` - Execute JavaScript
- `playwright_1mcp_browser_file_upload` - Upload files
- `playwright_1mcp_browser_handle_dialog` - Handle alerts/dialogs

## Testing the Integration

### 1. Basic Playwright Tests
Run the standard Playwright tests to verify the installation:

```bash
yarn test:playwright
```

### 2. MCP Integration Tests
The MCP integration allows you to control browsers programmatically through the MCP protocol. Example usage:

```typescript
// Example of how MCP tools would be used
await playwright_1mcp_browser_navigate({ url: 'http://localhost:6006' });
await playwright_1mcp_browser_snapshot(); // Get page structure
await playwright_1mcp_browser_click({
element: 'Get started button',
ref: 'button[data-testid="get-started"]'
});
await playwright_1mcp_browser_take_screenshot({ filename: 'storybook-home.png' });
```

### 3. Storybook Integration
The configuration is set up to work with the Storybook development server:

```bash
# Start Storybook (in one terminal)
cd apps/docs && yarn dev

# Run tests against Storybook (in another terminal)
yarn test:playwright
```

## Troubleshooting

### Common Issues and Solutions

1. **Browser Dependencies Missing**
- Solution: Install system dependencies with `sudo apt-get install` commands
- The setup script has already installed the required packages

2. **MCP Server Connection Issues**
- Verify the MCP configuration is correct
- Check that the Playwright MCP server is running
- Ensure network connectivity to the MCP server

3. **Headless Mode Issues**
- The configuration uses `--headless` and `--no-sandbox` for containerized environments
- For debugging, you can temporarily remove `--headless` from the MCP config

## Next Steps

1. **Create Form-Specific Tests**: Write tests that specifically target the Lambda Query Forms components
2. **Integration with CI/CD**: Set up automated testing in your CI pipeline
3. **Visual Regression Testing**: Use Playwright's screenshot capabilities for visual testing
4. **Performance Testing**: Leverage network monitoring tools for performance analysis

## File Structure

```
├── playwright.config.ts # Playwright configuration
├── tests/
│ ├── example.spec.ts # Basic Storybook tests
│ └── mcp-integration.spec.ts # MCP integration examples
├── test-results/ # Test output directory
└── docs/
└── playwright-mcp-integration.md # This guide
```

The integration is now ready for use! The MCP server configuration should resolve the previous path resolution issues by allowing Playwright to auto-detect the browser executable.
5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
"build": "turbo run build",
"serve": "turbo run serve",
"test": "turbo run test",
"test:playwright": "playwright test",
"test:playwright:ui": "playwright test --ui",
"test:playwright:debug": "playwright test --debug",
"clean": "find . -name '.turbo' -type d -prune -exec rm -rf {} + && find . -name 'node_modules' -type d -prune -exec rm -rf {} + && find . -name 'yarn.lock' -type f -delete",
"format-and-lint": "biome check .",
"format-and-lint:fix": "biome check . --write",
Expand All @@ -21,6 +24,8 @@
},
"devDependencies": {
"@biomejs/biome": "^1.9.4",
"@playwright/test": "^1.54.2",
"playwright": "^1.54.2",
"turbo": "^2.3.3"
},
"dependencies": {
Expand Down
49 changes: 49 additions & 0 deletions playwright-report/data/a47d716acf80cd706813bb94e346ba6628316b20.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# Page snapshot

```yaml
- navigation:
- link "About":
- /url: https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header
- link "Store":
- /url: https://store.google.com/US?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US
- link "Gmail":
- /url: https://mail.google.com/mail/&ogbl
- link "Search for Images":
- /url: https://www.google.com/imghp?hl=en&ogbl
- text: Images
- button "Google apps":
- img
- link "Sign in":
- /url: https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/&ec=futura_exp_og_so_72776762_e
- img
- search:
- img
- combobox "Search"
- button "Search by voice":
- img
- button "Search by image":
- img
- link "AI Mode":
- img
- text: AI Mode
- button "Google Search"
- button "I'm Feeling Lucky"
- contentinfo:
- link "Advertising":
- /url: https://www.google.com/intl/en_us/ads/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1
- link "Business":
- /url: https://www.google.com/services/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpbfooter&fg=1
- link "How Search works":
- /url: https://google.com/search/howsearchworks/?fg=1
- link "Applying AI towards science and the environment":
- /url: https://ai.google/societal-impact/?utm_source=googlehpfooter&utm_medium=housepromos&utm_campaign=bottom-footer
- link "Privacy":
- /url: https://policies.google.com/privacy?hl=en&fg=1
- link "Terms":
- /url: https://policies.google.com/terms?hl=en&fg=1
- button "Settings"
- dialog "Sign in to Google":
- text: Sign in to Google Get the most from your Google account
- button "Stay signed out"
- button "Sign in"
```
Comment on lines +1 to +49

@coderabbitai coderabbitai Bot Aug 6, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Playwright report artifacts should be excluded from version control.

This file contains test execution artifacts that are automatically generated and should not be committed. These files can become large and change frequently, cluttering the repository.

Ensure your .gitignore includes Playwright report directories:

+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/

Consider documenting where users can find these reports after running tests locally.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In playwright-report/data/a47d716acf80cd706813bb94e346ba6628316b20.md lines 1 to
49, the file contains Playwright test execution artifacts that should not be
committed to version control. To fix this, add the Playwright report directory
(e.g., playwright-report/) to your .gitignore file to exclude these artifacts
from commits. Additionally, update project documentation to inform users where
to find these reports locally after running tests.

77 changes: 77 additions & 0 deletions playwright-report/index.html
View file
Open in desktop

Large diffs are not rendered by default.

Loading