diff --git a/website/src/routes/_index.tsx b/website/src/routes/_index.tsx index d8c91fe..3ad1b96 100644 --- a/website/src/routes/_index.tsx +++ b/website/src/routes/_index.tsx @@ -130,9 +130,9 @@ export default function IndexPage() { {dedent` playwriter session new # new sandbox, outputs id (e.g. 1) - playwriter -s 1 -e "await page.goto('https://example.com')" - playwriter -s 1 -e "console.log(await snapshot({ page }))" - playwriter -s 1 -e "await page.locator('aria-ref=e5').click()" + playwriter -e "page.goto('https://example.com')" + playwriter -e "snapshot({ page })" + playwriter -e "page.locator('aria-ref=e5').click()" `} Extension icon green = connected. Gray = not attached to this tab. @@ -193,7 +193,7 @@ export default function IndexPage() {

{dedent` - playwriter -s 1 -e "await snapshot({ page })" + playwriter -e "snapshot({ page })" # Output: # - banner: @@ -211,10 +211,10 @@ export default function IndexPage() { {dedent` # Search for specific elements - playwriter -s 1 -e "await snapshot({ page, search: /button|submit/i })" + playwriter -e "snapshot({ page, search: /button|submit/i })" # Always print URL first, then snapshot — pages can redirect - playwriter -s 1 -e "console.log('URL:', page.url()); await snapshot({ page }).then(console.log)" + playwriter -e "console.log('URL:', page.url()); snapshot({ page }).then(console.log)" `}

@@ -231,10 +231,10 @@ export default function IndexPage() {

{dedent` - playwriter -s 1 -e "await screenshotWithAccessibilityLabels({ page })" + playwriter -e "screenshotWithAccessibilityLabels({ page })" # Returns screenshot + accessibility snapshot with aria-ref selectors - playwriter -s 1 -e "await page.locator('aria-ref=e5').click()" + playwriter -e "page.locator('aria-ref=e5').click()" `}

@@ -259,7 +259,7 @@ export default function IndexPage() { playwriter session list # shows sessions + state keys # Session 1 stores data - playwriter -s 1 -e "state.users = await page.$$eval('.user', els => els.map(e => e.textContent))" + playwriter -s 1 -e "state.users = page.$$eval('.user', els => els.map(e => e.textContent))" # Session 2 can't see it playwriter -s 2 -e "console.log(state.users)" # undefined @@ -271,10 +271,10 @@ export default function IndexPage() {

{dedent` - playwriter -s 1 -e "state.myPage = context.pages().find(p => p.url() === 'about:blank') ?? await context.newPage(); await state.myPage.goto('https://example.com')" + playwriter -s 1 -e "state.myPage = context.pages().find(p => p.url() === 'about:blank') ?? context.newPage(); state.myPage.goto('https://example.com')" # All subsequent calls use state.myPage - playwriter -s 1 -e "console.log(await state.myPage.title())" + playwriter -s 1 -e "state.myPage.title()" `} @@ -287,13 +287,13 @@ export default function IndexPage() { {dedent` # Set breakpoints and debug - playwriter -s 1 -e "state.cdp = await getCDPSession({ page }); state.dbg = createDebugger({ cdp: state.cdp }); await state.dbg.enable()" - playwriter -s 1 -e "state.scripts = await state.dbg.listScripts({ search: 'app' }); console.log(state.scripts.map(s => s.url))" - playwriter -s 1 -e "await state.dbg.setBreakpoint({ file: state.scripts[0].url, line: 42 })" + playwriter -e "state.cdp = getCDPSession({ page }); state.dbg = createDebugger({ cdp: state.cdp }); state.dbg.enable()" + playwriter -e "state.scripts = state.dbg.listScripts({ search: 'app' }); state.scripts.map(s => s.url)" + playwriter -e "state.dbg.setBreakpoint({ file: state.scripts[0].url, line: 42 })" # Live edit page code - playwriter -s 1 -e "state.editor = createEditor({ cdp: state.cdp }); await state.editor.enable()" - playwriter -s 1 -e "await state.editor.edit({ url: 'https://example.com/app.js', oldString: 'const DEBUG = false', newString: 'const DEBUG = true' })" + playwriter -e "state.editor = createEditor({ cdp: state.cdp }); state.editor.enable()" + playwriter -e "state.editor.edit({ url: 'https://example.com/app.js', oldString: 'const DEBUG = false', newString: 'const DEBUG = true' })" `}

@@ -313,14 +313,14 @@ export default function IndexPage() { {dedent` # Start intercepting - playwriter -s 1 -e "state.responses = []; page.on('response', async res => { if (res.url().includes('/api/')) { try { state.responses.push({ url: res.url(), status: res.status(), body: await res.json() }); } catch {} } })" + playwriter -e "state.responses = []; page.on('response', async res => { if (res.url().includes('/api/')) { try { state.responses.push({ url: res.url(), status: res.status(), body: await res.json() }); } catch {} } })" # Trigger actions, then analyze - playwriter -s 1 -e "await page.click('button.load-more')" - playwriter -s 1 -e "console.log('Captured', state.responses.length, 'API calls'); state.responses.forEach(r => console.log(r.status, r.url.slice(0, 80)))" + playwriter -e "page.click('button.load-more')" + playwriter -e "console.log('Captured', state.responses.length, 'API calls'); state.responses.forEach(r => console.log(r.status, r.url.slice(0, 80)))" # Replay an API call directly - playwriter -s 1 -e "const data = await page.evaluate(async (url) => { const res = await fetch(url); return res.json(); }, state.responses[0].url); console.log(data)" + playwriter -e "page.evaluate(async (url) => { const res = await fetch(url); return res.json(); }, state.responses[0].url)" `}

@@ -339,14 +339,14 @@ export default function IndexPage() { {dedent` # Start recording - playwriter -s 1 -e "await startRecording({ page, outputPath: './recording.mp4', frameRate: 30 })" + playwriter -e "startRecording({ page, outputPath: './recording.mp4', frameRate: 30 })" # Navigate, interact — recording continues - playwriter -s 1 -e "await page.click('a'); await page.waitForLoadState('domcontentloaded')" - playwriter -s 1 -e "await page.goBack()" + playwriter -e "page.click('a'); page.waitForLoadState('domcontentloaded')" + playwriter -e "page.goBack()" # Stop and save - playwriter -s 1 -e "const { path, duration, size } = await stopRecording({ page }); console.log(path, duration + 'ms', size + ' bytes')" + playwriter -e "stopRecording({ page })" `}

@@ -415,7 +415,7 @@ export default function IndexPage() { # From anywhere — set env vars and use normally export PLAYWRITER_HOST=https://my-machine-tunnel.traforo.dev export PLAYWRITER_TOKEN= - playwriter -s 1 -e "await page.goto('https://example.com')" + playwriter -e "page.goto('https://example.com')" `}

diff --git a/website/src/styles/editorial-prism.css b/website/src/styles/editorial-prism.css index 8cd8518..c57186e 100644 --- a/website/src/styles/editorial-prism.css +++ b/website/src/styles/editorial-prism.css @@ -20,7 +20,7 @@ pre[class*='language-'] { font-family: var(--font-code, 'SF Mono', 'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, Courier, monospace); font-size: 12px; font-weight: 500; - letter-spacing: 0.02em; + letter-spacing: 0.01em; line-height: 1.85; text-align: left; white-space: pre; diff --git a/website/src/styles/editorial.css b/website/src/styles/editorial.css index 55035c2..411d48f 100644 --- a/website/src/styles/editorial.css +++ b/website/src/styles/editorial.css @@ -116,7 +116,7 @@ font-size: 12.6px; font-weight: 500; line-height: 12.6px; - letter-spacing: 0.02em; + letter-spacing: 0.01em; padding: 1.6px 3.2px; color: rgba(0, 0, 0, 0.75); }