Comments (3)
What
Hi, we have achieved that (with CI support) in our project. What we have is visual regression from screenshots, automatically generated from meta.json
. It's not interacting with UI, but for these sort of validation we have integration tests via Vitest. Snapshots are supposed to catch a major CSS / UI shifts or changes. We believe it's a good time investment / results ratio.
How to
- Setup Playwright - https://playwright.dev/docs/intro. Nothing special needs to be done for this feature - we have gone with a somewhat default and recommended settings (3 major browsers + iPhone and Pixel emulators).
- Add code that will extend
test
with stories list:
import { test as base } from "@playwright/test";
import got from "got";
interface StoriesMeta {
stories: {
[key: string]: {
name: string;
levels: string[];
};
};
}
const LADLE_URL = "http://localhost:61000" as const;
export const test = base.extend<{ storiesMeta: StoriesMeta; ladleUrl: string }>(
{
// had to, cannot do (_, use) as first argument has to be destructured (not
// sure why though)
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
storiesMeta: async ({ page: _ }, use) => {
const storiesMeta = await got(`${LADLE_URL}/meta.json`)
.json()
.catch(() => {
/* eslint-disable-next-line no-console */
console.error("Unable to setup stories meta");
});
use(storiesMeta as StoriesMeta).catch(() => {
/* eslint-disable-next-line no-console */
console.error("Unable to setup stories meta");
});
},
ladleUrl: LADLE_URL,
}
);
export { expect } from "@playwright/test";
- Setup Ladle and add any story you want.
- Add a test -
.js
extension was due to some TS / ESModule problems I encountered, maybe it will not be required in your environment:
// importing via ".js" extension due to convoluted setup.
// only required in playwright tests!
import { expect, test } from "./test.js";
test("visual regression of Ladle stories", async ({
page,
storiesMeta,
ladleUrl,
}) => {
for (const storySlug of Object.keys(storiesMeta.stories)) {
const story = storiesMeta.stories[storySlug];
await test.step(story.name, async () => {
// console.log(story, storySlug);
await page.goto(`${ladleUrl}/?mode=preview&story=${storySlug}`);
await page.waitForSelector("[data-storyloaded]");
await expect(page).toHaveScreenshot(`${storySlug}.png`);
});
}
});
- Now every run will open each story and take snapshot of it - then compare with base one. On first run you have to generate base snapshots (this is detailed in Playwright docs).
I would advise to generate snapshots via same docker image as you run your CI - this way you'll not have pixel differences.
- Run playwright on your CI:
// scripts in package.json
{
"scripts": {
"e2e:dev": "playwright test -c src/playwright",
"e2e:ci": "start-server-and-test 'pnpm ladle dev' http://localhost:61000 'pnpm e2e:dev'"
}
}
# we use GitLab CI
stories visual regression tests:
image: mcr.microsoft.com/playwright:v1.23.4-focal
stage: test
script:
- pnpm e2e:ci
needs:
- linting
artifacts:
when: always
paths:
- test-results/**
expire_in: 2 days
from ladle.
Nice, I have something similar WIP here: #178
Just need to make some updates and write an article about it.
from ladle.
https://ladle.dev/blog/visual-snapshots
from ladle.
Related Issues (20)
- ladle build gives filenotfound error for typings-for-build tsconfig file HOT 6
- `tsconfig` paths not works HOT 5
- Allow stories at root (not in a subfolder) HOT 1
- Add config var: "expand story tree" HOT 1
- Make `args` and `argTypes` available in `meta.json` HOT 4
- Use url.format to construct serverUrl for dev server
- argTypes converts numbers to string
- Error: ENOENT: no such file or directory, open 'node_modules\@ladle\react\typings-for-build\app\.gitignore' HOT 1
- Type-safe object args HOT 3
- Disable default react refresh through ladle config HOT 2
- Bump Vite version HOT 1
- Allow more flexibility in dependency version ranges HOT 3
- `@babel/core` and other dependencies need to be updated due to `semver` dependency HOT 1
- Extra-big tab width impairs source code view
- Default export prevents HMR HOT 2
- Story with z-index element overlaps with controls popup HOT 1
- Auto generate Controls from Typescript types HOT 4
- Improve styling of imported .md code
- Dynamic stories: programmatically introduce stories HOT 4
- Any plan to allow user to create custom plugins ? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ladle.