open-swe/tests/e2e/static/github.html
Ramon Nogueira a8c7af4192
test(open-swe): add Playwright E2E for the Slack → PR → web handoff (#1583)
* test(open-swe): add Playwright E2E for the Slack → PR → web handoff

Local, secrets-free end-to-end suite that drives the full happy path through mock Slack/GitHub control panels and the real dashboard UI. Only the LLM and external SaaS HTTP boundaries (GitHub/Slack APIs, OAuth token mint) are faked — the real process_slack_mention, get_agent, deepagents loop, tools, middleware, and dashboard authorization all run under `langgraph dev` with a scripted fake chat model and a local temp-dir sandbox.

- full_flow: a Slack mention runs the agent, which implements a change in the sandbox, opens a PR against a fake GitHub remote, and replies with the PR link in the same thread.
- dashboard: clicking the bot's real "Open in Web" link loads the built ui/ app (served same-origin); the thread owner can continue the conversation, while a different user sees the same thread read-only (no composer).

Wired into Agent CI as a `Playwright E2E` job that runs on pull requests.

* fix(open-swe): serve E2E UI assets via explicit route; pin Playwright

The dashboard E2E served the built ui/ SPA's /assets via app.mount(StaticFiles), but LangGraph's custom-app loader serves APIRoutes and drops sub-app Mounts, so /assets 404'd under `langgraph dev` in CI — the React app never booted and the composer/transcript never rendered. Serve assets via an explicit route instead.

Also pin @playwright/test to the latest (1.61.0) for reproducible runs, and make the owner composer assertion tolerant of either hydration state.

* test(open-swe): record Playwright trace + video on every E2E run

Capture a replayable trace (DOM snapshots, network, console, source) and a screen recording for every test, not just retries, plus a screenshot on failure. The CI job already uploads playwright-report/ and test-results/, so each run now has a downloadable replay; documented how to open it.
2026-06-22 12:54:46 -07:00

45 lines
1.6 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mock GitHub — pull requests</title>
<style>
body { font-family: system-ui, sans-serif; max-width: 680px; margin: 1.5rem auto; padding: 0 1rem; }
h1 { font-size: 1.1rem; }
.pr { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.6rem 0; }
.pr-title { font-weight: 700; }
.meta { color: #666; font-size: 0.85rem; }
code { background: #f4f4f5; padding: 0 0.25rem; border-radius: 4px; }
a { color: #1264a3; }
</style>
</head>
<body>
<h1>fakeorg/demo — Pull requests (mock)</h1>
<div id="list"></div>
<script>
async function load() {
const res = await fetch("/mock/github/data");
const prs = await res.json();
const list = document.getElementById("list");
if (!prs.length) {
list.innerHTML = "<p style='color:#888'>No pull requests yet.</p>";
return;
}
list.innerHTML = prs
.map(
(p) => `
<div class="pr" data-pr="${p.number}">
<div class="pr-title"><a href="${p.url}">#${p.number} ${p.title}</a>${p.draft ? " (draft)" : ""}</div>
<div class="meta"><code>${p.head}</code> → <code>${p.base}</code> · ${p.state} · by ${p.author}</div>
<div class="files">${p.files.map((f) => `<code>${f.filename}</code>`).join(" ")}</div>
</div>`,
)
.join("");
}
load();
setInterval(load, 1000);
</script>
</body>
</html>