Playwright Recording

# Playwright Recording Reference

## API Reference

### Browser Context Video Options

```typescript
interface RecordVideoOptions {
  dir: string;                    // Output directory (required)
  size?: { width: number; height: number }; // Video dimensions
}

const context = await browser.newContext({
  viewport: { width: number; height: number };
  recordVideo: RecordVideoOptions;
  // Other useful options:
  colorScheme?: 'light' | 'dark' | 'no-preference';
  locale?: string;  // e.g., 'en-US'
  timezoneId?: string;  // e.g., 'America/New_York'
  geolocation?: { latitude: number; longitude: number };
  permissions?: string[];  // e.g., ['geolocation']
  userAgent?: string;
});
```

### Browser Launch Options

```typescript
const browser = await chromium.launch({
  slowMo?: number;           // Slow down actions by ms
  headless?: boolean;        // Default true, set false to see browser
  devtools?: boolean;        // Open devtools
  args?: string[];           // Chromium flags
});

// Useful args:
args: [
  '--start-maximized',
  '--disable-infobars',
  '--hide-scrollbars',
]
```

### Page Methods for Recording

```typescript
// Navigation
await page.goto(url, { waitUntil?: 'load' | 'domcontentloaded' | 'networkidle' });
await page.goBack();
await page.goForward();
await page.reload();

// Waiting
await page.waitForTimeout(ms);
await page.waitForLoadState('networkidle');
await page.waitForSelector(selector);
await page.waitForURL(urlPattern);

// Interactions
await page.click(selector);
await page.dblclick(selector);
await page.fill(selector, value);
await page.type(selector, text);  // Types character by character
await page.press(selector, key);  // e.g., 'Enter', 'Tab'
await page.hover(selector);
await page.selectOption(selector, value);
await page.check(selector);       // Checkbox
await page.uncheck(selector);

// Scrolling
await page.evaluate(() => window.scrollTo(0, 500));
await page.evaluate(() => window.scrollBy(0, 200));
await page.locator(selector).scrollIntoViewIfNeeded();

// Screenshots (for thumbnails)
await page.screenshot({ path: 'screenshot.png' });
await page.screenshot({ path: 'full.png', fullPage: true });
```

### Getting Video After Recording

```typescript
const page = await context.newPage();
// ... do stuff ...
await context.close();

// Get video path
const video = page.video();
const path = await video?.path();

// Or save to specific location
await video?.saveAs('output.webm');

// Delete video
await video?.delete();
```

## Common Selectors

```typescript
// CSS Selectors
await page.click('button');
await page.click('#submit-btn');
await page.click('.primary-button');
await page.click('[data-testid="login"]');
await page.click('button:has-text("Submit")');

// Text selectors
await page.click('text=Click me');
await page.click('text="Exact match"');

// XPath
await page.click('xpath=//button[@type="submit"]');

// Combining
await page.click('form >> button.submit');
await page.click('div.modal >> text=Confirm');
```

## Timing Utilities

```typescript
// Reusable delay function
const delay = (ms: number) => new Promise(r => setTimeout(r, ms));

// Smooth typing with delays
async function typeSlowly(page, selector, text, delayMs = 100) {
  await page.click(selector);
  for (const char of text) {
    await page.keyboard.type(char);
    await delay(delayMs);
  }
}

// Wait for animation to complete
async function waitForAnimation(page, selector) {
  await page.waitForFunction(
    (sel) => {
      const el = document.querySelector(sel);
      if (!el) return false;
      const style = getComputedStyle(el);
      return style.animationName === 'none' || style.animationPlayState === 'paused';
    },
    selector
  );
}
```

## Device Emulation

```typescript
import { devices } from 'playwright';

// iPhone
const context = await browser.newContext({
  ...devices['iPhone 14'],
  recordVideo: { dir: './recordings' }
});

// iPad
const context = await browser.newContext({
  ...devices['iPad Pro 11'],