Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
aotenjou avatar

Paddleocr Ui Test

  • 5 installs
  • 8 repo stars
  • Updated April 10, 2026
  • aotenjou/paddleocr-ui-test

paddleocr-ui-test is a Claude Code skill that validates rendered UIs by cross-referencing PaddleOCR screenshot text extraction with Playwright Accessibility Tree snapshots.

About

paddleocr-ui-test is a Claude skill for OCR-based UI validation. It extracts visible text from screenshots with PaddleOCR and cross-references it against Playwright accessibility tree snapshots to detect UI defects across six levels: text consistency, layout anomalies, DOM cross-validation, accessibility, i18n, and dynamic content. It supports page-type profiles, tunable rule files, baseline regression, and consuming upstream artifacts. A developer uses it to verify a rendered UI matches expected content and catch visual regressions.

  • Validates rendered UI by extracting screenshot text with PaddleOCR
  • Cross-references OCR text against Playwright Accessibility Tree snapshots
  • 6 detection levels for text, layout, DOM cross-val, accessibility, i18n, and dynamic content

Paddleocr Ui Test by the numbers

  • 5 all-time installs (skills.sh)
  • Ranked #1,611 of 2,153 Testing & QA skills by installs in the Skillselion catalog
  • Data as of Jul 29, 2026 (Skillselion catalog sync)
At a glance

paddleocr-ui-test capabilities & compatibility

Capabilities
ui testing · ocr validation · visual regression · accessibility check
Works with
playwright · openai
Use cases
testing · ui design · web design
Pricing
Bring your own API key
From the docs

What paddleocr-ui-test says it does

Provides dual-path UI validation using PaddleOCR screenshot text extraction cross-referenced with Playwright Accessibility Tree snapshots.
SKILL.md
Env: `PADDLEOCR_API_KEY` 或 `SILICONFLOW_API_KEY`(必须)
SKILL.md
npx skills add https://github.com/aotenjou/paddleocr-ui-test --skill paddleocr-ui-test

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs5
repo stars8
Last updatedApril 10, 2026
Repositoryaotenjou/paddleocr-ui-test

What it does

Validating a rendered UI by comparing PaddleOCR screenshot text against the Playwright accessibility tree.

Who is it for?

Developers validating rendered UI text, layout, and accessibility against expectations and baselines

When should I use this skill?

Test UI from screenshot, verify UI matches expected, run visual UI test, or baseline UI regression

What you get

  • report.json
  • report.md
  • annotated screenshot

By the numbers

  • 6 detection levels (L1-L6)
  • 6 page-type profiles
  • version 0.2.0

Files

SKILL.mdMarkdownGitHub ↗

PaddleOCR UI Testing

OCR 截图文字提取 + Playwright Accessibility Tree 交叉验证,6 级 UI 缺陷检测。

Prerequisites

  • Env: PADDLEOCR_API_KEYSILICONFLOW_API_KEY(必须)
  • Python: openai, playwright, Pillow
  • 浏览器: playwright install chromium

Control Knobs

1. 测试范围 (--levels)

Level检测什么何时使用
L1文字一致性:可见文字是否符合预期检查文案、按钮文字、标题是否正确
L2布局合理性:溢出、重叠、触控区域检查排版异常、移动端触控可达性
L3DOM 交叉验证:OCR 可见文字 vs A11y Tree核心功能:检测渲染异常、canvas 文字
L4无障碍:缺失 alt/label、emoji 作图标表单页、图片密集页
L5多语言:检测错误的语言内容国际化页面
L6动态内容:操作前后的文字变化加载状态、分页、异步更新

默认: L1,L3。用户说"全面检查"时开 L1,L2,L3,L4,L5

2. 页面类型 (--profile)

