diff --git a/scripts/tutorials/connect-monitors.mjs b/scripts/tutorials/connect-monitors.mjs index 1c5bdec39..483b5eadb 100644 --- a/scripts/tutorials/connect-monitors.mjs +++ b/scripts/tutorials/connect-monitors.mjs @@ -10,6 +10,7 @@ export default async function ({ warm, goto, start, + step, click, wait, settle, @@ -22,6 +23,7 @@ export default async function ({ await goto(`/status-pages/${PAGE_ID}/edit`); await start(); + step("Open the status page"); await wait(1000); await click( @@ -34,6 +36,7 @@ export default async function ({ await settle(); await wait(800); + step("Add your monitors as components"); await click(page.getByRole("button", { name: "Add Component", exact: true })); await click(page.getByRole("menuitem", { name: "Add Monitor Component" })); for (const monitor of ["API", "Website", "Search"]) { @@ -44,6 +47,7 @@ export default async function ({ await page.keyboard.press("Escape"); await wait(800); + step("Save to show them on the page"); await click(page.getByRole("button", { name: "Submit" }).first()); await wait(2500); } diff --git a/scripts/tutorials/create-status-page.mjs b/scripts/tutorials/create-status-page.mjs index 50f820b99..4e65e1291 100644 --- a/scripts/tutorials/create-status-page.mjs +++ b/scripts/tutorials/create-status-page.mjs @@ -8,6 +8,7 @@ export default async function ({ warm, goto, start, + step, click, type, wait, @@ -20,6 +21,7 @@ export default async function ({ await goto("/status-pages"); await start(); + step("Open Status Pages"); await wait(1200); await click(page.getByRole("link", { name: "Create Status Page" }).first()); @@ -27,14 +29,17 @@ export default async function ({ await settle(); await wait(800); + step("Give it a name, the slug follows"); await type(page.getByPlaceholder("My Status Page"), "Acme Payments"); await wait(600); + step("Tell visitors what it covers"); await type( page.getByLabel("Description"), "Live status of Acme checkout and payouts.", ); await wait(600); + step("Create it"); await click(page.getByRole("button", { name: "Submit" })); await page.waitForURL(/\/status-pages\/\d+\/edit/); await page.waitForLoadState("networkidle"); diff --git a/scripts/tutorials/post-status-report.mjs b/scripts/tutorials/post-status-report.mjs index 3bd5e138e..53494da7d 100644 --- a/scripts/tutorials/post-status-report.mjs +++ b/scripts/tutorials/post-status-report.mjs @@ -10,6 +10,7 @@ export default async function ({ warm, goto, start, + step, click, type, wait, @@ -30,17 +31,20 @@ export default async function ({ await goto(`/status-pages/${PAGE_ID}/status-reports`); await start(); + step("Something is wrong: open a report"); await wait(1000); await click(page.getByRole("button", { name: "Create Status Report" })); const sheet = page.getByRole("dialog"); await sheet.waitFor(); await wait(500); + step("Say what customers see"); await type(sheet.getByRole("textbox", { name: "Title" }), TITLE); await type( sheet.getByRole("textbox", { name: "Message" }), "EU payments are failing at checkout. Investigating.", ); + step("Mark the affected component"); await click(sheet.getByRole("checkbox", { name: "API" })); await wait(400); await click(sheet.getByRole("button", { name: "Submit" })); @@ -52,6 +56,7 @@ export default async function ({ await settle(); await wait(1000); + step("Post updates as you learn more"); const composer = page.getByRole("textbox", { name: /What changed/ }); const publish = page.getByRole("button", { name: "Publish update" }); @@ -62,6 +67,7 @@ export default async function ({ await click(publish); await wait(2000); + step("Resolve it when it is fixed"); await click(page.getByRole("combobox", { name: "Status" })); await click(page.getByRole("option", { name: /resolved/i })); await type(composer, "Certificate renewed, payments work again."); diff --git a/scripts/tutorials/schedule-maintenance.mjs b/scripts/tutorials/schedule-maintenance.mjs index 26305691d..03cde4962 100644 --- a/scripts/tutorials/schedule-maintenance.mjs +++ b/scripts/tutorials/schedule-maintenance.mjs @@ -19,6 +19,7 @@ export default async function ({ warm, goto, start, + step, click, type, wait, @@ -34,6 +35,7 @@ export default async function ({ await goto(`/status-pages/${PAGE_ID}/maintenances`); await start(); + step("Plan ahead in Maintenances"); await wait(1000); await click(page.getByRole("button", { name: "Create Maintenance" })); @@ -42,6 +44,7 @@ export default async function ({ await wait(500); await type(sheet.getByRole("textbox", { name: "Title" }), TITLE); + step("Pick the window"); const day = targetDay(); const monthsAhead = day.getMonth() - new Date().getMonth(); for (const [field, time] of [ @@ -71,12 +74,14 @@ export default async function ({ await wait(500); } + step("Explain the impact"); await type( sheet.getByRole("textbox", { name: "Message" }), "We are upgrading our database. The API may be read-only for a few minutes.", ); await click(sheet.getByRole("checkbox", { name: "API" })); await wait(400); + step("Schedule it"); await click(sheet.getByRole("button", { name: "Submit" })); await sheet.waitFor({ state: "hidden" }); await wait(2500); diff --git a/scripts/tutorials/set-up-alerts.mjs b/scripts/tutorials/set-up-alerts.mjs index 91905469e..761746d71 100644 --- a/scripts/tutorials/set-up-alerts.mjs +++ b/scripts/tutorials/set-up-alerts.mjs @@ -8,6 +8,7 @@ export default async function ({ warm, goto, start, + step, click, type, wait, @@ -22,6 +23,7 @@ export default async function ({ await goto("/notifications"); await start(); + step("Pick a channel in Notifications"); await wait(1200); await click(page.getByText("Send notifications to Email")); @@ -29,16 +31,19 @@ export default async function ({ await sheet.waitFor(); await wait(500); + step("Where should alerts go?"); await type(sheet.getByRole("textbox", { name: "Name" }), NAME); await type( sheet.getByRole("textbox", { name: "Email" }), "platform@acme.com", ); await wait(400); + step("Choose the monitors to watch"); for (const monitor of ["API", "Website", "Search"]) await click(sheet.getByRole("checkbox", { name: monitor, exact: true })); await wait(500); + step("Save"); await click(sheet.getByRole("button", { name: "Submit" })); await sheet.waitFor({ state: "hidden" }); await wait(2500);