Skip to content

Playwright mcp - navigate fails on localhost #4232

Description

@dannymcerlean1

Describe the bug

In the agents tab, Playwright MCP browser_navigate never reaches a web server running on localhost. This might be a regression as I have seen this work.

Apologies if this is the wrong place to report this!

Affected version

cloud

Steps to reproduce the behavior

  1. Create a new repo
  2. Include test-ui.js
  3. Start new agents tab. Ask co-pilot to start the app and take a screenshot

Expected behavior

Co-pilot uses browser_navigate tool to access UI on localhost

Additional context

test-ui.js:

#!/usr/bin/env node
/*
 * test-ui.js — a minimal, zero-dependency, NO-AUTH frontend.
 *
 * Purpose: isolate whether the Copilot screenshot problem is Backstage-specific
 * or lives in the MCP/screenshot pipeline. This serves a single static page with
 * no sign-in, no catalog, no build step, no framework — just Node's built-in http.
 *
 * Run from the repo root:   node test-ui.js
 * Then open:                http://127.0.0.1:8080  (also http://localhost:8080)
 * Override the port with:   PORT=1234 node test-ui.js
 */
const http = require('http');

const PORT = Number(process.env.PORT) || 8080;
// Loopback by default: a "normal" app that does NOT do the all-interfaces workaround.
// Flip to all-interfaces for comparison with:  HOST=0.0.0.0 node test-ui.js
const HOST = process.env.HOST || '127.0.0.1';

const html = `<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test UI</title>
  </head>
  <body style="margin:0;font-family:system-ui,sans-serif;background:#0a7d55;color:#fff;">
    <main style="min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;">
      <h1 style="font-size:56px;margin:0;letter-spacing:1px;">TEST UI OK</h1>
      <p style="font-size:20px;margin:0;opacity:.9;">No auth. Static page served by test-ui.js on port ${PORT}.</p>
      <div style="width:320px;height:140px;background:#fff;color:#0a7d55;display:flex;align-items:center;justify-content:center;border-radius:16px;font-size:26px;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,.25);">
        Screenshot me
      </div>
    </main>
  </body>
</html>`;

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  res.end(html);
});

server.listen(PORT, HOST, () => {
  console.log(`test-ui listening on http://${HOST}:${PORT}`);
  console.log(`open http://127.0.0.1:${PORT} or http://localhost:${PORT}`);
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions