creevey 0.10.0-beta.2 → 0.10.0-beta.4

package/src/server/playwright/internal.ts

@@ -3,8 +3,16 @@ import Logger from 'loglevel';
 import chalk from 'chalk';
 import { v4 } from 'uuid';
 import prefix from 'loglevel-plugin-prefix';
-import { SET_GLOBALS, STORY_RENDERED, UPDATE_STORY_ARGS } from '@storybook/core-events';
-import { BrowserConfigObject, Config, Options, StoriesRaw, StoryInput, StorybookGlobals, noop } from '../../types';
+import {
+  BrowserConfigObject,
+  Config,
+  Options,
+  StoriesRaw,
+  StoryInput,
+  StorybookEvents,
+  StorybookGlobals,
+  noop,
+} from '../../types';
 import { subscribeOn } from '../messages';
 import { appendIframePath, getAddresses, LOCALHOST_REGEXP, resolveStorybookUrl, storybookRootID } from '../webdriver';
 import { isShuttingDown, runSequence } from '../utils';
@@ -140,7 +148,7 @@ export class InternalBrowser {
           });
         });
       },
-      [story.id, updatedArgs, UPDATE_STORY_ARGS, STORY_RENDERED] as const,
+      [story.id, updatedArgs, StorybookEvents.UPDATE_STORY_ARGS, StorybookEvents.STORY_RENDERED] as const,
     );
   }
 
@@ -167,26 +175,43 @@ export class InternalBrowser {
     options: Options,
   ): Promise<InternalBrowser | null> {
     const browserConfig = config.browsers[browserName] as BrowserConfigObject;
-    const { storybookUrl: address = config.storybookUrl, viewport, _storybookGlobals } = browserConfig;
+    const {
+      storybookUrl: address = config.storybookUrl,
+      viewport,
+      _storybookGlobals,
+      seleniumCapabilities,
+      playwrightOptions,
+    } = browserConfig;
 
     let browser: Browser | null = null;
 
-    // TODO Support Selenium Grid 4
-    switch (browserConfig.browserName) {
-      case 'chromium':
-        browser = await tryConnect(chromium, gridUrl);
-        break;
-      case 'firefox':
-        browser = await tryConnect(firefox, gridUrl);
-        break;
-      case 'webkit':
-        browser = await tryConnect(webkit, gridUrl);
-        break;
-
-      default:
-        throw new Error(
-          `Unknown browser ${browserConfig.browserName}. Playwright supports browsers: chromium, firefox, webkit`,
-        );
+    if (new URL(gridUrl).protocol === 'ws:') {
+      switch (browserConfig.browserName) {
+        case 'chromium':
+          browser = await tryConnect(chromium, gridUrl);
+          break;
+        case 'firefox':
+          browser = await tryConnect(firefox, gridUrl);
+          break;
+        case 'webkit':
+          browser = await tryConnect(webkit, gridUrl);
+          break;
+
+        default:
+          logger.error(
+            `Unknown browser ${browserConfig.browserName}. Playwright supports browsers: chromium, firefox, webkit`,
+          );
+      }
+    } else {
+      if (browserConfig.browserName != 'chrome') {
+        logger.error("Playwright's Selenium Grid feature supports only chrome browser");
+        return null;
+      }
+
+      process.env.SELENIUM_REMOTE_URL = gridUrl;
+      process.env.SELENIUM_REMOTE_CAPABILITIES = JSON.stringify(seleniumCapabilities);
+
+      browser = await chromium.launch(playwrightOptions);
     }
 
     if (!browser) {
@@ -317,7 +342,7 @@ export class InternalBrowser {
               if (typeof window.__STORYBOOK_ADDONS_CHANNEL__ == 'undefined') return true;
               if (window.__STORYBOOK_ADDONS_CHANNEL__.last(SET_GLOBALS) == undefined) return true;
               return false;
-            }, SET_GLOBALS);
+            }, StorybookEvents.SET_GLOBALS);
           } catch (e: unknown) {
             this.#logger.debug('An error has been caught during the script:', e);
           }

package/src/server/reporter.ts

