creevey
creevey is a tool for automated visual testing, that tightly integrated with storybook
Last updated 10 days ago by wkich .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install creevey 
SYNC missed versions from official npm registry.

creevey

Pretty easy visual testing with magic

Commitizen friendly

How to use

  • npm install -D creevey
  • Add withCreevey as top-level storybook decorator
  • Run tests yarn creevey --gridUrl "<gridUrl>/wd/hub"

What's storybook decorator?

Using Decorators

// .storybook/preview.js or .storybook/config.js
import { addDecorator, addParameters } from '@storybook/react';
import { withCreevey } from 'creevey';

addParameters({ creevey: { captureElement: '#root' } });
addDecorator(withCreevey());

/* ... */

Also you can define creevey.config.ts

import path from 'path';
import { CreeveyConfig } from 'creevey';

const config: CreeveyConfig = {
  gridUrl: '<gridUrl>/wd/hub',
  storybookUrl: 'http://localhost:6006',
  storybookDir: path.join(__dirname, '.storybook'),
  enableFastStoriesLoading: false, // See notes below
  screenDir: path.join(__dirname, 'images'),
  reportDir: path.join(__dirname, 'report'),
  diffOptions: { threshold: 0.1 },
  maxRetries: 2,
  browsers: {
    chrome: true,
    ff: 'firefox',
    ie11: {
      browserName: 'internet explorer',
      gridUrl: '<anotherGridUrl>/wd/hub',
      limit: 2,
      /* capabilities */
    },
    otherChrome: {
      browserName: 'chrome',
      storybookUrl: 'http://mystoryhost:6007',
      viewport: { width: 1024, height: 720 },
    },
  },
};

export default config;

NOTE: By default Creevey load stories with all dependency modules recursively. But for running tests mostly of them is not needed, Creevey uses only stories meta data, like story name/kind and parameters. Load all modules may significantly increase initialization time, so you can speed it up by using enableFastStoriesLoading flag. But bear in mind, your stories should have no side-effects. This flag skip to load all modules except stories/config and some modules from node_modules.

Creevey CLI options

  • --config — Specify path to config file. Default ./creevey.config
  • --reporter — Use another reporter for mocha instead of default spec
  • --gridUrl — Specify selenium grid url, work only in zero-config
  • --ui — Start web server
  • --update — Approve all images from report directory
  • --port — Specify port for web server. Default 3000
  • --reportDir — Path where reports will be stored
  • --screenDir — Path where reference images are located

Creevey storybook parameters

You can specify storybook parameters on various levels of stories:

// Global parameters can be defined in storybook config
addParameters({
  creevey: {
    captureElement: '#root',
    tests: {
      /* see examples below */
    },
    skip: {
      /* see examples below */
    },
  },
});
// For new `Component Story Format` (CSF) https://storybook.js.org/docs/formats/component-story-format/
// Kind-level parameters work for all stories inside
export default {
  title: 'Views',
  parameters: {
    creevey: {
      /* ... */
    },
  },
};

// Story-level parameters work only for that story
export const simple = () => <MyComponent />;
simple.story = {
  parameters: {
    creevey: {
      /* ... */
    },
  },
};
// For Old `StoriesOf` API (Storybook version < 5.2)
storiesOf('Views', module)
  .addParameters({
    creevey: {
      /* ... */
    },
  }) // Kind-level
  .add('simple', () => <MyComponent />, {
    creevey: {
      /* ... */
    },
  }); // Story-level

NOTE: Parameters for story will be deep-merged with parameters from higher levels.

tests option examples:

tests option is a plain object where key used as test name and value is a test function. Under the hood of creevey is used mocha+chai and for chai additionally defined matchImage assertion.

import React from 'react';
import { CSFStory } from 'creevey';

export default { title: 'MyComponent' };

export const Simple: CSFStory<JSX.Element> = () => <MyComponent />;
Simple.story = {
  parameters: {
    creevey: {
      captureElement: '#root',
      tests: {
        async click() {
          await this.browser.actions({ bridge: true }).click(this.captureElement).perform();

          await this.expect(await this.takeScreenshot()).to.matchImage('clicked component');
        },
      },
    },
  },
};

skip option examples:

  • Skip all stories for all browsers:
    • skip: 'Skip reason message'
    • skip: { reason: 'Skip reason message' }
  • Skip all stories for specific browsers:
    • skip: { in: 'ie11' }
    • skip: { in: ['ie11', 'chrome'] }
    • skip: { in: /^fire.*/ }
  • Skip all stories in specific kinds:
    • skip: { kinds: 'Button' }
    • skip: { kinds: ['Button', 'Input'] }
    • skip: { kinds: /.*Modal$/ }
  • Skip all tests in specific stories:
    • skip: { stories: 'simple' }
    • skip: { stories: ['simple', 'special'] }
    • skip: { stories: /.*large$/ }
  • Skip specific tests:
    • skip: { tests: 'click' }
    • skip: { tests: ['hover', 'click'] }
    • skip: { tests: /^press.*$/ }
  • Multiple skip options: skip: [{ /* ... */ }]

