browser-qa

Browser QA & Autonomous Verification

This skill enables the GTM agent to see, interact with, and verify real browser experiences. The agent uses browser tools to QA its own work, verify tracking fires correctly, test signup flows end-to-end, and overcome blockers that have no CLI/API path.

Tool Hierarchy (Pick the Right Tool)

Always use the most efficient tool for the job:

Task	Tool	Why
Verify pixel fires, check network requests	Playwright (headless)	Fast, scriptable, can inspect network layer
Visual screenshot comparison	Playwright screenshot + Read	Headless, pixel-perfect, no setup overhead
Test full signup/checkout flow	Playwright end-to-end	Automated form filling, navigation, assertions
Interact with web UIs that block API access	Computer Use (mcp__computer-use__*)	Click real buttons, fill real forms, handle OAuth popups
Inspect live DOM, console errors, performance	Playwright evaluate + console	Access to browser APIs, performance metrics
Verify mobile responsiveness	Playwright with viewport override	Test at 375px, 390px, 768px
Read what's on screen when other tools fail	Computer Use screenshot	Last resort visual inspection

Playwright Patterns

Verify Meta Pixel Fires

// Navigate to landing page and intercept network requests
const pixelRequests = [];
page.on('request', req => {
  if (req.url().includes('facebook.com/tr')) pixelRequests.push(req);
});
await page.goto(landingUrl);
// Check PageView fired
const pageViewFired = pixelRequests.some(r => r.url().includes('ev=PageView'));

// Simulate signup and check CompleteRegistration
await page.fill('[data-testid="email-input"]', '[email protected]');
await page.click('[data-testid="signup-button"]');
const regFired = pixelRequests.some(r => r.url().includes('ev=CompleteRegistration'));

Verify PostHog Events

// Intercept PostHog capture calls
const posthogEvents = [];
page.on('request', req => {
  if (req.url().includes('/e/') || req.url().includes('/capture')) {
    try {
      const body = JSON.parse(req.postData());
      posthogEvents.push(...(body.batch || [body]));
    } catch {}
  }
});
await page.goto(url);
// Check specific event fired
const hasEvent = posthogEvents.some(e => e.event === '$pageview');

Test Landing Page Performance

// Get Core Web Vitals
const metrics = await page.evaluate(() => {
  return new Promise(resolve => {
    new PerformanceObserver(list => {
      const entries = {};
      list.getEntries().forEach(e => entries[e.name] = e.value || e.startTime);
      resolve(entries);
    }).observe({ type: 'largest-contentful-paint', buffered: true });
  });
});
// LCP should be < 2.5s for good score

Screenshot Mobile Viewports

// Test critical viewports
const viewports = [
  { width: 375, height: 812, name: 'iPhone SE' },
  { width: 390, height: 844, name: 'iPhone 14' },
  { width: 768, height: 1024, name: 'iPad' },
  { width: 1440, height: 900, name: 'Desktop' }
];
for (const vp of viewports) {
  await page.setViewportSize({ width: vp.width, height: vp.height });
  await page.goto(url);
  await page.screenshot({ path: `.gtm/qa/${vp.name}.png`, fullPage: true });
}

Verify UTM Parameters Persist Through Signup

// Land with UTMs
await page.goto(url + '?utm_source=meta&utm_medium=paid&utm_campaign=test');
// Complete signup flow
await page.click('[data-testid="signup-cta"]');
// Check UTMs are stored
const storedUtm = await page.evaluate(() => {
  return localStorage.getItem('utm_params') || sessionStorage.getItem('utm_params');
});

Computer Use Patterns

Use Computer Use (mcp__computer-use__*) when you need to interact with native apps or web UIs that resist automation:

When to Use Computer Use

1. Meta Business Manager — OAuth flows, app mode toggles, account settings that have no API
2. Google Ads Manager — Manual campaign review, settings that require UI interaction
3. Vercel Dashboard — Redeploy, check env vars, review deployment logs
4. Email provider dashboards — Check deliverability reports, domain verification
5. Any web UI that blocks programmatic access — OAuth popups, CAPTCHA flows, 2FA

Computer Use Workflow

1. request_access — List applications needed (Chrome, Safari, etc.)
2. screenshot — See current state before acting
3. left_click / type / key — Interact with UI elements
4. screenshot — Verify action completed
5. Repeat until goal achieved

Important Computer Use Rules

• Chrome is read-only tier — can screenshot but not click/type. Use Playwright for Chrome interaction.
• For web forms: prefer Playwright. Use Computer Use only for native app UIs or OAuth flows.
• Always screenshot BEFORE and AFTER actions to verify state.
• If a browser shows a CAPTCHA or 2FA prompt, ask the user to complete it — don't try to bypass.

QA Verification Checklist

After any GTM asset deployment (landing page, email, ad), run this verification:

Landing Page QA

• Page loads in < 3 seconds (LCP)
• No console errors on load
• Meta Pixel PageView fires (check network requests)
• PostHog $pageview captures (check /e/ or /capture requests)
• UTM parameters are captured and stored
• CTA button is visible and clickable
• Mobile responsive at 375px (no horizontal scroll, CTA visible)
• OG meta tags present (og:title, og:description, og:image)
• Signup flow completes without errors
• CompleteRegistration event fires on signup

Email QA

• Template renders correctly (preview via provider API or browser)
• Links point to correct URLs with UTM parameters
• Unsubscribe link works
• Images load (not blocked, correct dimensions)
• Subject line and preview text are set

Ad Creative QA

• Landing URL resolves (no 404)
• UTM parameters are in the landing URL
• Pixel fires on the landing page
• Landing page matches ad angle/messaging

Tracking QA (Cross-Channel)

• Meta Pixel events fire for each funnel step
• PostHog events fire for each funnel step
• Event IDs match between Pixel and CAPI (deduplication)
• Stripe checkout includes attribution metadata
• GA4 events fire (if configured)

Overcoming Blockers

The QA agent should NEVER report "I can't do this because there's no API." Instead:

1. Try the API/CLI first — fastest path
2. Try Playwright — headless browser automation
3. Try Chrome DevTools MCP — if available, for DOM inspection
4. Try Computer Use — for native UI interaction
5. Try web scraping — WebFetch for read-only data
6. Only then ask the user — as absolute last resort, with a specific ask (not vague "help me")

The agent should always exhaust all available tools before asking for human help.