render-reftest

Name: render-reftest
Availability: InStock
Author: Grida

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

2.6k|145|Updated Feb 13, 2021

Search Tags:#rendering #figma #playwright #pixel-diff #golden-test #testing-pipeline #reftest

Ready to run

npx skills add https://github.com/gridaco/grida --skill render-reftest

💬 Prompt for ChatGPT / Claude Chat▼

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.