@@ -34,7 +34,7 @@ export class CreeveyReporter {
       testLogger.warn(chalk.cyan(test.titlePath().join('/')));
     });
     runner.on(TEST_EVENTS.TEST_PASS, (test: FakeTest) => {
-      testLogger.info(chalk.cyan(test.titlePath().join('/')));
+      testLogger.info(chalk.cyan(test.titlePath().join('/')), chalk.gray(`(${test.duration} ms)`));
     });
     runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest, error) => {
       testLogger.error(

package/src/server/selenium/internal.ts

@@ -1,5 +1,4 @@
 import { Args } from '@storybook/csf';
-import { SET_GLOBALS, UPDATE_STORY_ARGS, STORY_RENDERED } from '@storybook/core-events';
 import chalk from 'chalk';
 import http from 'http';
 import https from 'https';
@@ -22,6 +21,7 @@ import {
   StoriesRaw,
   Options,
   ServerTest,
+  StorybookEvents,
 } from '../../types.js';
 import { colors, logger } from '../logger.js';
 import { subscribeOn } from '../messages.js';
@@ -100,7 +100,7 @@ async function buildWebdriver(
   options: Options,
 ): Promise<WebDriver | null> {
   const browserConfig = config.browsers[browserName] as BrowserConfigObject;
-  const { _storybookGlobals, /*customizeBuilder,*/ ...userCapabilities } = browserConfig;
+  const { /*customizeBuilder,*/ seleniumCapabilities } = browserConfig;
 
   const url = new URL(gridUrl);
   url.username = url.username ? '********' : '';
@@ -108,7 +108,7 @@ async function buildWebdriver(
   logger.debug(`(${browserName}) Connecting to Selenium ${chalk.magenta(url.toString())}`);
 
   // TODO Define some capabilities explicitly and define typings
-  const capabilities = new Capabilities({ ...userCapabilities, pageLoadStrategy: PageLoadStrategy.EAGER });
+  const capabilities = new Capabilities({ ...seleniumCapabilities, pageLoadStrategy: PageLoadStrategy.EAGER });
   const prefs = new logging.Preferences();
 
   if (options.trace) {
@@ -338,8 +338,8 @@ export class InternalBrowser {
       },
       story.id,
       updatedArgs,
-      UPDATE_STORY_ARGS,
-      STORY_RENDERED,
+      StorybookEvents.UPDATE_STORY_ARGS,
+      StorybookEvents.STORY_RENDERED,
     );
   }
 
@@ -544,7 +544,7 @@ export class InternalBrowser {
               if (typeof window.__STORYBOOK_ADDONS_CHANNEL__ == 'undefined') return true;
               if (window.__STORYBOOK_ADDONS_CHANNEL__.last(SET_GLOBALS) == undefined) return true;
               return false;
-            }, SET_GLOBALS);
+            }, StorybookEvents.SET_GLOBALS);
           } catch (e: unknown) {
             this.#logger.debug('An error has been caught during the script:', e);
           }

package/src/server/selenium/selenoid.ts

@@ -30,7 +30,7 @@ async function createSelenoidConfig(
   browsers.forEach(
     ({
       browserName,
-      browserVersion = 'latest',
+      seleniumCapabilities: { browserVersion = 'latest' } = {},
       dockerImage = `selenoid/${browserName}:${browserVersion}`,
       webdriverCommand = [],
     }) => {
@@ -117,7 +117,7 @@ export async function startSelenoidContainer(config: Config, debug: boolean): Pr
   browsers.forEach(
     ({
       browserName,
-      browserVersion = 'latest',
+      seleniumCapabilities: { browserVersion = 'latest' } = {},
       limit: browserLimit = 1,
       dockerImage = `selenoid/${browserName}:${browserVersion}`,
     }) => {

package/src/server/telemetry.ts

@@ -154,12 +154,16 @@ export async function sendScreenshotsCount(
               name: name,
               gridUrl: browser.gridUrl ? sanitizeGridUrl(browser.gridUrl) : undefined,
               browserName: browser.browserName,
-              browserVersion: browser.browserVersion,
-              platformName: browser.platformName,
+              // @ts-expect-error Support old config version
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              browserVersion: browser.seleniumCapabilities?.browserVersion ?? browser.browserVersion,
+              // @ts-expect-error Support old config version
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              platformName: browser.seleniumCapabilities?.platformName ?? browser.platformName,
               viewport: browser.viewport,
               limit: browser.limit,
               dockerImage: browser.dockerImage,
-              'se:teamname': browser['se:teamname'],
+              'se:teamname': browser.seleniumCapabilities?.['se:teamname'],
             }
           : browser,
       ]),

package/src/types.ts

@@ -5,6 +5,7 @@ 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 { Browser } from 'playwright-core';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -41,6 +42,18 @@ export interface StoryMeta {
   };
 }
 
+export enum StorybookEvents {
+  SET_STORIES = 'setStories',
+  SET_CURRENT_STORY = 'setCurrentStory',
+  FORCE_REMOUNT = 'forceRemount',
+  STORY_RENDERED = 'storyRendered',
+  STORY_ERRORED = 'storyErrored',
+  STORY_THREW_EXCEPTION = 'storyThrewException',
+  UPDATE_STORY_ARGS = 'updateStoryArgs',
+  SET_GLOBALS = 'setGlobals',
+  UPDATE_GLOBALS = 'updateGlobals',
+}
+
 export interface CreeveyMeta {
   parameters?: {
     creevey?: CreeveyStoryParams;
@@ -91,14 +104,6 @@ export class ChromeConfig {
 */
 export interface BrowserConfigObject {
   browserName: string;
-  /**
-   * Browser version. Ignored with Playwright webdriver
-   */
-  browserVersion?: string;
-  /**
-   * Operation system name. Ignored with Playwright webdriver
-   */
-  platformName?: string;
   // customizeBuilder?: (builder: Builder) => Builder;
   limit?: number;
   /**
@@ -122,15 +127,25 @@ export interface BrowserConfigObject {
    * Used only with `useDocker == false`
    */
   webdriverCommand?: string[];
-  // TODO Check version compatibility
-  // playwrightVersion?: string;
   // /**
   //  * Use to start standalone playwright browser
   //  */
   // playwrightBrowser?: () => Promise<Browser>;
   viewport?: { width: number; height: number };
 
-  [name: string]: unknown;
+  seleniumCapabilities?: {
+    /**
+     * Browser version. Ignored with Playwright webdriver
+     */
+    browserVersion?: string;
+    /**
+     * Operation system name. Ignored with Playwright webdriver
+     */
+    platformName?: string;
+    [name: string]: unknown;
+  };
+
+  playwrightOptions?: Omit<LaunchOptions, 'logger'>;
 }
 
 export type StorybookGlobals = Record<string, unknown>;