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

Paddleocr Ui Test

  • 1 installs
  • 8 repo stars
  • Updated April 10, 2026
  • aotenjou/paddleocr-uitest

PaddleOCR UI Testing is a skill that cross-validates PaddleOCR screenshot text against Playwright accessibility-tree snapshots to run OCR-based visual UI regression tests.

About

PaddleOCR UI Testing runs OCR over page screenshots and cross-references the extracted text and box coordinates against Playwright accessibility-tree snapshots to catch visual regressions. A developer runs it to detect text mismatches, layout anomalies, DOM-vs-render discrepancies, and internationalization issues on a live URL. It outputs JSON and Markdown reports and can map each issue to a source code location when a source map is supplied.

  • Combines PaddleOCR screenshot text extraction with Playwright accessibility-tree snapshots
  • Six test levels: text, layout, DOM consistency, accessibility, i18n, dynamic content
  • Maps detected UI issues back to source file:line via a source map

Paddleocr Ui Test by the numbers

  • 1 all-time installs (skills.sh)
  • Ranked #1,750 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

Requires a PaddleOCR API key (PADDLEOCR_API_KEY or SILICONFLOW_API_KEY)

Capabilities
visual regression · accessibility audit · ui test
Works with
playwright
Use cases
testing · ui design
Runs
Runs locally
Pricing
Bring your own API key
From the docs

What paddleocr-ui-test says it does

AI-driven UI testing that combines PaddleOCR screenshot analysis with DOM/Accessibility Tree cross-validation for intelligent visual regression testing.
SKILL.md
Cross-reference what OCR sees vs what the DOM claims exists.
SKILL.md
PaddleOCR API key via `PADDLEOCR_API_KEY` environment variable (or `SILICONFLOW_API_KEY`)
SKILL.md
npx skills add https://github.com/aotenjou/paddleocr-uitest --skill paddleocr-ui-test

Add your badge

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

Listed on Skillselion
Installs1
repo stars8
Last updatedApril 10, 2026
Repositoryaotenjou/paddleocr-uitest

What it does

Validate that a rendered web UI matches the DOM and expected text by cross-checking OCR screenshot output against the Playwright accessibility tree.

Who is it for?

OCR-based visual and DOM-consistency regression testing of rendered web pages

When should I use this skill?

when the user asks to test UI from a screenshot, verify UI matches expected, or run an OCR-based UI test

What you get

A JSON + Markdown report of UI text, layout, and DOM-consistency failures mapped to source code locations

  • JSON test report
  • Markdown test report
  • optional annotated screenshot

By the numbers

  • six-level UI testing (L1-L6)
  • default runs levels L1,L3

Files

SKILL.mdMarkdownGitHub ↗

PaddleOCR UI Testing

AI-driven UI testing that combines PaddleOCR screenshot analysis with DOM/Accessibility Tree cross-validation for intelligent visual regression testing.

Overview

This skill provides six-level UI testing capabilities:

LevelScenarioDetection Method
L1Text consistencyOCR text vs expected text
L2Layout合理性OCR box coordinate analysis
L3DOM consistencyOCR vs A11y Tree cross-validation
L4AccessibilityOCR + A11y joint analysis
L5InternationalizationOCR language detection
L6Dynamic contentScreenshot sequence comparison

Quick Start

Prerequisites

  • Python 3.8+ with openai, playwright, Pillow installed
  • PaddleOCR API key via PADDLEOCR_API_KEY environment variable (or SILICONFLOW_API_KEY)
  • Playwright browsers installed (playwright install)

Basic Usage

Run the /ui-test command or execute the test script directly:

python3 scripts/ui_test.py --url https://example.com --config examples/test-config.json

Arguments

ArgumentDescription
--urlTarget URL to test (required)
--configTest configuration JSON file
--levelsTest levels to run: L1,L2,L3,L4,L5,L6 (default: L1,L3)
--viewportBrowser viewport size, e.g. "1920x1080" (default: 1280x720)
--waitMilliseconds to wait after page load (default: 2000)
--outputOutput directory for results (default: ./test-results)
--formatOutput format: json, markdown, both (default: both)
--source-mapPath to source map directory for code location lookup
--annotateGenerate annotated screenshot with issue markers

Test Execution Flow

