Skip to content

Synchronize preview navigation in vibe-platform E2E #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MiguelsPizza merged 3 commits into from
Sep 17, 2026
Merged

Synchronize preview navigation in vibe-platform E2E #51

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
49e486e
Wait for preview navigation before exercising the example API
MiguelsPizza Sep 8, 2026
8939c56
Merge branch 'main' into alex/fix-preview-navigation-ci
MiguelsPizza Sep 10, 2026
9b63f7d
Merge branch 'main' into alex/fix-preview-navigation-ci
MiguelsPizza Sep 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 24 additions & 17 deletions examples/vibe-platform/scripts/e2e.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,10 +131,23 @@ page.on("console", (message) => {

const preview = () => page.frameLocator("#preview");
const file = (path) => page.locator(`#files button[data-path="${path}"]`);
const builtOk = () =>
page.waitForFunction(() => /^built in \d+ms$/.test(document.querySelector("#status").textContent), {
timeout: TIMEOUT,
});
// Register before the action: the build status updates before srcdoc navigation commits.
const builtOk = async (run) => {
const [frame] = await Promise.all([
page.waitForEvent("framenavigated", {
predicate: (frame) => frame.parentFrame() === page.mainFrame() && frame.url() === "about:srcdoc",
timeout: TIMEOUT,
}),
run(),
]);
// The bridge is installed before #root is parsed; no CDN resources are needed.
await frame.locator("#root").waitFor({ state: "attached", timeout: TIMEOUT });
await page.waitForFunction(
() => /^built in \d+ms$/.test(document.querySelector("#status").textContent),
undefined,
{ timeout: TIMEOUT },
);
};

const previewApi = (method = "GET") =>
preview()
Expand All @@ -156,7 +169,7 @@ let exportDirectory;
try {
// 1 -----------------------------------------------------------------------
await step("page loads and the actor seeded its starter files", async () => {
await page.goto(url, { waitUntil: "domcontentloaded" });
await builtOk(() => page.goto(url, { waitUntil: "domcontentloaded" }));
for (const seeded of [
"/server/agent.ts",
"/src/main.tsx",
Expand Down Expand Up @@ -200,8 +213,7 @@ try {

// 3 -----------------------------------------------------------------------
await step("build & run bundles the workspace out of the Durable Object", async () => {
await page.locator("#build").click();
await builtOk();
await builtOk(() => page.locator("#build").click());
});

await step("the seeded front-end reaches the user Agent through /api/*", async () => {
Expand Down Expand Up @@ -248,8 +260,7 @@ try {
agentSourceForExport = source.replace("a quiet hello", "a cheerful hello");
if (agentSourceForExport === source) throw new Error("agent edit marker was missing");
await page.locator("#editor").fill(agentSourceForExport);
await page.locator("#save").click();
await builtOk();
await builtOk(() => page.locator("#save").click());
await page.waitForFunction(
() => document.querySelector("#log").textContent.includes("agent restarted; storage intact"),
undefined,
Expand Down Expand Up @@ -277,8 +288,7 @@ try {
}

await page.locator("#editor").fill(agentSourceForExport);
await page.locator("#save").click();
await builtOk();
await builtOk(() => page.locator("#save").click());
const state = await previewApi();
if (state.visits !== 1) throw new Error(`visit count after recovery is ${String(state.visits)}`);
});
Expand All @@ -302,8 +312,7 @@ try {
);

await page.locator("#editor").fill(agentSourceForExport);
await page.locator("#save").click();
await builtOk();
await builtOk(() => page.locator("#save").click());
const state = await previewApi();
if (state.visits !== 1) {
throw new Error(`visit count after constructor recovery is ${String(state.visits)}`);
Expand All @@ -321,8 +330,7 @@ try {
);
const source = await editor.inputValue();
await editor.fill(source.replace(TITLE_BEFORE, TITLE_AFTER));
await page.locator("#save").click();
await builtOk();
await builtOk(() => page.locator("#save").click());
});

if (!online) {
Expand All @@ -338,8 +346,7 @@ try {

// 6 -----------------------------------------------------------------------
await step("the edit survives a page reload (OPFS persistence)", async () => {
await page.reload({ waitUntil: "domcontentloaded" });
await builtOk();
await builtOk(() => page.reload({ waitUntil: "domcontentloaded" }));
await file("/src/App.tsx").waitFor({ timeout: TIMEOUT });
await file("/src/App.tsx").click();
await page.waitForFunction(
Expand Down