render-reftest

Validate renderer outputs against independent references using Playwright and reftest workflows.

2.6k|145|Updated Feb 13, 2021
One-click install
npx skills add https://github.com/gridaco/grida --skill render-reftest
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: render-reftest
Source: https://github.com/gridaco/grida/tree/main/.agents/skills/render-reftest
Command: npx skills add https://github.com/gridaco/grida --skill render-reftest

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, and includes scripts (resource) components.

What problem does it solve?

This Skill provides a workflow to design, review, and debug visual rendering tests: reftests (independent oracle), golden/snapshot tests, probe tests (pixel assertions without vision), and Figma refig suites, ensuring visual consistency across renderer backends.

Core Features & Use Cases

  • Guidance on selecting reftest, golden, or probe test strategies and constructing robust fixtures.
  • End-to-end testing pipeline coverage, from fixture suites to oracle generation and diff reporting using the project's reftest tooling.
  • Documentation of HTML/CSS/SVG rendering test flows, including Figma refig integration and browser-based diff paradigms.

Quick Start

Render a fixture suite through the reftest pipeline to generate oracle PNGs and run diffs.

Frequently Asked Questions about render-reftest

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

FAQPage Schema
How do I run pixel diff tests to prevent visual regressions in HTML and SVG rendering?

Pixel diff tests prevent visual regressions by rendering fixtures via headless Chromium through Playwright, generating per-fixture PNGs, and comparing them against independent reference images to detect visual inconsistencies across backends.

What is the difference between a reftest, a golden test, and a probe test?

A reftest validates against an independent oracle, a golden test compares against snapshot baselines, and a probe test executes pixel assertions without vision; this workflow guides selecting the appropriate strategy and constructing robust fixtures for each.

Can I use Playwright to validate Figma refig pipeline outputs?

Yes, you can validate Figma refig pipeline outputs by integrating browser-based diff workflows; the pipeline requires a suite.json describing fixtures and uses Playwright's headless Chromium to render and validate the visual outputs.

How do I generate oracle PNGs and run visual diff reports for a fixture suite?

To generate oracle PNGs and run visual diff reports, define your fixtures in a suite.json file, render the suite through the reftest pipeline using headless Chromium, and output per-fixture PNGs alongside a compatible diff report.

What's the best way to structure fixtures for browser-based visual regression testing?

The best way to structure fixtures for browser-based visual regression testing is to define them in a suite.json file, enabling the testing pipeline to systematically render each fixture and validate outputs against independent references or golden snapshots.

Do I need a suite.json file to run visual rendering tests?

Yes, a suite.json file is required to run visual rendering tests; it describes the fixtures used by the pipeline to render outputs via headless Chromium and generate the corresponding PNGs and diff reports.