creevey 0.10.0-beta.4 → 0.10.0-beta.40

package/dist/types.d.ts

@@ -1,11 +1,10 @@
-import type { StoryContextForEnhancers, DecoratorFunction } from '@storybook/csf';
+import type { StoryContextForEnhancers, DecoratorFunction } from '@storybook/types';
 import type { Worker as ClusterWorker } from 'cluster';
 import type Pixelmatch from 'pixelmatch';
 import type { ODiffOptions } from 'odiff-bin';
 import type { expect } from 'chai';
 import type EventEmitter from 'events';
-import type Logger from 'loglevel';
-import { LaunchOptions } from 'playwright-core';
+import type { LaunchOptions } from 'playwright-core';
 export type DiffOptions = typeof Pixelmatch extends (x1: any, x2: any, x3: any, x4: any, x5: any, options?: infer T) => void ? T : never;
 export interface SetStoriesData {
     v?: number;
@@ -115,7 +114,13 @@ export interface BrowserConfigObject {
         platformName?: string;
         [name: string]: unknown;
     };
-    playwrightOptions?: Omit<LaunchOptions, 'logger'>;
+    playwrightOptions?: Omit<LaunchOptions, 'logger'> & {
+        trace?: {
+            screenshots?: boolean;
+            snapshots?: boolean;
+            sources?: boolean;
+        };
+    };
 }
 export type StorybookGlobals = Record<string, unknown>;
 export type BrowserConfig = boolean | string | BrowserConfigObject;
