diff --git a/cookbook/copilot-sdk/nodejs/accessibility-report.md b/cookbook/copilot-sdk/nodejs/accessibility-report.md index 849dd726..786a4c16 100644 --- a/cookbook/copilot-sdk/nodejs/accessibility-report.md +++ b/cookbook/copilot-sdk/nodejs/accessibility-report.md @@ -90,7 +90,7 @@ async function main() { let idleResolve: (() => void) | null = null; session.on((event) => { - if (event.type === "assistant.message.delta") { + if (event.type === "assistant.message_delta") { process.stdout.write(event.data.deltaContent ?? ""); } else if (event.type === "session.idle") { idleResolve?.(); @@ -179,7 +179,7 @@ main().catch(console.error); ## How it works 1. **Playwright MCP server**: Configures a local MCP server running `@playwright/mcp` to provide browser automation tools -2. **Streaming output**: Uses `streaming: true` and `assistant.message.delta` events for real-time token-by-token output +2. **Streaming output**: Uses `streaming: true` and `assistant.message_delta` events for real-time token-by-token output 3. **Accessibility snapshot**: Playwright's `browser_snapshot` tool captures the full accessibility tree of the page 4. **Structured report**: The prompt engineers a consistent WCAG-aligned report format with emoji severity indicators 5. **Test generation**: Optionally detects the project language and generates Playwright accessibility tests @@ -212,7 +212,7 @@ Unlike `sendAndWait`, this recipe uses streaming for real-time output: ```typescript session.on((event) => { - if (event.type === "assistant.message.delta") { + if (event.type === "assistant.message_delta") { process.stdout.write(event.data.deltaContent ?? ""); } else if (event.type === "session.idle") { idleResolve?.(); diff --git a/cookbook/copilot-sdk/nodejs/recipe/accessibility-report.ts b/cookbook/copilot-sdk/nodejs/recipe/accessibility-report.ts index 28ab7aba..18e274a9 100644 --- a/cookbook/copilot-sdk/nodejs/recipe/accessibility-report.ts +++ b/cookbook/copilot-sdk/nodejs/recipe/accessibility-report.ts @@ -55,7 +55,7 @@ async function main() { let idleResolve: (() => void) | null = null; session.on((event) => { - if (event.type === "assistant.message.delta") { + if (event.type === "assistant.message_delta") { process.stdout.write(event.data.deltaContent ?? ""); } else if (event.type === "session.idle") { idleResolve?.(); @@ -72,12 +72,12 @@ async function main() { const prompt = ` Use the Playwright MCP server to analyze the accessibility of this webpage: ${url} - + Please: 1. Navigate to the URL using playwright-browser_navigate 2. Take an accessibility snapshot using playwright-browser_snapshot 3. Analyze the snapshot and provide a detailed accessibility report - + Format the report EXACTLY like this structure with emoji indicators: 📊 Accessibility Report: [Page Title] (domain.com) @@ -133,8 +133,8 @@ async function main() { const detectLanguagePrompt = ` Analyze the current working directory to detect the primary programming language used in this project. Look for project files like package.json, *.csproj, pom.xml, requirements.txt, go.mod, etc. - - Respond with ONLY the detected language name (e.g., "TypeScript", "JavaScript", "C#", "Python", "Java") + + Respond with ONLY the detected language name (e.g., "TypeScript", "JavaScript", "C#", "Python", "Java") and a brief explanation of why you detected it. If no project is detected, suggest "TypeScript" as the default for Playwright tests. `; @@ -151,7 +151,7 @@ async function main() { const testGenerationPrompt = ` Based on the accessibility report you just generated for ${url}, create Playwright accessibility tests in ${language}. - + The tests should: 1. Verify all the accessibility checks from the report 2. Test for the issues that were found (to ensure they get fixed) @@ -167,7 +167,7 @@ async function main() { - Touch targets meet minimum size requirements 4. Use Playwright's accessibility testing features 5. Include helpful comments explaining each test - + Output the complete test file that can be saved and run. Use the Playwright MCP server tools if you need to verify any page details. `;