1. Navigate to URL with Playwright
2. Wait for page to stabilize
3. Capture screenshot
4. Extract accessibility tree snapshot
5. Send screenshot to PaddleOCR for text + coordinate extraction
6. Cross-validate OCR results against A11y Tree
7. Map issues to source code locations (if --source-map provided)
8. Generate report (JSON + Markdown)
9. Optionally generate annotated screenshot

Test Levels Detail

L1: Text Consistency

Compare text visible in screenshot against expected text values.

python3 scripts/ui_test.py --url https://example.com/login \
  --levels L1 \
  --config examples/test-config.json

Detects: typos, missing text, extra text, character encoding issues, text truncation.

L2: Layout Reasonableness

Analyze OCR box coordinates to detect layout anomalies.

python3 scripts/ui_test.py --url https://example.com --levels L2

Detects: overlapping elements, text overflow, misaligned components, hidden content visible.

L3: DOM Consistency (Core Feature)

Cross-reference what OCR sees vs what the DOM claims exists.

python3 scripts/ui_test.py --url https://example.com --levels L3

Detects: elements in DOM but not rendered, elements rendered but not in DOM, text content mismatches, count discrepancies.

L4: Accessibility

Joint OCR + A11y analysis for visual accessibility issues.

python3 scripts/ui_test.py --url https://example.com --levels L4

Detects: low contrast text (inferred from OCR confidence), missing labels, unreadable text.

L5: Internationalization

Detect language mismatches in multi-language UIs.

python3 scripts/ui_test.py --url https://example.com/zh --levels L5

Detects: untranslated strings, wrong language content, encoding issues.

L6: Dynamic Content

Compare screenshot sequences to verify state transitions.

python3 scripts/ui_test.py --url https://example.com --levels L6 \
  --actions "click(#load-more);wait(2000);screenshot"

Detects: loading states not clearing, animations stuck, content not updating.

Output Format

JSON Report

{
  "test_id": "ui-test-20260402-001",
  "url": "https://example.com/login",
  "timestamp": "2026-04-02T10:30:00Z",
  "summary": {
    "total_checks": 12,
    "passed": 10,
    "failed": 2,
    "warnings": 1
  },
  "results": [
    {
      "type": "text_mismatch",
      "severity": "error",
      "level": "L1",
      "element": "submit_button",
      "expected": "提交",
      "actual": "提 交",
      "source_location": "src/components/LoginForm.tsx:42",
      "screenshot_region": [[480, 280], [560, 320]],
      "suggestion": "检查 CSS letter-spacing 或 font-kerning 设置"
    }
  ]
}

Markdown Report

Human-readable report with test summary, failed items, warnings, and annotated screenshot reference.

Source Code Location Mapping

When --source-map is provided, issues are mapped to source code locations:

1. OCR identifies text at pixel coordinates (x, y) 2. Playwright provides DOM element at same coordinates 3. Source map resolves DOM element to original source file:line 4. Report includes exact file path and line number for fixes

Integration with Other Skills

With dogfood (Exploratory Testing)

1. Run dogfood first for exploratory page analysis 2. Extract issues found by dogfood as test cases 3. Run paddleocr-ui-test for automated regression verification

With dev-browser (Browser Automation)

1. Use dev-browser to navigate to target pages 2. Capture screenshots via dev-browser 3. Feed screenshots to paddleocr-ui-test for analysis

Additional Resources

Reference Files

  • `references/ocr-api.md` - PaddleOCR API configuration and model selection
  • `references/a11y-tree.md` - Accessibility Tree format and parsing guide
  • `references/test-patterns.md` - Common UI test patterns and configurations

Example Files

  • `examples/test-config.json` - Complete test configuration example

Scripts

  • `scripts/ui_test.py` - Main test execution script
  • `scripts/compare_ocr_dom.py` - OCR vs DOM cross-validation engine
  • `scripts/source_map_lookup.py` - Source code location resolver

Related skills

FAQ

What does paddleocr-ui-test check?

It runs six levels of checks: text consistency, layout reasonableness, DOM consistency, accessibility, internationalization, and dynamic content.

What does it need to run?

Python 3.8+ with openai, playwright, and Pillow, a PADDLEOCR_API_KEY (or SILICONFLOW_API_KEY), and installed Playwright browsers.

Testing & QAtestingfrontend

This week in AI coding

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

unsubscribe anytime.