@@ -125,7 +130,7 @@ export interface CreeveyWebdriver {
     openBrowser(fresh?: boolean): Promise<CreeveyWebdriver | null>;
     closeBrowser(): Promise<void>;
     loadStoriesFromBrowser(): Promise<StoriesRaw>;
-    switchStory(story: StoryInput, context: BaseCreeveyTestContext, logger: Logger.Logger): Promise<CreeveyTestContext>;
+    switchStory(story: StoryInput, context: BaseCreeveyTestContext): Promise<CreeveyTestContext>;
     afterTest(test: ServerTest): Promise<void>;
 }
 export interface HookConfig {
@@ -158,6 +163,11 @@ export interface Config {
      * Url where storybook hosted on
      */
     resolveStorybookUrl?: () => Promise<string>;
+    /**
+     * Command to automatically start Storybook if it is not running.
+     * For example, `npm run storybook`, `yarn run storybook` etc.
+     */
+    storybookAutorunCmd?: string;
     /**
      * Absolute path to directory with reference images
      * @default path.join(process.cwd(), './images')
@@ -264,6 +274,11 @@ export interface Config {
      * The `--ui` CLI option ignores this option
      */
     failFast: boolean;
+    /**
+     * Start workers in sequential queue
+     * @default false
+     */
+    useWorkerQueue: boolean;
     /**
      * Specify platform for docker images
      */
@@ -298,9 +313,13 @@ export interface Options {
     screenDir?: string;
     reportDir?: string;
     gridUrl?: string;
+    storybookStart?: boolean | string;
     storybookUrl?: string;
+    storybookPort?: string;
+    storybookAutorunCmd?: string;
     failFast?: boolean;
     odiff?: boolean;
+    noDocker?: boolean;
 }
 export type WorkerError = 'browser' | 'test' | 'unknown';
 export type WorkerMessage = {
@@ -372,8 +391,12 @@ export interface Images {
 export type TestStatus = 'unknown' | 'pending' | 'running' | 'failed' | 'approved' | 'success' | 'retrying';
 export interface TestResult {
     status: 'failed' | 'success';
+    retries: number;
     images?: Partial<Record<string, Images>>;
     error?: string;
+    duration?: number;
+    attachments?: string[];
+    sessionId?: string;
 }
 export declare class ImagesError extends Error {
     images?: string | Partial<Record<string, string>>;
@@ -406,8 +429,8 @@ export interface BaseCreeveyTestContext {
         imageName?: string;
         screenshot: Buffer;
     }[];
-    matchImage: (image: Buffer, imageName?: string) => Promise<void>;
-    matchImages: (images: Record<string, Buffer>) => Promise<void>;
+    matchImage: (image: Buffer | string, imageName?: string) => Promise<void>;
+    matchImages: (images: Record<string, Buffer | string>) => Promise<void>;
 }
 export interface CreeveyTestContext extends BaseCreeveyTestContext {
     takeScreenshot: () => Promise<Buffer>;
@@ -417,6 +440,8 @@ export interface CreeveyTestContext extends BaseCreeveyTestContext {
 export declare enum TEST_EVENTS {
     RUN_BEGIN = "start",
     RUN_END = "end",
+    SUITE_BEGIN = "suite",
+    SUITE_END = "suite end",
     TEST_BEGIN = "test",
     TEST_END = "test end",
     TEST_FAIL = "fail",
@@ -437,7 +462,7 @@ export interface FakeTest {
     title: string;
     fullTitle: () => string;
     titlePath: () => string[];
-    currentRetry: () => number;
+    currentRetry: () => number | undefined;
     retires: () => number;
     slow: () => number;
     duration?: number;
@@ -445,6 +470,13 @@ export interface FakeTest {
     speed?: 'slow' | 'medium' | 'fast';
     err?: unknown;
     attachments?: string[];
+    creevey: {
+        reportDir: string;
+        sessionId: string;
+        browserName: string;
+        willRetry: boolean;
+        images: Partial<Record<string, Partial<Images>>>;
+    };
 }
 export interface CreeveyStatus {
     isRunning: boolean;

package/dist/types.js

@@ -32,6 +32,8 @@ var TEST_EVENTS;
 (function (TEST_EVENTS) {
     TEST_EVENTS["RUN_BEGIN"] = "start";
     TEST_EVENTS["RUN_END"] = "end";
+    TEST_EVENTS["SUITE_BEGIN"] = "suite";
+    TEST_EVENTS["SUITE_END"] = "suite end";
     TEST_EVENTS["TEST_BEGIN"] = "test";
     TEST_EVENTS["TEST_END"] = "test end";
     TEST_EVENTS["TEST_FAIL"] = "fail";

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";;;AAgjBA,oBAEC;AAED,8BAEC;AAED,wBASC;AAED,4BAEC;AAED,4BAEC;AAGD,gCAEC;AAED,oCAEC;AAED,4CAEC;AAED,0CAEC;AAED,4CAEC;AAED,sCAEC;AAtjBD,IAAY,eAUX;AAVD,WAAY,eAAe;IACzB,6CAA0B,CAAA;IAC1B,wDAAqC,CAAA;IACrC,iDAA8B,CAAA;IAC9B,mDAAgC,CAAA;IAChC,iDAA8B,CAAA;IAC9B,gEAA6C,CAAA;IAC7C,wDAAqC,CAAA;IACrC,6CAA0B,CAAA;IAC1B,mDAAgC,CAAA;AAClC,CAAC,EAVW,eAAe,+BAAf,eAAe,QAU1B;AAiWD,MAAa,WAAY,SAAQ,KAAK;IACpC,MAAM,CAA4C;CACnD;AAFD,kCAEC;AAwCD,IAAY,WAOX;AAPD,WAAY,WAAW;IACrB,kCAAmB,CAAA;IACnB,8BAAe,CAAA;IACf,kCAAmB,CAAA;IACnB,oCAAqB,CAAA;IACrB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EAPW,WAAW,2BAAX,WAAW,QAOtB;AAwGD,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,WAAW,IAAI,QAAQ,IAAI,KAAK,CAAC;AAC3D,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"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";;;AAolBA,oBAEC;AAED,8BAEC;AAED,wBASC;AAED,4BAEC;AAED,4BAEC;AAGD,gCAEC;AAED,oCAEC;AAED,4CAEC;AAED,0CAEC;AAED,4CAEC;AAED,sCAEC;AA3lBD,IAAY,eAUX;AAVD,WAAY,eAAe;IACzB,6CAA0B,CAAA;IAC1B,wDAAqC,CAAA;IACrC,iDAA8B,CAAA;IAC9B,mDAAgC,CAAA;IAChC,iDAA8B,CAAA;IAC9B,gEAA6C,CAAA;IAC7C,wDAAqC,CAAA;IACrC,6CAA0B,CAAA;IAC1B,mDAAgC,CAAA;AAClC,CAAC,EAVW,eAAe,+BAAf,eAAe,QAU1B;AA2XD,MAAa,WAAY,SAAQ,KAAK;IACpC,MAAM,CAA4C;CACnD;AAFD,kCAEC;AAwCD,IAAY,WASX;AATD,WAAY,WAAW;IACrB,kCAAmB,CAAA;IACnB,8BAAe,CAAA;IACf,oCAAqB,CAAA;IACrB,sCAAuB,CAAA;IACvB,kCAAmB,CAAA;IACnB,oCAAqB,CAAA;IACrB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EATW,WAAW,2BAAX,WAAW,QAStB;AAiHD,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,WAAW,IAAI,QAAQ,IAAI,KAAK,CAAC;AAC3D,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"}

package/docs/cli.md

@@ -0,0 +1,12 @@
+## Creevey CLI Options
+
+There are several options available for the Creevey CLI:
+
+- `--ui` — Starts Creevey UI Runner, which allows to run tests individually, compare screenshots and approve them without hesitation
+- `-s, --storybookStart` — Starts Storybook for you by using `storybook dev` command
+- `-c, --config` — Specify path to the config file. Default `.creevey/config.ts` or `creevey.config.ts`
+- `-p, --port` — Specify port in which UI Runner should be started. Default `3000`
+- `-d, --debug` — Enable debug output. It also enables recording video and traces if Playwright is used
+- `-u, --update` — Approve all images from `report` directory. But it's recommended to do it from the UI Runner
+- `--reportDir` — Path where reports will be stored
+- `--screenDir` — Path where reference images are located

package/docs/config.md

@@ -1,212 +1,226 @@
-## Config/Options
+# Creevey Configuration Examples
 
-### CLI Options
+Creevey is highly configurable and can be tailored to your specific needs. Here are some examples of how to configure Creevey for your Storybook.
 
-- `--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
+## Zero Configuration
 
-### Creevey config
+The simplest way to get started with Creevey, just run it without any configuration:
 
-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`
+```bash
+yarn creevey -s
+```
+
+This will start Creevey with default settings, using Chrome as the browser and also start Storybook hosted at `http://localhost:6006`. Adding `--ui` flag will start the web server for the UI Runner.
+
+**NOTE** By default, Creevey uses Selenium WebDriver, but it's done for backward compatibility and it's recommended to define webdriver explicitly in the configuration.
 
 ```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 },
-    },
-  },
+// creevey.config.ts
+import { SeleniumWebdriver } from 'creevey/selenium';
+
+const config = {
+  webdriver: SeleniumWebdriver,
+};
+
+// or use Playwright instead
+
+import { PlaywrightWebdriver } from 'creevey/playwright';
+
+const config = {
+  webdriver: PlaywrightWebdriver,
 };
 ```
 
-### All possible config options
+## Basic Configuration
 
-:warning: **WARN** :warning: This config is just an example with all possible options. :warning: **WARN** :warning:
+The minimal configuration to test your stories might be:
 
 ```ts
-const path = require('path');
+// creevey.config.ts
+import { CreeveyConfig } from 'creevey';
+import { PlaywrightWebdriver } from 'creevey/playwright';
+
+const config: CreeveyConfig = {
+  webdriver: PlaywrightWebdriver,
 
-module.exports = {
-  // Specify custom Selenium Grid url (see usage below)
-  // In most cases you don't need this option
-  gridUrl: '<gridUrl>/wd/hub',
+  // The URL where your Storybook is hosted
+  storybookUrl: 'http://localhost:9000',
+
+  // Define which browsers to use for testing
+  browsers: {
+    chromium: {
+      // The browser type name which will be used by Playwright
+      browserName: 'chromium',
+      // Default viewport dimensions
+      viewport: { width: 1024, height: 768 },
+      // Limit of retries for failed tests
+      maxRetries: 2,
+    },
+  },
+};
 
-  // Default Storybook url
-  storybookUrl: 'http://localhost:6006',
+export default config;
+```
 
-  // Where original images are stored
-  screenDir: path.join(__dirname, '../images'),
+## Multiple Browsers Configuration
 
-  // Report directory that contains data from previous runs
-  reportDir: path.join(__dirname, '../report'),
+It's possible to est your stories across different browsers:
 
-  // Pixelmatch options
-  diffOptions: { threshold: 0.1 },
+```ts
+// creevey.config.ts
+import { CreeveyConfig } from 'creevey';
+import { PlaywrightWebdriver } from 'creevey/playwright';
 
-  // How many times test should be retried before to consider it as failed
-  maxRetries: 2,
+const config: CreeveyConfig = {
+  webdriver: PlaywrightWebdriver,
 
-  // 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
+    chromium: {
+      browserName: 'chromium',
+      // Amount of parallel browser 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',
+    firefox: {
+      browserName: 'firefox',
+      limit: 2,
     },
   },
+};
+
+export default config;
+```
+
+## Test stories with different themes
+
+Test your components with different themes:
 
-  // You may want to do something before tests started (for example start browserstack-local)
-  hooks: {
-    async before() {
-      /* ... */
+```ts
+// creevey.config.ts
+import { CreeveyConfig } from 'creevey';
+import { PlaywrightWebdriver } from 'creevey/playwright';
+
+const config: CreeveyConfig = {
+  webdriver: PlaywrightWebdriver,
+  browsers: {
+    dark: {
+      browserName: 'chromium',
+      // Define a storybook globals which will be applied to the stories
+      _storybookGlobals: {
+        theme: 'dark',
+      },
     },
-    async after() {
-      /* ... */
+    light: {
+      browserName: 'chromium',
+      _storybookGlobals: {
+        theme: 'light',
+      },
     },
   },
 };
+
+export default config;
 ```
 
-### Storybook parameters
+## Using dedicated Selenium Grid server
 
-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.
+Use Selenium Grid for distributed testing:
 
-```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$/ },
+```ts
+// creevey.config.ts
+import { CreeveyConfig } from 'creevey';
+import { SeleniumWebdriver } from 'creevey/selenium';
+
+const config: CreeveyConfig = {
+  webdriver: SeleniumWebdriver,
+  // Selenium Grid connection settings
+  gridUrl: 'http://selenium-hub:4444/wd/hub',
+  browsers: {
+    chrome: {
+      browserName: 'chrome',
+      // You can define any additional selenium capabilities here
+      // https://w3c.github.io/webdriver/#capabilities
+      seleniumCapabilities: {
+        browserVersion: '128.0',
+        platformName: 'linux',
+      },
     },
   },
 };
+
+export default config;
 ```
 
-```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$/,
-        },
+## Playwright configuration options
+
+Leverage Playwright for testing:
+
+```ts
+// creevey.config.ts
+import { CreeveyConfig } from 'creevey';
+import { PlaywrightWebdriver } from 'creevey/playwright';
+
+const config: CreeveyConfig = {
+  webdriver: PlaywrightWebdriver,
+  browsers: {
+    chromium: {
+      browserName: 'chromium',
+      // Playwright-specific options
+      // https://playwright.dev/docs/api/class-browsertype#browser-type-launch-server
+      playwrightOptions: {
+        headless: false,
+        channel: 'chrome-canary',
+        slowMo: 50, // Slow down Playwright operations by 50ms
       },
     },
   },
-} 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: {
-      /* ... */
-    },
-  },
 };
+
+export default config;
 ```
 
-### `skip` option examples:
+## Advanced Configuration
+
+Comprehensive example combining multiple features and additional options:
 
 ```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[]>;
-```
+// creevey.config.ts
+import path from 'path';
+import MochaJUnitReporter from 'mocha-junit-reporter';
+import { CreeveyConfig } from 'creevey';
+import { PlaywrightWebdriver } from 'creevey/playwright';
+
+const config: CreeveyConfig = {
+  webdriver: PlaywrightWebdriver,
+
+  // It's possible to resolve Storybook URL at the runtime
+  resolveStorybookUrl: () =>
+    fetch('https://example.com/resolve-ip')
+      .then((res) => res.text())
+      .then((data) => `http://${data}:6006`),
+
+  // Define custom reference screenshots directory
+  screenDir: path.join(process.cwd(), 'screenshots'),
+
+  // Define custom report directory
+  reportDir: path.join(process.cwd(), 'reports'),
+
+  // Define path where Creevey tests are located
+  testDir: path.join(process.cwd(), 'tests'),
+
+  // You can use any Mocha-like reporter
+  reporter: MochaJUnitReporter,
 
-- 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))
+  // Pixelmatch options
+  diffOptions: { threshold: 0.1 },
+
+  // Regex pattern to match test files
+  testsRegex: /\.creevey\.ts$/,
+
+  // Disable using docker, to start browsers locally, it's useful for CI
+  useDocker: process.env.CI,
+
+  browsers: {
+    /* ... */
+  },
+};
+```

package/docs/storybook.md

@@ -0,0 +1,60 @@
+## Creevey Storybook Parameters
+
+Creevey allows you to customize how stories will be captured. You could define parameters on `global`, `kind` or `story` levels. All these parameters are deeply merged by Storybook for each story.
+
+```ts
+// .storybook/preview.tsx
+export const parameters = {
+  creevey: {
+    // Global parameters are applied to all stories
+    captureElement: '#storybook-root',
+  },
+};
+```
+
+```ts
+// stories/MyModal.stories.tsx
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { CreeveyMeta, CreeveyStory } from 'creevey';
+import MyModal from './src/components/MyModal';
+
+const Kind: Meta<typeof MyModal> = {
+  title: 'MyModal',
+  component: MyModal,
+  parameters: {
+    creevey: {
+      // It's possible to add additional delay before capturing screenshot
+      delay: 1000,
+
+      // For capturing the whole browser viewport, you can define `null` instead of css selector.
+      captureElement: null,
+
+      // You can skip some stories from capturing, by defining `skip` option:
+      // skip: { "The reason why story is skipped": { in: 'chrome', stories: 'Loading' } }
+      // - `in` - browser name, regex or array of browser names, which are defined in the Creevey config
+      // - `stories` - story name, regex or array of story names
+      // - `tests` - test name, regex or array of test names
+      // 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))
+      skip: {
+        "`MyModal` doesn't support ie11": { in: 'ie11' },
+        'Loading stories are flaky in firefox': { in: 'firefox', stories: 'Loading' },
+        "`MyModal` hovering doesn't work correctly": {
+          in: ['firefox', 'chrome'],
+          tests: /.*hover$/,
+        },
+      },
+    },
+  },
+};
+
+export default Kind;
+
+export const Basic: StoryObj<typeof MyModal> = {
+  creevey: {
+    // Lastly some elements can be ignored in capturing screenshot
+    ignoreElements: ['button', '.local-time'],
+  },
+};
+```