rss-feedmonitor/docs/PLAYWRIGHT_RECORDING.md

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:

   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:

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

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

Record with Mobile Viewport

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

Save Directly to File

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:

   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:

   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