In this video· click a step to jump to it
Test recording
Showly — app walkthrough
134,597 ms · 2,204,406 pixels changed
We built this regression test for Showly — app walkthrough — it's yours to keep, free.
Take this test with you
This is a real Playwright test, recorded against Showly — app walkthrough. Claim it into your own workspace and re-run it on every deploy — free.
export async function test(page, baseUrl, screenshotPath, stepLogger) {
const shot = (i, slug) => screenshotPath.replace('.png', '-' + i + '-' + slug + '.png');
const SCROLL_THROUGH = "(async () => { const ease = t => 1 - Math.pow(1 - t, 3); const max = Math.max(0, document.body.scrollHeight - window.innerHeight); if (max < 40) return; const anim = (a, b, ms) => new Promise(res => { const t0 = performance.now(); const step = now => { const p = Math.min(1, (now - t0) / ms); window.scrollTo(0, a + (b - a) * ease(p)); p < 1 ? requestAnimationFrame(step) : res(); }; requestAnimationFrame(step); }); await anim(0, max, 1400); await new Promise(r => setTimeout(r, 350)); await anim(max, 0, 800); })()";
const UA = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36";
await page.context().setExtraHTTPHeaders({ 'User-Agent': UA });
for (const pattern of ['**/sentry-cdn.com/**', '**/browser.sentry-cdn.com/**', '**/cdn.segment.com/**', '**/connect.facebook.net/**', '**/*.posthog.com/**', '**/googletagmanager.com/**', '**/google-analytics.com/**', '**/*.clarity.ms/**', '**/doubleclick.net/**']) {
await page.route(pattern, function (r) { r.abort(); }).catch(function () {});
}
const dismiss = async function () {
for (const rx of [/^accept$/i, /accept all/i, /got it/i, /allow all/i, /^ok$/i, /skip for now/i, /maybe later/i, /^later$/i, /not now/i, /^close$/i, /^dismiss$/i]) {
await page.getByRole('button', { name: rx }).first().click({ timeout: 1200 }).catch(function () {});
}Checks run
Notes from the demo run
AI-generatedWe signed into Showly with Google, picked the Free plan and drove the whole agent-artifact workspace: My artifacts, Drop, Connected agents, Documents, account Settings, Plan, and the agent connection handshake itself. The product explains its own mechanic better than most: 'Fetch https://showly.ai/agent.md and follow it' with a Copy button is the entire integration, and the Connected agents zero-state names Claude Code, Codex and Cursor by name so a developer instantly knows whether it applies to them.
- The integration is one copyable line'Fetch https://showly.ai/agent.md and follow it' plus a Copy button is the whole setup. No API keys, no SDK install - the lowest-friction agent integration we have walked.
- Zero-states name the actual toolsConnected agents says 'Connect Claude Code, Codex, Cursor, or another supported agent'. Naming the tools beats 'connect an integration' - a developer self-qualifies in one line.
- Live pairing state'Waiting for your agent - finish any setup or approval in your agent. We'll confirm the connection here' with a spinner between the two logos. The handshake tells you it is mid-flight instead of leaving you guessing.
- The plan modal blocks the workspaceAfter sign-in, 'Pick a plan to start' covers the workspace and nothing behind it is clickable until a plan is chosen. Our first recorded pass sat on that modal for every step. Letting Free be the implicit default with an upgrade nudge would put people in the product a click sooner.
- Settings opens as a blocking modalThe Account panel is a full modal over the workspace with no visible close affordance other than the small x - we needed Escape to get back. A side panel or a routed /settings page would be easier to leave.
8 visual changes
Share this run
Proof your app is not AI slop
This test was built for Showly — app walkthrough — claim it free
One click copies the test and baseline screenshots into your own Lastest workspace. Re-run on every deploy and catch regressions before your users do — free, no card required.























