visualize-screenshot-checker

Capture and analyze maou visualize screenshots across array types and resolutions.

3|Updated Nov 4, 2022
One-click install
npx skills add https://github.com/dousu/maou --skill visualize-screenshot-checker
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visualize-screenshot-checker
Source: https://github.com/dousu/maou/tree/main/.claude/skills/visualize-screenshot-checker
Command: npx skills add https://github.com/dousu/maou --skill visualize-screenshot-checker

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the comprehensive visual testing of the maou visualize feature by capturing screenshots of various states and array types, ensuring UI consistency and correctness.

Core Features & Use Cases

  • Automated Visual Testing: Captures screenshots of the maou visualize interface across different array types (hcpe, stage1, stage2, preprocessing).
  • UI Element Verification: Checks for correct rendering of the chessboard, pieces, coordinates, tabs, and navigation elements.
  • Responsiveness Testing: Validates UI layout across different screen resolutions (wide, standard, narrow).
  • Use Case: Before releasing a new version of maou visualize, run this Skill to automatically generate a suite of screenshots. Manually review these screenshots to confirm that all UI elements are displayed correctly, the board is rendered accurately for each array type, and the interface adapts well to different screen sizes.

Quick Start

Run the visualize-screenshot-checker skill to perform a full visual check of the maou visualize feature.

Frequently Asked Questions about visualize-screenshot-checker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual regression testing for UI elements across multiple screen sizes?

Automated visual regression testing captures screenshots of UI elements across wide, standard, and narrow screen resolutions using Playwright, generating a detailed report to verify rendering correctness and responsiveness.

Can I use Playwright to verify chessboard and piece rendering in web applications?

Yes, Playwright can verify chessboard and piece rendering by automating browser interactions, capturing screenshots of various array types, and checking the correct display of coordinates, tabs, and navigation elements for UI consistency.

What is the best way to check responsiveness and UI layout before a release?

The best way to check responsiveness is by running an automated screenshot suite that validates UI layout across different screen resolutions and array types, allowing you to manually review the captured states for accurate board rendering.

Do I need Playwright to capture screenshots for visual testing of array types?

Yes, Playwright is required as the dependency for browser automation to capture screenshots of various states and array types like hcpe, stage1, stage2, and preprocessing, ensuring comprehensive UI verification.

Why does my visual testing report show inconsistent UI elements across different resolutions?

Inconsistent UI elements across resolutions occur when responsiveness testing identifies layout adaptation failures, which are highlighted in the detailed report generated after capturing screenshots of different array types and screen widths.

Does automated UI verification support testing multiple array types like preprocessing and stage2?

Automated UI verification supports testing multiple array types including hcpe, stage1, stage2, and preprocessing by capturing their specific interface states and verifying that all corresponding UI elements display correctly.