creevey 0.9.0-non-webpack.2 → 0.9.0

package/dist/types.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noop = noop;
+exports.isDefined = isDefined;
+exports.isTest = isTest;
+exports.isObject = isObject;
+exports.isString = isString;
+exports.isFunction = isFunction;
+exports.isImageError = isImageError;
+exports.isProcessMessage = isProcessMessage;
+exports.isWorkerMessage = isWorkerMessage;
+exports.isStoriesMessage = isStoriesMessage;
+exports.isTestMessage = isTestMessage;
+exports.isWebpackMessage = isWebpackMessage;
+exports.isDockerMessage = isDockerMessage;
+function noop() {
+    /* noop */
+}
+function isDefined(value) {
+    return value !== null && value !== undefined;
+}
+function isTest(x) {
+    return (isDefined(x) &&
+        isObject(x) &&
+        'id' in x &&
+        'storyId' in x &&
+        typeof x.id == 'string' &&
+        typeof x.storyId == 'string');
+}
+function isObject(x) {
+    return typeof x == 'object' && x != null;
+}
+function isString(x) {
+    return typeof x == 'string';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isFunction(x) {
+    return typeof x == 'function';
+}
+function isImageError(error) {
+    return error instanceof Error && 'images' in error;
+}
+function isProcessMessage(message) {
+    return isObject(message) && 'scope' in message;
+}
+function isWorkerMessage(message) {
+    return isProcessMessage(message) && message.scope == 'worker';
+}
+function isStoriesMessage(message) {
+    return isProcessMessage(message) && message.scope == 'stories';
+}
+function isTestMessage(message) {
+    return isProcessMessage(message) && message.scope == 'test';
+}
+function isWebpackMessage(message) {
+    return isProcessMessage(message) && message.scope == 'webpack';
+}
+function isDockerMessage(message) {
+    return isProcessMessage(message) && message.scope == 'docker';
+}
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";;AAybA,oBAEC;AAED,8BAEC;AAED,wBASC;AAED,4BAEC;AAED,4BAEC;AAGD,gCAEC;AAED,oCAEC;AAED,4CAEC;AAED,0CAEC;AAED,4CAEC;AAED,sCAEC;AAED,4CAEC;AAED,0CAEC;AA1DD,SAAgB,IAAI;IAClB,UAAU;AACZ,CAAC;AAED,SAAgB,SAAS,CAAI,KAA2B;IACtD,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC;AAC/C,CAAC;AAED,SAAgB,MAAM,CAAC,CAA8B;IACnD,OAAO,CACL,SAAS,CAAC,CAAC,CAAC;QACZ,QAAQ,CAAC,CAAC,CAAC;QACX,IAAI,IAAI,CAAC;QACT,SAAS,IAAI,CAAC;QACd,OAAO,CAAC,CAAC,EAAE,IAAI,QAAQ;QACvB,OAAO,CAAC,CAAC,OAAO,IAAI,QAAQ,CAC7B,CAAC;AACJ,CAAC;AAED,SAAgB,QAAQ,CAAC,CAAU;IACjC,OAAO,OAAO,CAAC,IAAI,QAAQ,IAAI,CAAC,IAAI,IAAI,CAAC;AAC3C,CAAC;AAED,SAAgB,QAAQ,CAAC,CAAU;IACjC,OAAO,OAAO,CAAC,IAAI,QAAQ,CAAC;AAC9B,CAAC;AAED,8DAA8D;AAC9D,SAAgB,UAAU,CAAC,CAAU;IACnC,OAAO,OAAO,CAAC,IAAI,UAAU,CAAC;AAChC,CAAC;AAED,SAAgB,YAAY,CAAC,KAAc;IACzC,OAAO,KAAK,YAAY,KAAK,IAAI,QAAQ,IAAI,KAAK,CAAC;AACrD,CAAC;AAED,SAAgB,gBAAgB,CAAC,OAAgB;IAC/C,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,OAAO,CAAC;AACjD,CAAC;AAED,SAAgB,eAAe,CAAC,OAAgB;IAC9C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAChE,CAAC;AAED,SAAgB,gBAAgB,CAAC,OAAgB;IAC/C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC;AACjE,CAAC;AAED,SAAgB,aAAa,CAAC,OAAgB;IAC5C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC;AAC9D,CAAC;AAED,SAAgB,gBAAgB,CAAC,OAAgB;IAC/C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC;AACjE,CAAC;AAED,SAAgB,eAAe,CAAC,OAAgB;IAC9C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAChE,CAAC"}

