code-server-playwright-automation

name	code-server-playwright-automation
description	Fix Playwright automation failures against code-server (VS Code in browser). Use when: (1) trust dialog blocks all clicks — "monaco-dialog-modal-block intercepts pointer events", (2) button:has-text() finds wrong buttons behind modal dialog, (3) keyboard shortcuts don't work — Meta vs Control inconsistency, (4) VS Code extension activity bar icon not found by aria-label, (5) panels show placeholder text despite extension being "Connected". Covers trust dialog dismissal, keyboard shortcut hybrid mode, extension panel selectors, and database connection verification for Grafema extension.
author	Claude Code
version	2.0.0
date	"2026-03-15T00:00:00.000Z"

Code-Server Playwright Automation

Problem

Automating code-server (VS Code Web) with Playwright fails in non-obvious ways:

• Trust dialog uses custom Monaco dialog component that blocks ALL mouse events
• Keyboard shortcuts are a hybrid of Mac and Linux depending on context
• Extension activity bar icons have dynamic class names, not stable aria-labels
• Standard Playwright selectors find elements behind modal overlays

Context / Trigger Conditions

• Automating code-server at http://localhost:8080 via Playwright
• Error: <div class="monaco-dialog-modal-block dimmed"> intercepts pointer events
• button:has-text("trust") finds 0 or wrong elements
• page.keyboard.press('Control+p') does nothing (Quick Open doesn't open)
• page.$('[aria-label="ExtensionName"]') returns null for activity bar icons
• Extension panels show placeholder text after clicking entities

Solution

1. Trust Dialog: Use page.evaluate(), NOT standard selectors

The trust dialog is a custom monaco-dialog-box with a monaco-dialog-modal-block backdrop. The backdrop intercepts ALL pointer events, so page.click() and button:has-text() fail. Standard page.$$('button') finds Getting Started page buttons behind the dialog, not dialog buttons.

Only reliable method — with retry loop and explicit "Yes" check:

// Trust dialog can appear 6-12s after page load — MUST retry
for (let attempt = 0; attempt < 15; attempt++) {
  await page.waitForTimeout(2000);
  const result = await page.evaluate(() => {
    const allButtons = document.querySelectorAll('button, a.monaco-button');
    for (const btn of allButtons) {
      const text = btn.textContent || '';
      // CRITICAL: Must match "Yes" — the "No" button also contains "trust"!
      if (text.includes('Yes') && text.includes('trust')) {
        btn.click();
        return 'YES-clicked';
      }
    }
    const modal = document.querySelector('.monaco-dialog-modal-block');
    if (modal) return 'modal-waiting';
    const sb = document.querySelector('.statusbar');
    if (sb && sb.textContent.includes('Restricted')) return 'restricted';
    return 'no-dialog';
  });
  if (result === 'YES-clicked') { await page.waitForTimeout(3000); break; }
  if (result === 'no-dialog' && attempt >= 5) break;
}

CRITICAL BUG: Searching for text.includes('trust') without text.includes('Yes') will match "No, I don't trust the authors" FIRST (it appears earlier in DOM). This puts code-server in Restricted Mode where extensions are disabled.

Why standard selectors fail:

• Dialog buttons are <a> tags with class="monaco-button", role="button" — not <button>
• page.waitForSelector('button:has-text("trust")') finds Getting Started buttons
• page.click() with force:true still fails because backdrop intercepts events
• Only element.click() via evaluate bypasses the backdrop

2. Keyboard Shortcuts: Hybrid Mac/Linux Mode

Code-server detects the CLIENT browser's OS and adapts shortcuts. When accessed from macOS browser:

Shortcut	Key	Notes
Quick Open	Meta+p	Works (Mac)
Command Palette	Meta+Shift+p	Works (Mac)
Close Tab	Meta+w	Works (Mac)
Go to Line	Control+g	Exception — NOT Meta+g
Explorer	Meta+Shift+e	Works (Mac)

Key insight: Most shortcuts use Meta (Mac), but Go to Line uses Control+g. Always try both if one doesn't work.

3. Extension Activity Bar: Use Class Selector

Extensions register activity bar icons with dynamically generated classes:

action-label activity-workbench-view-extension-{extensionId}-{hash}

The aria-label="ExtensionName" exists but on a parent <div>, not the clickable <a>.

Reliable selector:

const icon = await page.$('a[class*="view-extension-grafema"]');
if (icon) await icon.click();

Unreliable: page.$('[aria-label="Grafema"]') — matches wrong elements (tree headers, etc.)

4. Panel Selectors: aria-label on .pane-header

Extension panels use .pane-header with aria-label="{Name} Section":

const header = await page.$('[aria-label="Value Trace Section"]');
const expanded = await header.getAttribute('aria-expanded');
if (expanded === 'false') await header.click(); // Expand

// Read panel content
const content = await header.evaluate(h => {
  const body = h.closest('.pane')?.querySelector('.pane-body');
  return body ? body.textContent.substring(0, 400).trim() : null;
});

5. File Extension: Use .cjs in ESM Projects

If the project has "type": "module" in package.json, Playwright scripts with require() must use .cjs extension. Otherwise: ReferenceError: require is not defined in ES module scope.

6. Verify File Actually Opened

Quick Open (Meta+p) can silently fail (e.g., trust dialog still present, Restricted Mode). Always verify:

const fileInfo = await page.evaluate(() => {
  const items = document.querySelectorAll('.statusbar-item');
  const statusText = Array.from(items).map(el => el.textContent.trim()).filter(Boolean).join(' | ');
  const tabs = Array.from(document.querySelectorAll('.tab')).map(t => t.textContent.trim()).filter(Boolean);
  return { hasLn: statusText.includes('Ln'), tabs };
});
if (!fileInfo.hasLn) {
  console.log('ERROR: File not opened. Tabs:', fileInfo.tabs);
  // Abort or retry
}

7. Docker Extension Hot-Reload (Without Image Rebuild)

To test extension changes without rebuilding the Docker image:

# 1. Build locally
pnpm build

# 2. Copy bundle to container
docker cp packages/vscode/dist/extension.js \
  grafema-demo:/home/coder/.local/share/code-server/extensions/grafema.grafema-explore-0.2.0/dist/extension.js

# 3. Restart code-server (extension host reloads from disk)
docker exec grafema-demo pkill -HUP -f code-server

CRITICAL: docker restart reverts to the original image files! You must re-copy extension.js after every container restart.

8. URI Scheme: vscode-remote Not file

Code-server uses vscode-remote URI scheme, not file. Extensions that check document.uri.scheme !== 'file' will silently skip all code files in code-server.

Fix pattern:

function isCodeDocument(uri: vscode.Uri): boolean {
  return uri.scheme === 'file' || uri.scheme === 'vscode-remote';
}

Replace all scheme === 'file' / scheme !== 'file' checks with isCodeDocument().

9. Cursor Tracking: Verify via Debug Log, Not Panels

Playwright mouse clicks and arrow keys may NOT trigger onDidChangeTextEditorSelection in code-server's extension host. To verify cursor tracking works:

• Check the Debug Log panel for findNodeAtCursor entries
• "No queries yet" = cursor tracking not firing
• "found: FUNCTION ..." = working correctly

If cursor tracking doesn't fire, focus the editor with Meta+1 before clicking.

10. Hover Tooltip: Unreliable in Headless

page.mouse.move() does NOT reliably trigger Monaco hover providers in headless Playwright. Hover tooltip testing requires non-headless mode or real browser. All other extension features (panels, CodeLens, cursor tracking) work fine in headless.

Verification

After applying these patterns:

1. Trust dialog dismissed → no "Restricted Mode" in status bar
2. Quick Open works → file tab appears (verify with status bar check!)
3. Activity bar icon clicks → panels change in sidebar
4. Panels expand → content visible (may show placeholder if no DB connected)
5. Debug Log shows findNodeAtCursor found: entries after cursor movement

Notes

• The trust dialog appears on EVERY new browser launch (headless: true = new profile)
• Trust dialog can appear 6-12s after page load — MUST retry, not just check once
• Clicking wrong trust button ("No") puts code-server in Restricted Mode = extensions disabled
• After dismissing trust, close the Welcome tab with Meta+w before opening files
• Panel placeholder text means the feature works but has no data — check Debug Log for errors
• Screenshots taken with page.screenshot() can be read by Claude (multimodal)
• Wait at least 8000ms after page.goto() for full code-server initialization
• docker restart reverts file changes — always re-copy extension.js after restart