What frameworks does this skill support?

It primarily supports React, Vite, and plain HTML projects, utilizing Playwright as the underlying automation engine.

How does it handle asynchronous loading states?

The skill implements a loading state machine check that verifies transitions from idle to loading, and then to success or error states.

Can it check for dark mode compatibility?

Yes, it includes built-in generic contracts for verifying theme contrast and readability across dark, light, and system modes.

Do I need to write new test cases for every component?

No, the framework is designed to scale by automatically discovering UI blocks via data-qa tags and applying generic behavioral contracts.

Where are the test results and artifacts stored?

All test artifacts, including snapshots, frames, videos, and the report.html, are stored under the artifacts/ui-check/ directory.

UI Check Framework

Name: UI Check Framework
Author: yiyousiow000814

byyiyousiow000814

Seguridad y Pruebas

Builds and extends extensible UI self-check frameworks for Web UIs using Playwright to automate visual and functional quality assurance.

Acerca de

The UI Check Framework skill enables developers to implement a robust, scalable automated testing system that discovers UI components via QA tags and enforces behavioral contracts. It automates complex checks for theme accessibility, animation performance, loading states, and layout stability across various screen sizes. This skill is particularly useful for teams looking to maintain high UI standards without writing repetitive test cases for every new component, modal, or view added to their React or Vite projects.

Características Principales

0 GitHub stars
State machine validation for loading, success, and error flows
Automated component discovery via data-qa and data-testid tags
Interactive reporting with screenshots, video recordings, and HTML logs
Comprehensive theme, contrast, and accessibility verification
Visual stability and overlap detection across multiple screen sizes

Casos de Uso

Implementing accessibility and dark mode contrast checks into CI/CD pipelines
Enforcing QA tagging standards and documentation across large-scale frontend projects
Automating regression testing for design systems and component libraries

Acerca de

Características Principales

0 GitHub stars
State machine validation for loading, success, and error flows
Automated component discovery via data-qa and data-testid tags
Interactive reporting with screenshots, video recordings, and HTML logs
Comprehensive theme, contrast, and accessibility verification
Visual stability and overlap detection across multiple screen sizes

Casos de Uso

Implementing accessibility and dark mode contrast checks into CI/CD pipelines
Enforcing QA tagging standards and documentation across large-scale frontend projects
Automating regression testing for design systems and component libraries