package/docs/config.md

@@ -1,212 +1,212 @@
-## Config/Options
-
-### CLI Options
-
-- `--config` — Specify path to config file. Default `.creevey/config.js` or `creevey.config.js`
-- `--ui` — Start runner 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
-- `--debug` — Enable debug output
-
-### Creevey config
-
-In default configuration Creevey take screenshots of `#root` element only for chrome browser in one concurrent instance, to run tests in different browsers or speedup tests and run in parallel, you need to define config file `.creevey/config.js`
-
-```ts
-module.exports = {
-  browsers: {
-    chrome: {
-      browserName: 'chrome',
-      // Define initial viewport size
-      viewport: { width: 1024, height: 720 },
-      // Increase parallel sessions
-      limit: 2,
-    },
-    firefox: {
-      browserName: 'firefox',
-      viewport: { width: 1024, height: 720 },
-    },
-  },
-};
-```
-
-### All possible config options
-
-:warning: **WARN** :warning: This config is just an example with all possible options. :warning: **WARN** :warning:
-
-```ts
-const path = require('path');
-
-module.exports = {
-  // Specify custom Selenium Grid url (see usage below)
-  // In most cases you don't need this option
-  gridUrl: '<gridUrl>/wd/hub',
-
-  // Default Storybook url
-  storybookUrl: 'http://localhost:6006',
-
-  // Storybook config directory
-  storybookDir: path.join(__dirname, '.storybook'),
-
-  // Where original images are stored
-  screenDir: path.join(__dirname, '../images'),
-
-  // Report directory that contains data from previous runs
-  reportDir: path.join(__dirname, '../report'),
-
-  // Pixelmatch options
-  diffOptions: { threshold: 0.1 },
-
-  // How many times test should be retried before to consider it as failed
-  maxRetries: 2,
-
-  // Describe browsers and their options
-  browsers: {
-    // Shorthand declarations of browsers
-    chrome: true,
-    ff: 'firefox',
-
-    otherChrome: {
-      browserName: 'chrome',
-      // Define initial viewport size
-      viewport: { width: 1024, height: 720 },
-      // Increase parallel sessions
-      limit: 2,
-      /* Also you can define any browser capabilities here */
-      version: '86.0',
-      // It's possible to set Storybook's globals
-      // https://github.com/storybookjs/storybook/blob/v6.0.0/docs/essentials/toolbars-and-globals.md
-      // NOTE: This is an experimental feature and will be replaced in future
-      _storybookGlobals: {
-        myTheme: 'dark',
-      },
-    },
-
-    // You can override some global options for specific browser
-    ie11: {
-      browserName: 'internet explorer',
-      // Like user another Selenium Grid url
-      gridUrl: '<anotherGridUrl>/wd/hub',
-      // Or use different storybook instance
-      storybookUrl: 'http://mystoryhost:6007',
-      // And use you own docker image
-      // By default Creevey will use selenoid image according browser name and version:
-      // `selenoid/${browserName}:${version ?? 'latest'}` image
-      dockerImage: 'microsoft/ie:11.0',
-    },
-  },
-
-  // You may want to do something before tests started (for example start browserstack-local)
-  hooks: {
-    async before() {
-      /* ... */
-    },
-    async after() {
-      /* ... */
-    },
-  },
-};
-```
-
-### Storybook parameters
-
-Also you could define parameters on `global`, `kind` or `story` levels. All these parameters are deeply merged by Storybook for each story. But bear in mind when you define skip option as an array Storybook treats it as primitive value and doesn't merge with other skip options.
-
-```tsx
-// .storybook/preview.tsx
-export const parameters = {
-  creevey: {
-    // Skip all *hover tests in IE11 on the global level
-    skip: {
-      ie11: { in: 'ie11', tests: /.*hover$/ },
-    },
-  },
-};
-```
-
-```tsx
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { CreeveyMeta, CreeveyStory } from 'creevey';
-import MyComponent from './src/components/MyComponent';
-
-export default {
-  title: 'MyComponent'
-  parameters: {
-    creevey: {
-      // You could skip some browsers/stories or even specific tests
-      skip: [
-        { in: 'ie11', reason: "`MyComponent` doesn't support ie11" },
-        { in: 'firefox', stories: 'Loading', reason: "Loading stories are flaky in firefox" },
-        {
-          in: ['firefox', 'chrome'],
-          tests: /.*hover$/,
-          reason: "For some reason `MyComponent` hovering doesn't work correctly",
-        },
-      ],
-    },
-  },
-} as Meta & CreeveyMeta;
-
-export const Basic: Story & CreeveyStory = () => <MyComponent />;
-Basic.parameters = {
-  creevey: {
-    captureElement: '.container',
-    // elements to ignore in capturing screenshot
-    ignoreElements: ['button', '.local-time'],
-    // Delay before test starts in ms
-    delay: 1000,
-    tests: {
-      /* ... */
-    },
-  },
-};
-```
-
-### `skip` option examples:
-
-```ts
-interface SkipOption {
-  reason?: string;
-  in?: string | string[] | RegExp;
-  kinds?: string | string[] | RegExp;
-  stories?: string | string[] | RegExp;
-  tests?: string | string[] | RegExp;
-}
-
-type SkipOptions = SkipOption | SkipOption[] | Record<string, SkipOption | SkipOption[]>;
-```
-
-- Skip all stories for all browsers:
-  - `skip: true`
-  - `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:
-  - as an array `skip: [{ /* ... */ }]`
-  - as an object
-    ```
-    skip: {
-      foo: { /* ... */ },
-      bar: { /* ... */ },
-    }
-    ```
-
-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](https://storybook.js.org/docs/formats/component-story-format/#storybook-export-vs-name-handling))
+## Config/Options
+
+### CLI Options
+
+- `--config` — Specify path to config file. Default `.creevey/config.js` or `creevey.config.js`
+- `--ui` — Start runner 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
+- `--debug` — Enable debug output
+
+### Creevey config
+
+In default configuration Creevey take screenshots of `#storybook-root` element only for chrome browser in one concurrent instance, to run tests in different browsers or speedup tests and run in parallel, you need to define config file `.creevey/config.js`
+
+```ts
+module.exports = {
+  browsers: {
+    chrome: {
+      browserName: 'chrome',
+      // Define initial viewport size
+      viewport: { width: 1024, height: 720 },
+      // Increase parallel sessions
+      limit: 2,
+    },
+    firefox: {
+      browserName: 'firefox',
+      viewport: { width: 1024, height: 720 },
+    },
+  },
+};
+```
+
+### All possible config options
+
+:warning: **WARN** :warning: This config is just an example with all possible options. :warning: **WARN** :warning:
+
+```ts
+const path = require('path');
+
+module.exports = {
+  // Specify custom Selenium Grid url (see usage below)
+  // In most cases you don't need this option
+  gridUrl: '<gridUrl>/wd/hub',
+
+  // Default Storybook url
+  storybookUrl: 'http://localhost:6006',
+
+  // Where original images are stored
+  screenDir: path.join(__dirname, '../images'),
+
+  // Report directory that contains data from previous runs
+  reportDir: path.join(__dirname, '../report'),
+
+  // Pixelmatch options
+  diffOptions: { threshold: 0.1 },
+
+  // How many times test should be retried before to consider it as failed
+  maxRetries: 2,
+
+  // Describe browsers and their options
+  browsers: {
+    // Shorthand declarations of browsers
+    chrome: true,
+    ff: 'firefox',
+
+    otherChrome: {
+      browserName: 'chrome',
+      // Define initial viewport size
+      viewport: { width: 1024, height: 720 },
+      // Increase parallel sessions
+      limit: 2,
+      /* Also you can define any browser capabilities here */
+      version: '86.0',
+      // It's possible to set Storybook's globals
+      // https://github.com/storybookjs/storybook/blob/v6.0.0/docs/essentials/toolbars-and-globals.md
+      // NOTE: This is an experimental feature and will be replaced in future
+      _storybookGlobals: {
+        myTheme: 'dark',
+      },
+    },
+
+    // You can override some global options for specific browser
+    ie11: {
+      browserName: 'internet explorer',
+      // Like user another Selenium Grid url
+      gridUrl: '<anotherGridUrl>/wd/hub',
+      // Or use different storybook instance
+      storybookUrl: 'http://mystoryhost:6007',
+      // And use you own docker image
+      // By default Creevey will use selenoid image according browser name and version:
+      // `selenoid/${browserName}:${version ?? 'latest'}` image
+      dockerImage: 'microsoft/ie:11.0',
+    },
+  },
+
+  // You may want to do something before tests started (for example start browserstack-local)
+  hooks: {
+    async before() {
+      /* ... */
+    },
+    async after() {
+      /* ... */
+    },
+  },
+};
+```
+
+### Storybook parameters
+
+Also you could define parameters on `global`, `kind` or `story` levels. All these parameters are deeply merged by Storybook for each story. But bear in mind when you define skip option as an array Storybook treats it as primitive value and doesn't merge with other skip options.
+
+```tsx
+// .storybook/preview.tsx
+export const parameters = {
+  creevey: {
+    // Skip all *hover tests in IE11 on the global level
+    skip: {
+      "hovers don't work in ie11": { in: 'ie11', tests: /.*hover$/ },
+    },
+  },
+};
+```
+
+```tsx
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { CreeveyMeta, CreeveyStory } from 'creevey';
+import MyComponent from './src/components/MyComponent';
+
+export default {
+  title: 'MyComponent'
+  parameters: {
+    creevey: {
+      // You could skip some browsers/stories or even specific tests
+      skip: {
+        "`MyComponent` doesn't support ie11": { in: 'ie11' },
+        "Loading stories are flaky in firefox": { in: 'firefox', stories: 'Loading' },
+        "`MyComponent` hovering doesn't work correctly": {
+          in: ['firefox', 'chrome'],
+          tests: /.*hover$/,
+        },
+      },
+    },
+  },
+} as Meta & CreeveyMeta;
+
+export const Basic: Story & CreeveyStory = () => <MyComponent />;
+Basic.parameters = {
+  creevey: {
+    captureElement: '.container',
+    // elements to ignore in capturing screenshot
+    ignoreElements: ['button', '.local-time'],
+    // Delay before test starts in ms
+    delay: 1000,
+    tests: {
+      /* ... */
+    },
+  },
+};
+```
+
+### `skip` option examples:
+
+```ts
+interface SkipOption {
+  in?: string | string[] | RegExp;
+  kinds?: string | string[] | RegExp;
+  stories?: string | string[] | RegExp;
+  tests?: string | string[] | RegExp;
+}
+
+type SkipOptions = boolean | string | Record<string, SkipOption | SkipOption[]>;
+```
+
+- Skip all stories for all browsers:
+  - `skip: true`
+  - `skip: 'Skip reason message'`
+  - `skip: { 'Skip reason message': true }`
+- Skip all stories for specific browsers:
+  - `skip: { 'Skip reason message': { in: 'ie11' } }`
+  - `skip: { 'Skip reason message': { in: ['ie11', 'chrome'] } }`
+  - `skip: { 'Skip reason message': { in: /^fire.*/ } }`
+- Skip all stories in specific kinds:
+  - `skip: { 'Skip reason message': { kinds: 'Button' } }`
+  - `skip: { 'Skip reason message': { kinds: ['Button', 'Input'] } }`
+  - `skip: { 'Skip reason message': { kinds: /.*Modal$/ } }`
+- Skip all tests in specific stories:
+  - `skip: { 'Skip reason message': { stories: 'simple' } }`
+  - `skip: { 'Skip reason message': { stories: ['simple', 'special'] } }`
+  - `skip: { 'Skip reason message': { stories: /.*large$/ } }`
+- Skip specific tests:
+  - `skip: { 'Skip reason message': { tests: 'click' } }`
+  - `skip: { 'Skip reason message': { tests: ['hover', 'click'] } }`
+  - `skip: { 'Skip reason message': { tests: /^press.*$/ } }`
+- Multiple skip options:
+  - for one reason
+    ```
+    skip: {
+      "reason": [{ /* ... */ }, { /* ... */ }],
+    }
+    ```
+  - for several reasons
+    ```
+    skip: {
+      "reason 1": { /* ... */ },
+      "reason 2": { /* ... */ },
+    }
+    ```
+
+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](https://storybook.js.org/docs/formats/component-story-format/#storybook-export-vs-name-handling))

package/docs/grid.md

@@ -1,10 +1,10 @@
-## Use your Selenium Grid (BrowserStack/SauceLabs/etc)
-
-Sometimes you already have Selenium Grid on one of many different e2e testing services, like LambdaTest, BrowserStack, or SauceLabs , or use a self-hosted one. You could use these services. If your Selenium Grid is located in the same network where you going to start Creevey, you will need to define `gridUrl` parameter in Creevey config. Overwise you need to start tunneling tool depending on what Grid you use:
-
-- [LambdaTest] (https://www.npmjs.com/package/@lambdatest/node-tunnel)
-- [browserstack-local](https://www.npmjs.com/package/browserstack-local)
-- [sauce-connect-launcher](https://www.npmjs.com/package/sauce-connect-launcher)
-- [open-ssh-tunnel](https://www.npmjs.com/package/open-ssh-tunnel)
-
-To start one of these tool use `before/after` hook parameters in Creevey config.
+## Use your Selenium Grid (BrowserStack/SauceLabs/etc)
+
+Sometimes you already have Selenium Grid on one of many different e2e testing services, like LambdaTest, BrowserStack, or SauceLabs , or use a self-hosted one. You could use these services. If your Selenium Grid is located in the same network where you going to start Creevey, you will need to define `gridUrl` parameter in Creevey config. Overwise you need to start tunneling tool depending on what Grid you use:
+
+- [LambdaTest] (https://www.npmjs.com/package/@lambdatest/node-tunnel)
+- [browserstack-local](https://www.npmjs.com/package/browserstack-local)
+- [sauce-connect-launcher](https://www.npmjs.com/package/sauce-connect-launcher)
+- [open-ssh-tunnel](https://www.npmjs.com/package/open-ssh-tunnel)
+
+To start one of these tool use `before/after` hook parameters in Creevey config.

package/docs/tests.md

@@ -1,63 +1,63 @@
-## Write tests
-
-By default Creevey generate for each story very simple screenshot test. In most cases it would be enough to test your UI. But you may want to do some interactions and capture one or multiple screenshots with different states of your story. For this case you could write custom tests, like this
-
-```tsx
-import React from 'react';
-import { Story } from '@storybook/react';
-import { CreeveyStory } from 'creevey';
-import MyComponent from './src/components/MyComponent';
-
-export default { title: 'MyComponent' };
-
-export const Basic: Story & CreeveyStory = () => <MyComponent />;
-Basic.parameters = {
-  creevey: {
-    captureElement: '#root',
-    tests: {
-      async click() {
-        await this.browser.actions().click(this.captureElement).perform();
-
-        await this.expect(await this.takeScreenshot()).to.matchImage('clicked component');
-      },
-    },
-  },
-};
-```
-
-NOTE: Here you define story parameters with simple test `click`. Where you setup capturing element `#root` then click on that element and taking screenshot to assert it. `this.browser` allow you to access to native selenium webdriver instance you could check [API here](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html).
-
-You also could write more powerful tests with asserting multiple screenshots
-
-```tsx
-import React from 'react';
-import { CSFStory } from 'creevey';
-import MyForm from './src/components/MyForm';
-
-export default { title: 'MyForm' };
-
-export const Basic: CSFStory<JSX.Element> = () => <MyForm />;
-Basic.story = {
-  parameters: {
-    creevey: {
-      captureElement: '#root',
-      delay: 1000,
-      tests: {
-        async submit() {
-          const input = await this.browser.findElement({ css: '.my-input' });
-
-          const empty = await this.takeScreenshot();
-
-          await this.browser.actions().click(input).sendKeys('Hello Creevey').sendKeys(this.keys.ENTER).perform();
-
-          const submitted = await this.takeScreenshot();
-
-          await this.expect({ empty, submitted }).to.matchImages();
-        },
-      },
-    },
-  },
-};
-```
-
-NOTE: In this example I fill some simple form and submit it. Also as you could see, I taking two different screenshots `empty` and `submitted` and assert these in the end.
+## Write tests
+
+By default Creevey generate for each story very simple screenshot test. In most cases it would be enough to test your UI. But you may want to do some interactions and capture one or multiple screenshots with different states of your story. For this case you could write custom tests, like this
+
+```tsx
+import React from 'react';
+import { Story } from '@storybook/react';
+import { CreeveyStory } from 'creevey';
+import MyComponent from './src/components/MyComponent';
+
+export default { title: 'MyComponent' };
+
+export const Basic: Story & CreeveyStory = () => <MyComponent />;
+Basic.parameters = {
+  creevey: {
+    captureElement: '#storybook-root',
+    tests: {
+      async click() {
+        await this.browser.actions().click(this.captureElement).perform();
+
+        await this.expect(await this.takeScreenshot()).to.matchImage('clicked component');
+      },
+    },
+  },
+};
+```
+
+NOTE: Here you define story parameters with simple test `click`. Where you setup capturing element `#storybook-root` then click on that element and taking screenshot to assert it. `this.browser` allow you to access to native selenium webdriver instance you could check [API here](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html).
+
+You also could write more powerful tests with asserting multiple screenshots
+
+```tsx
+import React from 'react';
+import { CSFStory } from 'creevey';
+import MyForm from './src/components/MyForm';
+
+export default { title: 'MyForm' };
+
+export const Basic: CSFStory<JSX.Element> = () => <MyForm />;
+Basic.story = {
+  parameters: {
+    creevey: {
+      captureElement: '#storybook-root',
+      delay: 1000,
+      tests: {
+        async submit() {
+          const input = await this.browser.findElement({ css: '.my-input' });
+
+          const empty = await this.takeScreenshot();
+
+          await this.browser.actions().click(input).sendKeys('Hello Creevey').sendKeys(this.keys.ENTER).perform();
+
+          const submitted = await this.takeScreenshot();
+
+          await this.expect({ empty, submitted }).to.matchImages();
+        },
+      },
+    },
+  },
+};
+```
+
+NOTE: In this example I fill some simple form and submit it. Also as you could see, I taking two different screenshots `empty` and `submitted` and assert these in the end.

package/manager/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "../dist/client/addon/manager.js"
+}