creevey 0.9.0-beta.2 → 0.9.0-beta.21

package/{lib/types → dist}/types.d.ts

@@ -1,35 +1,28 @@
-/// <reference types="node" />
-/// <reference types="chai" />
-import type { API as StorybookAPI } from '@storybook/api';
-import type { DecoratorFunction } from '@storybook/addons';
-import type { IKey } from 'selenium-webdriver/lib/input';
+import type { StoryContextForEnhancers, DecoratorFunction } from '@storybook/csf';
+import type { IKey } from 'selenium-webdriver/lib/input.js';
 import type { Worker as ClusterWorker } from 'cluster';
 import type { until, WebDriver, WebElementPromise } from 'selenium-webdriver';
 import type Pixelmatch from 'pixelmatch';
 import type { Context } from 'mocha';
-export declare type DiffOptions = typeof Pixelmatch extends (x1: any, x2: any, x3: any, x4: any, x5: any, options?: infer T) => void ? T : never;
-export declare type SetStoriesData = {
+import type { expect } from 'chai';
+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;
     globalParameters: {
         creevey?: CreeveyStoryParams;
     };
-    kindParameters: Partial<{
-        [kind: string]: {
-            fileName: string;
-            creevey?: CreeveyStoryParams;
-        };
-    }>;
+    kindParameters: Partial<Record<string, {
+        fileName: string;
+        creevey?: CreeveyStoryParams;
+    }>>;
     stories: StoriesRaw;
-};
-export declare type StoriesRaw = StorybookAPI extends {
-    setStories: (stories: infer SS) => void;
-} ? SS : never;
-export declare type StoryInput = StoriesRaw extends {
-    [id: string]: infer S;
-} ? S : never;
-export interface StoryMeta<StoryFnReturnType = unknown> {
+}
+export type StoriesRaw = Record<string, StoryContextForEnhancers>;
+export type StoryInput = StoriesRaw extends Record<string, infer S> ? S : never;
+export interface StoryMeta {
     title: string;
     component?: unknown;
-    decorators?: DecoratorFunction<StoryFnReturnType>[];
+    decorators?: DecoratorFunction[];
     parameters?: {
         creevey?: CreeveyStoryParams;
         [name: string]: unknown;
@@ -52,14 +45,14 @@ export interface CSFStory<StoryFnReturnType = unknown> {
      */
     story?: {
         name?: string;
-        decorators?: DecoratorFunction<StoryFnReturnType>[];
+        decorators?: DecoratorFunction[];
         parameters?: {
             creevey?: CreeveyStoryParams;
             [name: string]: unknown;
         };
     };
     storyName?: string;
-    decorators?: DecoratorFunction<StoryFnReturnType>[];
+    decorators?: DecoratorFunction[];
     parameters?: {
         creevey?: CreeveyStoryParams;
         [name: string]: unknown;
@@ -73,10 +66,15 @@ export interface CreeveyStory {
 }
 export interface Capabilities {
     browserName: string;
+    browserVersion?: string;
+    platformName?: string;
+    /**
+     * @deprecated use `browserVersion` instead
+     */
     version?: string;
     [prop: string]: unknown;
 }
-export declare type BrowserConfig = Capabilities & {
+export type BrowserConfig = Capabilities & {
     limit?: number;
     gridUrl?: string;
     storybookUrl?: string;
@@ -87,7 +85,7 @@ export declare type BrowserConfig = Capabilities & {
     _storybookGlobals?: StorybookGlobals;
     /**
      * Specify custom docker image. Used only with `useDocker == true`
-     * @default `selenoid/${browserName}:${version ?? 'latest'}`
+     * @default `selenoid/${browserName}:${browserVersion ?? 'latest'}`
      */
     dockerImage?: string;
     /**
@@ -100,10 +98,8 @@ export declare type BrowserConfig = Capabilities & {
         height: number;
     };
 };
-export interface StorybookGlobals {
-    [key: string]: unknown;
-}
-export declare type Browser = boolean | string | BrowserConfig;
+export type StorybookGlobals = Record<string, unknown>;
+export type Browser = boolean | string | BrowserConfig;
 export interface HookConfig {
     before?: () => unknown;
     after?: () => unknown;
@@ -141,11 +137,6 @@ export interface Config {
      * @default path.join(process.cwd(), './report')
      */
     reportDir: string;
-    /**
-     * Absolute path to storybook config directory
-     * @default path.join(process.cwd(), './.storybook')
-     */
-    storybookDir: string;
     /**
      * How much test would be retried
      * @default 0
@@ -160,9 +151,7 @@ export interface Config {
      * Browser capabilities
      * @default { chrome: true }
      */
-    browsers: {
-        [key: string]: Browser;
-    };
+    browsers: Record<string, Browser>;
     /**
      * Hooks that allow run custom script before and after creevey start
      */
@@ -172,18 +161,6 @@ export interface Config {
      * Works only with `useDocker == false`
      */
     selenoidPath?: string;
-    /**
-     * Creevey extract tests by using babel transformations
-     * and load stories to nodejs directly.
-     * In some edge cases it may fail to load tests.
-     * In that case you can enable this option.
-     * Creevey uses Storybook webpack config to build nodejs bundle with tests.
-     * But it slightly slower and doesn't work if you use custom bundler for Storybook
-     *
-     * Affects only for Storybook 6.2+
-     * @default false
-     */
-    useWebpackToExtractTests: boolean;
     /**
      * Creevey has two built-in stories providers.
      *
@@ -208,11 +185,7 @@ export interface Config {
      * }
      * ```
      */
-    storiesProvider: (config: Config, options: {
-        watch: boolean;
-        debug: boolean;
-        port: number;
-    }, storiesListener: (stories: Map<string, StoryInput[]>) => void) => Promise<StoriesRaw>;
+    storiesProvider: StoriesProvider;
     /**
      * Define custom babel options for load stories transformation
      */
@@ -249,25 +222,36 @@ export interface Config {
     testsRegex?: RegExp;
     testsDir?: string;
     tsConfig?: string;
+    /**
+     * Telemetry contains information about Creevey and Storybook versions, used Creevey config, browsers and tests meta.
+     * It's being sent only for projects from git.skbkontur.ru
+     * @default false
+     */
+    disableTelemetry?: boolean;
+}
+export interface StoriesProvider<T = any> {
+    (config: Config, options: T, storiesListener: (stories: Map<string, StoryInput[]>) => void): Promise<StoriesRaw>;
+    providerName?: string;
 }
-export declare type CreeveyConfig = Partial<Config>;
+export type CreeveyConfig = Partial<Config>;
 export interface Options {
+    _: string[];
     config?: string;
     port: number;
     ui: boolean;
     update: boolean | string;
-    webpack: boolean;
     debug: boolean;
-    extract: boolean | string;
+    trace: boolean;
     tests: boolean;
     browser?: string;
     reporter?: string;
     screenDir?: string;
     reportDir?: string;
+    storybookUrl?: string;
     saveReport: boolean;
     failFast?: boolean;
 }
-export declare type WorkerMessage = {
+export type WorkerMessage = {
     type: 'ready';
     payload?: never;
 } | {
@@ -276,7 +260,7 @@ export declare type WorkerMessage = {
         error: string;
     };
 };
-export declare type StoriesMessage = {
+export type StoriesMessage = {
     type: 'get';
     payload?: never;
 } | {
@@ -292,7 +276,7 @@ export declare type StoriesMessage = {
     type: 'capture';
     payload?: CaptureOptions;
 };
-export declare type TestMessage = {
+export type TestMessage = {
     type: 'start';
     payload: {
         id: string;
@@ -303,7 +287,7 @@ export declare type TestMessage = {
     type: 'end';
     payload: TestResult;
 };
-export declare type WebpackMessage = {
+export type WebpackMessage = {
     type: 'success';
     payload?: never;
 } | {
@@ -316,7 +300,7 @@ export declare type WebpackMessage = {
     type: 'rebuild failed';
     payload?: never;
 };
-export declare type DockerMessage = {
+export type DockerMessage = {
     type: 'start';
     payload?: never;
 } | {
@@ -325,8 +309,8 @@ export declare type DockerMessage = {
         gridUrl: string;
     };
 };
-export declare type ShutdownMessage = unknown;
-export declare type ProcessMessage = (WorkerMessage & {
+export type ShutdownMessage = object;
+export type ProcessMessage = (WorkerMessage & {
     scope: 'worker';
 }) | (StoriesMessage & {
     scope: 'stories';
@@ -339,12 +323,12 @@ export declare type ProcessMessage = (WorkerMessage & {
 }) | (ShutdownMessage & {
     scope: 'shutdown';
 });
-export declare type WorkerHandler = (message: WorkerMessage) => void;
-export declare type StoriesHandler = (message: StoriesMessage) => void;
-export declare type TestHandler = (message: TestMessage) => void;
-export declare type WebpackHandler = (message: WebpackMessage) => void;
-export declare type DockerHandler = (message: DockerMessage) => void;
-export declare type ShutdownHandler = (message: ShutdownMessage) => void;
+export type WorkerHandler = (message: WorkerMessage) => void;
+export type StoriesHandler = (message: StoriesMessage) => void;
+export type TestHandler = (message: TestMessage) => void;
+export type WebpackHandler = (message: WebpackMessage) => void;
+export type DockerHandler = (message: DockerMessage) => void;
+export type ShutdownHandler = (message: ShutdownMessage) => void;
 export interface Worker extends ClusterWorker {
     isRunning?: boolean;
 }
@@ -354,18 +338,14 @@ export interface Images {
     diff?: string;
     error?: string;
 }
-export declare type TestStatus = 'unknown' | 'pending' | 'running' | 'failed' | 'success' | 'retrying';
+export type TestStatus = 'unknown' | 'pending' | 'running' | 'failed' | 'success' | 'retrying';
 export interface TestResult {
     status: 'failed' | 'success';
-    images?: Partial<{
-        [name: string]: Images;
-    }>;
+    images?: Partial<Record<string, Images>>;
     error?: string;
 }
 export interface ImagesError extends Error {
-    images: string | Partial<{
-        [name: string]: string;
-    }>;
+    images: string | Partial<Record<string, string>>;
 }
 export interface TestMeta {
     id: string;
@@ -379,9 +359,7 @@ export interface TestData extends TestMeta {
     retries?: number;
     status?: TestStatus;
     results?: TestResult[];
-    approved?: Partial<{
-        [image: string]: number;
-    }>;
+    approved?: Partial<Record<string, number>>;
 }
 export interface ServerTest extends TestData {
     story: StoryInput;
@@ -389,35 +367,31 @@ export interface ServerTest extends TestData {
 }
 export interface CreeveyStatus {
     isRunning: boolean;
-    tests: Partial<{
-        [id: string]: TestData;
-    }>;
+    tests: Partial<Record<string, TestData>>;
     browsers: string[];
 }
 export interface CreeveyUpdate {
     isRunning?: boolean;
-    tests?: Partial<{
-        [id: string]: TestData;
-    }>;
+    tests?: Partial<Record<string, TestData>>;
     removedTests?: TestMeta[];
 }
 export interface SkipOption {
-    reason?: string;
     in?: string | string[] | RegExp;
     kinds?: string | string[] | RegExp;
     stories?: string | string[] | RegExp;
     tests?: string | string[] | RegExp;
 }
-export declare type SkipOptions = boolean | string | SkipOption | SkipOption[] | Record<string, SkipOption | SkipOption[]>;
-export declare type CreeveyTestFunction = (this: {
+export type SkipOptions = boolean | string | Record<string, SkipOption | SkipOption[]>;
+export interface CreeveyTestController {
     browser: WebDriver;
     until: typeof until;
     keys: IKey;
-    expect: Chai.ExpectStatic;
+    expect: typeof expect;
     takeScreenshot: () => Promise<string>;
-    updateStoryArgs: <Args extends Record<string, unknown>>(updatedArgs: Args) => Promise<void>;
+    updateStoryArgs: (updatedArgs: Record<string, unknown>) => Promise<void>;
     readonly captureElement?: WebElementPromise;
-}) => Promise<void>;
+}
+export type CreeveyTestFunction = (this: CreeveyTestController) => Promise<void>;
 export interface CaptureOptions {
     imageName?: string;
     captureElement?: string | null;
@@ -430,16 +404,14 @@ export interface CreeveyStoryParams extends CaptureOptions {
         ms: number;
     };
     skip?: SkipOptions;
-    tests?: {
-        [name: string]: CreeveyTestFunction;
-    };
+    tests?: Record<string, CreeveyTestFunction>;
 }
 export interface ApprovePayload {
     id: string;
     retry: number;
     image: string;
 }
-export declare type Request = {
+export type Request = {
     type: 'status';
 } | {
     type: 'start';
@@ -450,7 +422,7 @@ export declare type Request = {
     type: 'approve';
     payload: ApprovePayload;
 };
-export declare type Response = {
+export type Response = {
     type: 'status';
     payload: CreeveyStatus;
 } | {
@@ -469,14 +441,12 @@ export interface CreeveySuite {
     opened: boolean;
     checked: boolean;
     indeterminate: boolean;
-    children: Partial<{
-        [title: string]: CreeveySuite | CreeveyTest;
-    }>;
+    children: Partial<Record<string, CreeveySuite | CreeveyTest>>;
 }
-export declare type ImagesViewMode = 'side-by-side' | 'swap' | 'slide' | 'blend';
+export type ImagesViewMode = 'side-by-side' | 'swap' | 'slide' | 'blend';
 export declare function noop(): void;
 export declare function isDefined<T>(value: T | null | undefined): value is T;
-export declare function isTest<T1, T2 extends TestData>(x?: T1 | T2): x is T2;
+export declare function isTest(x?: CreeveySuite | CreeveyTest): x is CreeveyTest;
 export declare function isObject(x: unknown): x is Record<string, unknown>;
 export declare function isString(x: unknown): x is string;
 export declare function isFunction(x: unknown): x is (...args: any[]) => any;

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

@@ -12,7 +12,7 @@
 
 ### 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`
+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 = {
@@ -47,9 +47,6 @@ module.exports = {
   // 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'),
 
@@ -120,7 +117,7 @@ export const parameters = {
   creevey: {
     // Skip all *hover tests in IE11 on the global level
     skip: {
-      ie11: { in: 'ie11', tests: /.*hover$/ },
+      "hovers don't work in ie11": { in: 'ie11', tests: /.*hover$/ },
     },
   },
 };
@@ -137,15 +134,14 @@ export default {
   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" },
-        {
+      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$/,
-          reason: "For some reason `MyComponent` hovering doesn't work correctly",
         },
-      ],
+      },
     },
   },
 } as Meta & CreeveyMeta;
@@ -169,43 +165,47 @@ Basic.parameters = {
 
 ```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[]>;
+type SkipOptions = boolean | string | Record<string, SkipOption | SkipOption[]>;
 ```
 
 - Skip all stories for all browsers:
   - `skip: true`
   - `skip: 'Skip reason message'`
-  - `skip: { reason: 'Skip reason message' }`
+  - `skip: { 'Skip reason message': true }`
 - Skip all stories for specific browsers:
-  - `skip: { in: 'ie11' }`
-  - `skip: { in: ['ie11', 'chrome'] }`
-  - `skip: { in: /^fire.*/ }`
+  - `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: { kinds: 'Button' }`
-  - `skip: { kinds: ['Button', 'Input'] }`
-  - `skip: { kinds: /.*Modal$/ }`
+  - `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: { stories: 'simple' }`
-  - `skip: { stories: ['simple', 'special'] }`
-  - `skip: { stories: /.*large$/ }`
+  - `skip: { 'Skip reason message': { stories: 'simple' } }`
+  - `skip: { 'Skip reason message': { stories: ['simple', 'special'] } }`
+  - `skip: { 'Skip reason message': { stories: /.*large$/ } }`
 - Skip specific tests:
-  - `skip: { tests: 'click' }`
-  - `skip: { tests: ['hover', 'click'] }`
-  - `skip: { tests: /^press.*$/ }`
+  - `skip: { 'Skip reason message': { tests: 'click' } }`
+  - `skip: { 'Skip reason message': { tests: ['hover', 'click'] } }`
+  - `skip: { 'Skip reason message': { tests: /^press.*$/ } }`
 - Multiple skip options:
-  - as an array `skip: [{ /* ... */ }]`
-  - as an object
+  - for one reason
+    ```
+    skip: {
+      "reason": [{ /* ... */ }, { /* ... */ }],
+    }
+    ```
+  - for several reasons
     ```
     skip: {
-      foo: { /* ... */ },
-      bar: { /* ... */ },
+      "reason 1": { /* ... */ },
+      "reason 2": { /* ... */ },
     }
     ```
 

package/docs/tests.md

@@ -13,7 +13,7 @@ export default { title: 'MyComponent' };
 export const Basic: Story & CreeveyStory = () => <MyComponent />;
 Basic.parameters = {
   creevey: {
-    captureElement: '#root',
+    captureElement: '#storybook-root',
     tests: {
       async click() {
         await this.browser.actions().click(this.captureElement).perform();
@@ -25,7 +25,7 @@ Basic.parameters = {
 };
 ```
 
-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).
+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
 
@@ -40,7 +40,7 @@ export const Basic: CSFStory<JSX.Element> = () => <MyForm />;
 Basic.story = {
   parameters: {
     creevey: {
-      captureElement: '#root',
+      captureElement: '#storybook-root',
       delay: 1000,
       tests: {
         async submit() {

package/eslint.config.mjs

@@ -0,0 +1,62 @@
+import globals from 'globals';
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+// @ts-expect-error There is no types in this package
+import react from 'eslint-plugin-react';
+import prettierRecommended from 'eslint-plugin-prettier/recommended';
+
+// TODO Add import plugin after it migrated to eslint 9.x
+const config = tseslint.config(
+  { ignores: ['dist/*', 'report/*', 'scripts/*'] },
+  js.configs.recommended,
+  prettierRecommended,
+  /* eslint-disable-next-line */
+  react.configs.flat.recommended,
+  ...tseslint.configs.strictTypeChecked,
+  ...tseslint.configs.stylisticTypeChecked,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+
+      ecmaVersion: 2021,
+      sourceType: 'module',
+
+      parserOptions: {
+        projectService: {
+          allowDefaultProject: ['*.{m,}js'],
+          defaultProject: 'tsconfig.json',
+        },
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react/prop-types': 'off',
+      '@typescript-eslint/restrict-template-expressions': [
+        'error',
+        {
+          allowNumber: true,
+        },
+      ],
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+);
+
+export default config;

package/manager/README.md

@@ -0,0 +1,3 @@
+This is a fallback for package.json's `exports.addon` field. It's required for outdated environments (like node 11 and typescript with the "node" moduleResolution) to resolve imports from `creevey/addon` properly.
+
+See https://github.com/andrewbranch/example-subpath-exports-ts-compat. The fallback uses the "package-json-redirects" startegy.

package/manager/package.json

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