Cross-browser screenshot testing tool for Storybook with fancy UI Runner.
Cross-browser screenshot testing tool for Storybook with fancy UI Runner.
It named after Colin Creevey character from the Harry Potter universe.
Docker.
creeveypackage
yarn add -D creevey
creeveyinto your storybook config
// .storybook/main.js module.exports = { stories: [ /* ... */ ], addons: [ /* ... */ 'creevey', ], };
--uiflag)
yarn start-storybook -p 6006 yarn creevey --ui
And that's it.
NOTE: In first run you may noticed, that all your tests are failing, it because you don't have source screenshot images yet. If you think, that all images are acceptable, you may approve them all in one command
yarn creevey --update.
NOTE: Creevey captures screenshot of the
#rootelement and sometimes you need to capture a whole browser viewport. To achieve this you could define
captureElementCreevey parameter for story or kind. Or you may pass any different css selector.
// stories/MyModal.stories.tsx// NOTE: Define parameter for all stories export default { title: 'MyModal', parameters: { creevey: { captureElement: null } }, };
// NOTE: Or define it for specific one
export const MyModalStory = () => ; MyModalStory.parameters = { creevey: { captureElement: null } };
| Features\Tools | Creevey | Loki | Storyshots | Hermione | BackstopJS | Percy/Happo | Chromatic | | --------------------------- | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | ------------------ | | Easy-to-Setup | :heavycheckmark: | :heavycheckmark: | :warning: | :noentry: | :noentry: | :heavycheckmark: | :heavycheckmark: | | Storybook Support | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :noentry: | :noentry: | :heavycheckmark: | :heavycheckmark: | | Run tests from Storybook UI | :heavycheckmark: | :noentry: | :noentry: | :noentry: | :noentry: | :noentry: | :noentry: | | Cross-browser | :heavycheckmark: | :warning: | :noentry: | :heavycheckmark: | :noentry: | :heavycheckmark: | :heavycheckmark: | | Test Interaction | :heavycheckmark: | :noentry: | :warning: | :heavycheckmark: | :heavycheckmark: | :noentry: | :noentry: | | UI Test Runner | :heavycheckmark: | :noentry: | :noentry: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | :heavycheckmark: | | Built-in Docker | :heavycheckmark: | :heavycheckmark: | :noentry: | :noentry: | :heavycheckmark: | :warning: | :warning: | | Tests hot-reload | :heavycheckmark: | :noentry: | :noentry: | :noentry: | :noentry: | :noentry: | :no_entry: | | OSS/SaaS | OSS | OSS | OSS | OSS | OSS | SaaS | SaaS |
selenium, but also
puppeteeror
playwright.
This might happens because Creevey patches storybook webpack config and build nodejs bundle with stories meta information. And in some cases Creevey couldn't properly remove all unnecessary code cause of side-effects in stories files or you create stories dynamically. Try to rewrite such places. If it still doesn't help, send to me bundle that Creevey created (it located in
node_modules/creevey/.cache/creevey/storybook/main.js)
A little bit later I'll add possibility to run tests without building that bundle, so it fixes this issue.
Currently it's not possible to run Creevey in this configuration. I'll fix this in later versions. If you use
CircleCIor another CI that use docker to run jobs. Try to configure to use virtual machine executor
Update I added support to use local browsers. So it should be possible run Creevey inside docker. The only issue, that you need to find or build docker image with node, browser and selenium-webdriver. I'll add special images for Creevey later.
This cause to flaky screenshots. Possible solutions:
diffOptions: { threshold: 0.1 }
border: 1px solid red->
box-shadow: 0 0 0 1px red
selenium-webdriverpackage in story file
Because tests defined in story parameters and
selenium-webdriverdepends on nodejs builtin packages. Storybook may fail to build browser bundle. To avoid import use these workarounds:
.findElement(By.css('#root'))->
.findElement({ css: '#root' })
.sendKeys(Keys.ENTER)->
.sendKeys(this.keys.ENTER)
| |
|
|
| --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |