# Recording Alert Setup with Playwright Codegen

This guide explains how to use Playwright's codegen feature to record the process of setting up a new Google Alert.

## What is Codegen?

Playwright Codegen is an interactive tool that records your browser interactions and generates test code automatically. It's perfect for documenting workflows like setting up Google Alerts.

## Quick Start

### Record a New Alert Setup

1. **Start the recorder:**
   ```bash
   npm run record:alert-setup
   ```

2. **A browser window will open** with the Playwright Inspector showing:
   - A browser window (navigated to Google Alerts)
   - The Playwright Inspector panel on the right

3. **Perform the alert setup steps:**
   - Paste your query into the search box
   - Click "Show options"
   - Configure all settings:
     - How often: `As-it-happens`
     - Sources: `Automatic`
     - Language: `English`
     - Region: `Canada`
     - How many: `All results`
     - Deliver to: `RSS feed`
   - Click "Create Alert"
   - Click the RSS icon to get the feed URL

4. **As you interact**, Playwright will generate code in real-time in the Inspector panel

5. **Copy the generated code** from the Inspector and save it to:
   - `tests/alert-setup-recorded.spec.js` (or your preferred location)

6. **Close the browser** when done (the code is already in the Inspector)

## Manual Recording (Alternative)

If you prefer to record manually:

```bash
npx playwright codegen https://www.google.com/alerts
```

This opens the same interface but without the npm script wrapper.

## Advanced Options

### Record with Specific Browser

```bash
npx playwright codegen --browser=firefox https://www.google.com/alerts
```

### Record with Mobile Viewport

```bash
npx playwright codegen --device="iPhone 12" https://www.google.com/alerts
```

### Save Directly to File

```bash
npx playwright codegen https://www.google.com/alerts --output tests/alert-setup-recorded.spec.js
```

## Using the Recorded Code

Once you've recorded the setup process:

1. **Review the generated code** in the test file
2. **Update selectors** if needed (Google's UI may change)
3. **Parameterize the query** so it can be reused:
   ```javascript
   test('Setup alert with custom query', async ({ page }) => {
     const query = 'site:reddit.com/r/techsupport "macbook" ("won\'t turn on")';
     // ... use query variable in the test
   });
   ```

4. **Run the test** to verify it works:
   ```bash
   npm test -- alert-setup-recorded
   ```

## Tips for Better Recordings

1. **Go slowly** - Give Playwright time to capture each action
2. **Use clear actions** - Click buttons directly, don't use keyboard shortcuts
3. **Wait for pages to load** - Let the page fully load before interacting
4. **Test the recording** - Run the generated test to ensure it works
5. **Update selectors** - If Google changes their UI, update the selectors in the recorded code

## Example Workflow

1. Open `docs/google-alerts-reddit-tuned.md`
2. Copy a query (e.g., from Tier 1 alerts)
3. Run `npm run record:alert-setup`
4. Perform the setup steps in the browser
5. Copy the generated code
6. Save it as a reference test
7. Use it as documentation for future alert setups

## Troubleshooting

**The recorder doesn't capture my clicks:**
- Make sure you're clicking directly on elements, not empty space
- Wait for the page to fully load before clicking

**The generated code doesn't work:**
- Google's UI may have changed - update the selectors
- Add explicit waits if needed: `await page.waitForSelector('...')`

**I want to record a different workflow:**
- Use the base command: `npx playwright codegen <url>`
- Or modify the npm script in `package.json`

## Related Files

- `tests/alert-setup.spec.js` - Manual test documenting the alert setup process
- `tests/alert-setup-recorded.spec.js` - Generated test from codegen (create this when recording)
- `playwright.config.js` - Playwright configuration