The Page Domain

// Enable lifecycle tracking
await send('Page.enable');
await send('Page.setLifecycleEventsEnabled', { enabled: true });

// Navigate
await send('Page.navigate', { url: 'https://example.com' });Copy

function waitForLoad() {
  return new Promise((resolve) => {
    const handler = (data) => {
      const msg = JSON.parse(data.toString());
      if (msg.method === 'Page.loadEventFired') {
        ws.removeListener('message', handler);
        resolve();
      }
    };
    ws.on('message', handler);
  });
}

await send('Page.navigate', { url: 'https://example.com' });
await waitForLoad();
// Page is now ready to inspectCopy

// Fires when Angular's router changes the URL
{
  "method": "Page.navigatedWithinDocument",
  "params": {
    "frameId": "ABC123",
    "url": "http://localhost:4200/dashboard"
  }
}Copy

// Wait for a selector to appear - the most reliable approach for SPAs
async function waitForSelector(selector, timeout = 5000) {
  const startTime = Date.now();

  while (Date.now() - startTime < timeout) {
    const doc = await send('DOM.getDocument', { depth: 0 });
    const result = await send('DOM.querySelector', {
      nodeId: doc.root.nodeId,
      selector
    });

    if (result.nodeId !== 0) return result.nodeId;
    await new Promise(resolve => setTimeout(resolve, 100));
  }

  throw new Error(`Selector "${selector}" not found within ${timeout}ms`);
}

// Navigate via the app's router (click a link, or evaluate)
await send('Runtime.evaluate', {
  expression: `window.history.pushState({}, '', '/dashboard')`
});

// Wait for the dashboard component to render
await waitForSelector('[data-testid="dashboard-header"]');Copy

// Get the complete frame tree
const frameTree = await send('Page.getFrameTree');
// frameTree.frameTree = {
//   frame: { id: 'main', url: 'http://localhost:4200', ... },
//   childFrames: [
//     { frame: { id: 'iframe-1', url: 'https://payment-provider.com/checkout', ... } }
//   ]
// }Copy

// Full viewport screenshot
const screenshot = await send('Page.captureScreenshot', {
  format: 'png'    // 'png', 'jpeg', or 'webp'
});
// screenshot.data = base64-encoded image

// Specific region (clip)
const regionShot = await send('Page.captureScreenshot', {
  format: 'png',
  clip: {
    x: 0,
    y: 0,
    width: 800,
    height: 600,
    scale: 1
  }
});

// Full page (beyond viewport - captures the entire scrollable content)
// First, get the full page dimensions
const metrics = await send('Page.getLayoutMetrics');
const fullPageShot = await send('Page.captureScreenshot', {
  format: 'png',
  clip: {
    x: 0,
    y: 0,
    width: metrics.cssContentSize.width,
    height: metrics.cssContentSize.height,
    scale: 1
  }
});Copy

const pdf = await send('Page.printToPDF', {
  landscape: false,
  printBackground: true,
  preferCSSPageSize: true
});
// pdf.data = base64-encoded PDFCopy

// Inject a script that runs before the page's own JavaScript
await send('Page.addScriptToEvaluateOnNewDocument', {
  source: `
    // Override Date.now() to return a fixed time (useful for snapshot testing)
    Date.now = () => 1719012345678;

    // Or inject a test helper
    window.__CDP_READY__ = false;
    window.addEventListener('load', () => { window.__CDP_READY__ = true; });
  `
});Copy

// Listen for dialog events
// Event: Page.javascriptDialogOpening
{
  "method": "Page.javascriptDialogOpening",
  "params": {
    "url": "http://localhost:4200",
    "message": "Are you sure you want to delete?",
    "type": "confirm",     // 'alert', 'confirm', 'prompt', 'beforeunload'
    "defaultPrompt": ""    // For prompt() - the default value
  }
}

// Accept or dismiss the dialog
await send('Page.handleJavaScriptDialog', {
  accept: true,           // true = OK/Yes, false = Cancel/No
  promptText: ''          // For prompt() - the text to enter
});Copy

// Store a configurable dialog handler - default behaviour is to accept all dialogs
let dialogHandler = (dialogParams) => ({
  accept: true,
  promptText: ''
});

// In your message listener, watch for dialog events and respond immediately
ws.on('message', (data) => {
  const msg = JSON.parse(data.toString());

  // Handle pending promise responses (from earlier lessons)
  if (msg.id && pending.has(msg.id)) {
    const resolvePromise = pending.get(msg.id);
    resolvePromise(msg.result || msg.error);
    pending.delete(msg.id);
    return;
  }

  // Handle dialog events - must respond or the page hangs
  if (msg.method === 'Page.javascriptDialogOpening') {
    const { message, type, defaultPrompt } = msg.params;
    console.log(`Dialog opened: [${type}] "${message}"`);

    // Ask the configurable handler what to do
    const response = dialogHandler(msg.params);

    // Respond to the dialog - this unblocks the page
    send('Page.handleJavaScriptDialog', {
      accept: response.accept,
      promptText: response.promptText || ''
    });
    return;
  }

  // Pass other events to the diagnostic collector, etc.
  if (msg.method) {
    collector.handleEvent(msg.method, msg.params);
  }
});Copy

// Temporarily override the dialog handler for one step
async function clickDeleteAndConfirm(selector) {
  // Set up: expect a confirm dialog and accept it
  const dialogPromise = new Promise((resolve) => {
    dialogHandler = (params) => {
      resolve(params);  // Capture the dialog details for assertion
      return { accept: true };
    };
  });

  // Trigger the action that opens the dialog
  await send('Runtime.evaluate', {
    expression: `document.querySelector('${selector}').click()`
  });

  // Wait for the dialog to appear and be handled
  const dialogDetails = await dialogPromise;
  console.log(`Confirmed: "${dialogDetails.message}"`);

  // Restore default handler
  dialogHandler = () => ({ accept: true, promptText: '' });
}

// For a prompt dialog where you need to enter text
async function handlePromptDialog(selector, textToEnter) {
  dialogHandler = (params) => {
    return { accept: true, promptText: textToEnter };
  };

  await send('Runtime.evaluate', {
    expression: `document.querySelector('${selector}').click()`
  });

  // Restore default
  dialogHandler = () => ({ accept: true, promptText: '' });
}Copy

// Simple reload
await send('Page.reload');

// Reload ignoring cache (like Ctrl+Shift+R)
await send('Page.reload', {
  ignoreCache: true
});

// Stop a loading page
await send('Page.stopLoading');Copy