NOTE: If you try to skip stories by story name, the storybook name format will be used (For more info see storybook-export-vs-name-handling)

FAQ

Get error Cannot find module '/path/to/project/creevey.config' with CRA

CRA don't have @babel/register nor ts-node in deps, that used to load TypeScript modules in runtime. So you need to install one of those packages explicitly

Get SyntaxError: ... while loading storybook config

I try to figure out what transpiler I should register to load storybook config and stories in your project, but I can't cover all cases. So, if you stuck with this issue, please specify correct require hooks and options on top of creevey config.

How to use Creevey with other framework (WIP, this maybe change in future)

Angular

Please see this guide

Current Tags

  • 0.5.7                                ...           latest (10 days ago)
  • 0.6.0-beta.8                                ...           next (2 days ago)
  • 0.2.4-1                                ...           old-version (4 months ago)

86 Versions

  • 0.6.0-beta.8                                ...           2 days ago
  • 0.6.0-beta.7                                ...           4 days ago
  • 0.6.0-beta.6                                ...           4 days ago
  • 0.6.0-beta.5                                ...           4 days ago
  • 0.6.0-beta.4                                ...           4 days ago
  • 0.5.7                                ...           10 days ago
  • 0.6.0-beta.3                                ...           10 days ago
  • 0.6.0-beta.2                                ...           19 days ago
  • 0.6.0-beta.1                                ...           22 days ago
  • 0.6.0-beta.0                                ...           22 days ago
  • 0.5.6                                ...           a month ago
  • 0.5.5                                ...           2 months ago
  • 0.5.4                                ...           2 months ago
  • 0.5.2                                ...           2 months ago
  • 0.5.1                                ...           2 months ago
  • 0.5.0                                ...           2 months ago
  • 0.4.11                                ...           3 months ago
  • 0.4.10                                ...           3 months ago
  • 0.4.9                                ...           3 months ago
  • 0.4.8                                ...           3 months ago
  • 0.4.7                                ...           3 months ago
  • 0.4.6                                ...           3 months ago
  • 0.4.5                                ...           3 months ago
  • 0.4.4                                ...           3 months ago
  • 0.4.3                                ...           3 months ago
  • 0.4.2                                ...           3 months ago
  • 0.4.1                                ...           3 months ago
  • 0.4.0                                ...           3 months ago
  • 0.3.8                                ...           3 months ago
  • 0.3.7                                ...           4 months ago
  • 0.3.6                                ...           4 months ago
  • 0.3.5                                ...           4 months ago
  • 0.2.4-2                                ...           4 months ago
  • 0.2.4-1                                ...           4 months ago
  • 0.2.7                                ...           4 months ago
  • 0.3.4                                ...           5 months ago
  • 0.3.3                                ...           5 months ago
  • 0.3.2                                ...           5 months ago
  • 0.3.1                                ...           5 months ago
  • 0.3.0                                ...           5 months ago
  • 0.2.6                                ...           5 months ago
  • 0.2.5                                ...           5 months ago
  • 0.2.4                                ...           5 months ago
  • 0.2.3                                ...           6 months ago
  • 0.2.2                                ...           6 months ago
  • 0.2.1                                ...           6 months ago
  • 0.2.0                                ...           6 months ago
  • 0.1.7                                ...           6 months ago
  • 0.1.6                                ...           6 months ago
  • 0.1.5                                ...           7 months ago
  • 0.1.4                                ...           7 months ago
  • 0.1.3                                ...           7 months ago
  • 0.1.2                                ...           7 months ago
  • 0.1.1                                ...           7 months ago
  • 0.1.0                                ...           7 months ago
  • 0.0.30                                ...           7 months ago
  • 0.0.29                                ...           8 months ago
  • 0.0.28                                ...           8 months ago
  • 0.0.27                                ...           8 months ago
  • 0.0.26                                ...           8 months ago
  • 0.0.25                                ...           8 months ago
  • 0.0.24                                ...           9 months ago
  • 0.0.23                                ...           9 months ago
  • 0.0.22                                ...           9 months ago
  • 0.0.21                                ...           9 months ago
  • 0.0.20                                ...           9 months ago
  • 0.0.19                                ...           10 months ago
  • 0.0.18                                ...           10 months ago
  • 0.0.17                                ...           10 months ago
  • 0.0.16                                ...           10 months ago
  • 0.0.15                                ...           10 months ago
  • 0.0.14                                ...           10 months ago
  • 0.0.13                                ...           a year ago
  • 0.0.12                                ...           a year ago
  • 0.0.11                                ...           a year ago
  • 0.0.10                                ...           a year ago
  • 0.0.9                                ...           a year ago
  • 0.0.8                                ...           a year ago
  • 0.0.7                                ...           a year ago
  • 0.0.6                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago
  • 0.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 63
This Month 63
Last Day 2
Last Week 29
Last Month 96
Dependencies (22)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |