尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

基于 GitHub Copilot SDK 与 Playwright MCP 的 Java 网页无障碍(WCAG)审计工具实战

基于 GitHub Copilot SDK 与 Playwright MCP 的 Java 网页无障碍(WCAG)审计工具实战 基于 GitHub Copilot SDK 与 Playwright MCP 的 Java 网页无障碍WCAG审计工具实战【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot本指南基于 awesome-copilot 仓库 cookbook/copilot-sdk/java/accessibility-report.md 中的完整示例讲解如何使用 GitHub Copilot SDKJava 版构建一个命令行无障碍审计工具借助 Playwright MCP 服务器驱动真实浏览器抓取页面无障碍快照由 Copilot 模型生成符合 WCAG 规范的详细报告并可选地自动产出 Playwright 无障碍测试代码。读完本文你将掌握 Copilot SDK 会话的创建与事件流式处理、MCP 服务器挂载、提示词工程驱动报告结构化输出以及如何将这一模式扩展到其他语言的同类工具。示例场景让 AI 替你审计网站无障碍无障碍Accessibility审计是 Web 产品上线前的重要环节传统做法依赖人工结合 axe 等工具逐页检查成本高且标准难统一。本示例给出了一种完全不同的思路你希望审计某个网站的无障碍合规性。该工具使用 Playwright 导航到指定 URL抓取无障碍快照并产出一份结构化的报告覆盖 landmarks地标、标题层级、焦点管理、触摸目标等 WCAG 关注点。它还可以生成 Playwright 测试文件用于自动化未来的无障碍检查。工具的核心执行流程可以概括为三步模型通过 Playwright MCP 服务器执行浏览器操作 → 通过browser_snapshot抓取页面无障碍树 → 按提示词约定的格式输出结构化 WCAG 报告。整个过程由 AI 自主完成开发者只需输入一个 URL。环境准备Prerequisites运行本示例需要两样东西JBang用于免编译直接运行 Java 单文件脚本npxNode.jsPlaywright MCP 服务器以npx playwright/mcplatest方式本地启动因此需要 Node.js 环境。# macOS通过 Homebrew 安装 JBang brew install jbangdev/tap/jbang # 验证 npx 可用Playwright MCP 依赖它 npx --version在 Java 侧示例通过 JBang 的//DEPS指令声明依赖无需手动管理构建文件//DEPS com.github:copilot-sdk-java:0.2.1-java.1该依赖声明直接内嵌在 recipe/AccessibilityReport.java 顶部JBang 会在首次运行时自动解析下载。Java 版 cookbook 的完整食谱索引见 cookbook/copilot-sdk/java/README.md五个语言版本Java、.NET、Node.js、Python、Go的对照说明见 cookbook/copilot-sdk/README.md。运行方式Usagejbang recipe/AccessibilityReport.java # 按提示输入 URL程序启动后会提示输入 URL输入后自动开始分析报告流式打印在终端报告完成后询问是否生成 Playwright 测试输入y或yes继续。对应可运行文件为 cookbook/copilot-sdk/java/recipe/AccessibilityReport.java。完整示例AccessibilityReport.java以下是 cookbook/copilot-sdk/java/accessibility-report.md 提供的完整实现文中注释对关键行为做了补充说明///usr/bin/env jbang $0 $ ; exit $? //DEPS com.github:copilot-sdk-java:0.2.1-java.1 import com.github.copilot.sdk.*; import com.github.copilot.sdk.events.*; import com.github.copilot.sdk.json.*; import java.io.*; import java.util.*; import java.util.concurrent.*; public class AccessibilityReport { public static void main(String[] args) throws Exception { System.out.println( Accessibility Report Generator \n); var reader new BufferedReader(new InputStreamReader(System.in)); System.out.print(Enter URL to analyze: ); String url reader.readLine().trim(); if (url.isEmpty()) { System.out.println(No URL provided. Exiting.); return; } // 自动补全协议前缀方便直接输入 github.com 这类裸域名 if (!url.startsWith(http://) !url.startsWith(https://)) { url https:// url; } System.out.printf(%nAnalyzing: %s%n, url); System.out.println(Please wait...\n); // try-with-resources 保证客户端在异常时也被关闭 try (var client new CopilotClient()) { client.start().get(); // 配置 Playwright MCP 服务器用于浏览器自动化 MapString, Object mcpConfig Map.of( type, local, command, npx, args, List.of(playwright/mcplatest), tools, List.of(*) ); var session client.createSession( new SessionConfig() .setOnPermissionRequest(PermissionHandler.APPROVE_ALL) .setModel(claude-opus-4.6) .setStreaming(true) .setMcpServers(Map.of(playwright, mcpConfig)) ).get(); // 以 token 粒度流式输出模型回复 var idleLatch new CountDownLatch(1); session.on(AssistantMessageDeltaEvent.class, ev - System.out.print(ev.getData().deltaContent())); session.on(SessionIdleEvent.class, ev - idleLatch.countDown()); session.on(SessionErrorEvent.class, ev - { System.err.printf(%nError: %s%n, ev.getData().message()); idleLatch.countDown(); }); String prompt Use the Playwright MCP server to analyze the accessibility of this webpage: %s 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 with emoji indicators: - Accessibility Report header - ✅ Whats Working Well (table with Category, Status, Details) - ⚠️ Issues Found (table with Severity, Issue, WCAG Criterion, Recommendation) - Stats Summary (links, headings, focusable elements, landmarks) - ⚙️ Priority Recommendations Use ✅ for pass, for high severity issues, for medium severity, ❌ for missing items. Include actual findings from the page analysis. .formatted(url); session.send(new MessageOptions().setPrompt(prompt)); idleLatch.await(); System.out.println(\n\n Report Complete \n); // 询问是否生成测试 System.out.print(Would you like to generate Playwright accessibility tests? (y/n): ); String generateTests reader.readLine().trim(); if (generateTests.equalsIgnoreCase(y) || generateTests.equalsIgnoreCase(yes)) { var testLatch new CountDownLatch(1); session.on(SessionIdleEvent.class, ev - testLatch.countDown()); String testPrompt Based on the accessibility report you just generated for %s, create Playwright accessibility tests in Java. Include tests for: lang attribute, title, heading hierarchy, alt text, landmarks, skip navigation, focus indicators, and touch targets. Use Playwrights accessibility testing features with helpful comments. Output the complete test file. .formatted(url); System.out.println(\nGenerating accessibility tests...\n); session.send(new MessageOptions().setPrompt(testPrompt)); testLatch.await(); System.out.println(\n\n Tests Generated ); } session.close(); } } }工作原理拆解整个工具可以拆成五个环节Playwright MCP 服务器在会话内启动一个本地 MCP 服务器运行playwright/mcp为模型提供浏览器自动化工具流式输出通过streaming: true与AssistantMessageDeltaEvent实现 token 级别的实时输出而不是等整段回复生成完毕无障碍快照Playwright 的browser_snapshot工具抓取页面完整的无障碍树accessibility tree结构化报告提示词约束模型输出统一、对齐 WCAG 的报告格式并用 emoji 标注严重级别测试生成基于已生成的报告可选地让模型继续产出 Playwright 无障碍测试代码。MCP 服务器配置食谱在会话创建时挂载一个本地 MCP 服务器MapString, Object mcpConfig Map.of( type, local, command, npx, args, List.of(playwright/mcplatest), tools, List.of(*) ); var session client.createSession( new SessionConfig() .setOnPermissionRequest(PermissionHandler.APPROVE_ALL) .setMcpServers(Map.of(playwright, mcpConfig)) ).get();配置项含义如下配置键取值作用typelocal声明这是一个本地进程型 MCP 服务器与之相对的是remote远程服务器commandnpx启动本地服务器的可执行命令args[playwright/mcplatest]传给命令的参数即 Playwright 官方 MCP 包tools[*]暴露给模型使用的工具白名单*表示全部暴露setMcpServers(Map.of(playwright, mcpConfig))以playwright为命名空间挂载该服务器。挂载后模型即可调用 Playwright 提供的浏览器工具如browser_navigate导航、browser_snapshot抓取无障碍快照、browser_click点击元素等。需要说明的是setOnPermissionRequest(PermissionHandler.APPROVE_ALL)表示对所有工具权限请求一律自动批准——这保证了浏览器自动化链路无人值守、无需人工确认适合 CLI 工具场景。若在更敏感的交互式环境中可以换成人工确认策略代价是每次工具调用需要用户介入。基于事件的流式输出与sendAndWait一次性等待完整回复不同本食谱使用事件订阅实现实时流式输出session.on(AssistantMessageDeltaEvent.class, ev - System.out.print(ev.getData().deltaContent())); session.on(SessionIdleEvent.class, ev - idleLatch.countDown());这里用到了三类会话事件事件类触发时机本示例处理方式AssistantMessageDeltaEvent模型每生成一个内容增量token立即System.out.print打印形成打字机效果SessionIdleEvent会话进入空闲本轮回复结束释放CountDownLatch唤醒主线程继续SessionErrorEvent会话运行出错打印错误信息并同样释放闩锁避免主线程永久阻塞事件回调运行在 SDK 的异步线程上主线程则通过CountDownLatch与事件流同步当会话进入 idle 状态时闩锁被释放主线程的idleLatch.await()返回程序继续执行。这个异步事件 闩锁同步的模式是把阻塞式 CLI 流程与实时流式输出结合起来的标准做法。提示词工程把无障碍报告格式化报告质量的差异主要体现在提示词上。核心提示词做了三件事指定执行步骤明确要求模型依次调用playwright-browser_navigate与playwright-browser_snapshot让模型先抓快照、再写报告避免凭空猜测页面内容约束输出结构要求报告包含四个固定板块——✅ Whats Working Well、⚠️ Issues Found、 Stats Summary、⚙️ Priority Recommendations且每个板块都有明确的表格列定义如 Issues 表格必须是 Severity / Issue / WCAG Criterion / Recommendation 四列统一状态符号约定✅表示通过、表示高严重级别、表示中等级别、❌表示缺失项并强调必须包含页面分析的真实发现Include actual findings防止模型编造数据。第二轮测试生成提示词则要求模型覆盖lang属性、title、标题层级、替代文本、地标、跳过导航、焦点指示器和触摸目标等检查点并直接输出完整的测试文件。关键概念深入解析会话生命周期与资源管理示例在try (var client new CopilotClient())中创建客户端client.start().get()启动底层 Copilot 进程会话结束后显式session.close()。这种资源管理方式与 cookbook/copilot-sdk/java/error-handling.md 中强调的最佳实践一致始终用try-with-resources包裹CopilotClient必要时嵌套包裹会话保证无论是否发生异常客户端与子进程都会被正确清理。对照错误处理食谱还可以看出在生产环境中建议对CompletableFuture.get()的ExecutionException调用getCause()还原真实错误、捕获InterruptedException时调用Thread.currentThread().interrupt()恢复中断标志、对可能阻塞的调用使用get(timeout, TimeUnit)设置超时。这些模式都可以直接移植到本工具中让无障碍审计 CLI 更加健壮。WCAG 报告的关注点报告结构覆盖了 WCAG 2.x 中几个高频检查项Landmarks地标对应banner、navigation、main、footer等 ARIA landmark 的存在与使用帮助屏幕阅读器用户快速跳转页面区块Heading hierarchy标题层级检查是否存在且只存在一个 H1、标题层级是否跳级对应 WCAG 1.3.1信息与关系的辅助技术语义Focus management焦点管理可聚焦元素的数量与顺序对应 2.1.1键盘可达与 2.4.7焦点可见Touch targets触摸目标交互元素的可点击区域是否过小对应移动端可访问性实践链接描述报告示例中的2.4.4 Link Purpose (In Context)即要求链接文本能描述其目标图标型链接建议补充aria-label。测试生成的可选流程报告完成后工具询问是否生成测试。选择生成时程序复用同一个会话发送第二轮提示词testPrompt并再次用新的CountDownLatch等待会话 idle。这里体现了 SDK 会话的连续性同一会话保留上文报告的全部上下文因此测试提示词只需说Based on the accessibility report you just generated模型就能基于刚审计出的问题有针对性地生成测试。示例交互Sample Interaction以下是 cookbook/copilot-sdk/java/accessibility-report.md 提供的完整运行示例以github.com为例 Accessibility Report Generator Enter URL to analyze: github.com Analyzing: https://github.com Please wait... Accessibility Report: GitHub (github.com) ✅ Whats Working Well | Category | Status | Details | |----------|--------|---------| | Language | ✅ Pass | langen properly set | | Page Title | ✅ Pass | GitHub is recognizable | | Heading Hierarchy | ✅ Pass | Proper H1/H2 structure | | Images | ✅ Pass | All images have alt text | ⚠️ Issues Found | Severity | Issue | WCAG Criterion | Recommendation | |----------|-------|----------------|----------------| | Medium | Some links lack descriptive text | 2.4.4 | Add aria-label to icon-only links | Stats Summary - Total Links: 47 - Total Headings: 8 (1× H1, proper hierarchy) - Focusable Elements: 52 - Landmarks Found: banner ✅, navigation ✅, main ✅, footer ✅ Report Complete Would you like to generate Playwright accessibility tests? (y/n): y Generating accessibility tests... [Generated test file output...] Tests Generated 注意示例中github.com被自动补全为https://github.com这是代码中 URL 协议补全逻辑的作用。Stats Summary 中的链接数、标题数、可聚焦元素数、地标列表均由browser_snapshot抓取的无障碍树统计而来保证报告数据来自真实页面分析。跨语言对照同一模式在五种语言中的实现本食谱在 awesome-copilot 仓库的 cookbook 中覆盖全部五种支持语言核心思路完全一致仅 API 形态不同语言文档可运行示例关键 APIJavaaccessibility-report.mdAccessibilityReport.javaCopilotClient、SessionConfig、AssistantMessageDeltaEvent.NETaccessibility-report.mdaccessibility-report.csGitHub.Copilot命名空间、StartAsync()Node.jsaccessibility-report.mdaccessibility-report.tsgithub/copilot-sdk、assistant.message_delta事件Pythonaccessibility-report.mdaccessibility_report.pycopilot包、asyncio.EventGoaccessibility-report.mdaccessibility-report.gocopilot.NewClient、AssistantMessageDeltaData几个值得注意的语言差异同步机制不同Java 用CountDownLatch、Python 用asyncio.Event、Go 用 buffered channeldone : make(chan struct{}, 1)、Node.js 用 Promise 封装本质都是等待 idle 事件。测试语言处理不同Java 版固定生成 Java 测试Python、Node.js、Go 版多了一个检测项目语言的中间步骤——先让模型分析当前工作目录推断主语言再由用户确认默认回退为 TypeScript。如果你需要跨项目复用本工具可以参考这三个版本把语言检测 确认环节移植进 Java 版。错误处理Java 版订阅SessionErrorEvent兜底释放闩锁Go 版同样处理SessionErrorDataNode.js 版在session.error时调用idleResolve并打印错误。三者的目的相同——避免会话出错时主线程无限等待。扩展与注意事项模型选择示例将setModel(claude-opus-4.6)写死在会话配置中实际使用时可根据 Copilot 环境支持的模型列表调整权限策略APPROVE_ALL适合无人值守的 CLI 审计但在生产或共享环境中建议评估更细粒度的权限策略以控制浏览器工具的调用范围超时与健壮性可参照 error-handling.md 为client.start().get()、idleLatch.await()增加超时参数并解包ExecutionException获取底层错误如 Copilot CLI 未安装或无法连接CI 集成工具完全由命令行驱动、输出流式打印可以直接嵌入 CI 流水线把生成的 Playwright 测试文件落盘后纳入测试套件实现审计一次、永久回归。综合来看本食谱演示的SDK 会话 MCP 服务器 提示词约束输出三件套不仅适用于无障碍审计也可以平移到页面性能分析、SEO 检查、视觉回归等任意让 AI 驱动真实浏览器干活的场景是 Copilot SDK 落地 CLI 工具的可复用模板。【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表