129 lines
3.9 KiB
Markdown
129 lines
3.9 KiB
Markdown
# 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
|
|
|