Profile适用场景自动设置
saas后台管理系统、数据表格页L1,L2,L3,L5 / 1920x1080 / 宽松数量差异
ecommerce电商网站、商品列表L1,L2,L3,L4,L5 / 1440x900 / 模糊匹配+触控检查
form登录/注册/表单页L1,L3,L4 / 1280x720 / 开启 label 检查
content博客/新闻/文章页L1,L2,L3 / 1440x900 / 宽松全页文字阈值
dashboard数据大屏/分析面板L2,L3,L6 / 1920x1080 / 重叠检测+内容持久化
mobile移动端 H5/响应式页L1,L2,L3,L4 / 375x812 / 触控区域+溢出检查

Profile 自动设置 levels、viewport、wait_ms 和规则覆盖。

3. 规则调优 (rules/*.json)

每个 rule 文件控制一个 level 的检测行为。agent 可根据需求修改:

L1: rules/text-consistency.json
  • default_strategy: exact(严格)/ substring(默认)/ fuzzy(容错)
  • match_strategies.fuzzy.threshold: 模糊匹配阈值,默认 0.8
  • ignore_patterns: 忽略的文字模式(如版本号、哈希值)
L2: rules/layout-anomaly.json
  • overflow.enabled: 是否检测溢出
  • element_overlap.enabled + iou_threshold: 重叠检测开关和 IoU 阈值
  • touch_target_size.enabled + min_width_px/min_height_px: 触控区域最小尺寸
  • full_page_text.width_threshold/height_threshold: 全页文字判定阈值
L3: rules/dom-ocr-crossval.json
  • fuzzy_match.enabled + threshold: 模糊匹配开关和阈值(0.6 为匹配,0.7 为警告)
  • count_mismatch.delta_threshold: 数量差异容忍比例,默认 0.3
  • ignore_patterns: 忽略的文本模式
L4: rules/accessibility.json
  • missing_alt.enabled: 图片 alt 检查(默认开)
  • missing_label.enabled: 交互元素 label 检查(默认关,form profile 开启)
  • canvas_rendered_text.enabled: 检测 canvas 渲染文字(OCR 可见但 A11y 不可见)
  • emoji_as_icon.enabled: 检测 emoji 用作图标
L5: rules/i18n.json
  • languages: 各语言的正则模式(zh/en/ja/ko)
  • common_false_positives: 不误判的词(OK, API, URL 等)
L6: rules/dynamic-content.json
  • state_transitions: 预定义的状态转换模式(loading→content, content→error)
  • max_tracked_changes: 最大追踪变化数,默认 5

4. 具体期望 (--config)

当用户有具体的文字预期时,生成 config JSON:

{
  "expected_texts": {
    "page_title": "Login Page",
    "username_label": "Username",
    "submit_button": "Login"
  },
  "expected_language": "en",
  "ignore_texts": ["Powered by"]
}

5. 回归对比 (--baseline / --baseline-file)

  • --baseline: 保存当前运行结果为基线(首次测试或用户说"保存基准")
  • --baseline-file baseline.json: 与历史基线对比,检测文字移除/新增、布局偏移、数量变化
  • 基线文件自动保存在输出目录的 baseline.json

辅助参数

  • --annotate: 在截图上标注问题区域(失败时推荐开启)
  • --actions: L6 动态测试的动作序列,如 "click(#btn);wait(2000);screenshot"
  • --output: 输出目录,默认 ./test-results

Output Artifacts

文件说明
report.json结构化结果,含 issue 类型、严重级别、建议
report.md人类可读报告
screenshot.png捕获的截图
annotated.png标注了问题区域的截图(--annotate 时生成)
baseline.json基线文件(--baseline 时生成)

Integration

Input Contract

本 skill 接受的最小输入: --url (必须)。 上游 skill 不需要知道本 skill 的 config 格式,agent 负责转换。

新增轻量柔性适配输入模式(保持原能力不变):

  • --input-mode url(默认):原有模式,skill 自己采集 screenshot + a11y
  • --input-mode artifacts --artifacts-dir <dir>:消费上游导出的页面产物
  • --input-mode mcp --input-json <file>:消费 MCP payload(v1 仅路径型字段)

MCP payload v1 示例:

{
  "source": "playwright-mcp",
  "url": "https://example.com",
  "viewport": "1280x720",
  "screenshot_path": "./artifacts/screenshot.png",
  "a11y_tree_path": "./artifacts/a11y_tree.json",
  "dom_path": "./artifacts/dom.html"
}

上游输出适配

上游输出转换方式示例
dogfood 自由文本描述提取关键文字 → expected_texts"按钮显示 Submit" → {"submit_button": "Submit"}
dogfood 截图/问题列表问题归类 → 对应 level 的检测规则"文字重叠" → 开 L2
ui-ux-pro-max 设计系统提取文案要求 → expected_texts设计稿按钮文字 → config
ui-ux-pro-max 无障碍建议映射到 L4 规则开关"检查 label" → accessibility.missing_label.enabled=true
ui-ux-pro-max i18n 要求映射到 L5 规则"需要中日韩支持" → 开 ja/ko 语言检测
dev-browser 页面状态复用截图 + HTML + A11y Tree不重新加载页面,直接消费产物
用户自然语言描述直接生成 config"确认标题是 Hello" → {"title": "Hello"}

协作模式选择

根据用户意图自动选择协作模式:

用户说...模式流程
"检查这个页面"standalone只跑本 skill (L1,L3)
"全面检查"standalone+本 skill 全 levels + --annotate
"先探索再检查"dogfood → 本 skilldogfood 发现 → 生成 config → 本 skill 验证
"和之前比有没有变化"baseline检测 baseline.json → --baseline-file
"设计实现得对不对"ui-ux-pro-max → 本 skill设计意图 → 提取 expected → 验证
"帮我操作然后检查"dev-browser → 本 skilldev-browser 导航+操作 → 本 skill 验证最终状态

dev-browser 会话复用

与 dev-browser 协作时,避免重复启动浏览器:

1. dev-browser 完成页面导航/操作后,导出:

  • 截图: page.screenshot()
  • HTML: page.content()
  • A11y Tree: page.evaluate(A11Y_TREE_SCRIPT)

2. 本 skill 直接消费这些产物,不重新加载页面 3. 好处: 保持 session/cookie 一致,节省 API 调用

Playwright MCP / UI test generation MCP 下游接入建议:

1. 上游 MCP 导出 screenshot + a11y tree + dom 到本地 artifacts 2. 本 skill 使用 --input-mode artifacts--input-mode mcp 直接消费 3. 本 skill 输出 report.json / annotated.png 继续给下游 agent/MCP 使用

说明:L6 --actions 在当前轻量版本仅在 url 模式执行。

Output Contract

本 skill 的产出可被下游 skill 消费:

产物格式下游可消费
report.json结构化 issue 列表dogfood 可读取 results 补充新发现
annotated.png标注截图dev-browser 可定位 screenshot_region 坐标确认问题
baseline.json基线快照后续运行可 --baseline-file 对比
screenshot.png原始截图可喂给其他视觉分析 skill

与其他 Skill 的协作流程

ui-ux-pro-max  →  定义设计意图 (颜色/排版/文案/无障碍要求)
     ↓
dogfood        →  探索实际页面 (发现问题/意外行为)
     ↓
paddleocr-ui-test →  验证并守卫 (把发现转为自动化回归检查)
  • dev-browser 是执行引擎: 所有 skill 都可用它做页面导航和交互
  • ui-ux-pro-max 是理想态: 定义页面"应该"长什么样
  • dogfood 是发现机制: 找出"实际"有什么问题
  • 本 skill 是验证层: 把发现固化为可持续运行的自动化检查

Related skills

FAQ

How does paddleocr-ui-test detect defects?

It cross-references PaddleOCR-extracted screenshot text with the Playwright accessibility tree across six detection levels.

What does it require to run?

A PADDLEOCR_API_KEY or SILICONFLOW_API_KEY, plus Python (openai, playwright, Pillow) and a Chromium install.

Testing & QAtestingfrontend

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.