creevey 0.10.0-beta.2 → 0.10.0-beta.21

package/src/server/playwright/internal.ts

@@ -1,15 +1,28 @@
 import { Browser, BrowserType, Page, chromium, firefox, webkit } from 'playwright-core';
-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';
+import { isShuttingDown, resolvePlaywrightBrowserType, runSequence } from '../utils';
 import { colors, logger } from '../logger';
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
+
+const browsers = {
+  chromium,
+  firefox,
+  webkit,
+};
 
 async function tryConnect(type: BrowserType, gridUrl: string): Promise<Browser | null> {
   let timeout: NodeJS.Timeout | null = null;
@@ -20,7 +33,7 @@ async function tryConnect(type: BrowserType, gridUrl: string): Promise<Browser |
       (resolve) =>
         (timeout = setTimeout(() => {
           isTimeout = true;
-          logger.error(`Can't connect to ${type.name()} playwright browser`, error);
+          logger().error(`Can't connect to ${type.name()} playwright browser`, error);
           resolve(null);
         }, 10000)),
     ),
@@ -49,13 +62,13 @@ export class InternalBrowser {
   #sessionId: string = v4();
   #serverHost: string | null = null;
   #serverPort: number;
-  #logger: Logger.Logger;
+  #storybookGlobals?: StorybookGlobals;
   #unsubscribe: () => void = noop;
-  constructor(browser: Browser, page: Page, port: number) {
+  constructor(browser: Browser, page: Page, port: number, storybookGlobals?: StorybookGlobals) {
     this.#browser = browser;
     this.#page = page;
     this.#serverPort = port;
-    this.#logger = Logger.getLogger(this.#sessionId);
+    this.#storybookGlobals = storybookGlobals;
     this.#unsubscribe = subscribeOn('shutdown', () => {
       void this.closeBrowser();
     });
@@ -91,7 +104,12 @@ export class InternalBrowser {
     if (captureElement) {
       const element = await this.#page.$(captureElement);
       if (!element) throw new Error(`Element with selector ${captureElement} not found`);
-      return element.screenshot({ animations: 'disabled', mask });
+
+      return element.screenshot({
+        animations: 'disabled',
+        mask,
+        style: ':root { overflow: hidden !important; }',
+      });
     }
     return this.#page.screenshot({ animations: 'disabled', mask, fullPage: true });
   }
@@ -102,10 +120,11 @@ export class InternalBrowser {
 
   async selectStory(id: string, waitForReady = false): Promise<boolean> {
     // NOTE: Global variables might be reset after hot reload. I think it's workaround, maybe we need better solution
+    await this.updateStorybookGlobals();
     await this.updateBrowserGlobalVariables();
     await this.resetMousePosition();
 
-    this.#logger.debug(`Triggering 'SetCurrentStory' event with storyId ${chalk.magenta(id)}`);
+    logger().debug(`Triggering 'SetCurrentStory' event with storyId ${chalk.magenta(id)}`);
 
     const result = await this.#page.evaluate<
       [error?: string | null, isCaptureCalled?: boolean] | null,
@@ -140,7 +159,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 +186,28 @@ 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:') {
+      browser = await tryConnect(browsers[resolvePlaywrightBrowserType(browserConfig.browserName)], gridUrl);
+    } 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) {
@@ -197,7 +218,7 @@ export class InternalBrowser {
 
     // TODO Add debug output
 
-    const internalBrowser = new InternalBrowser(browser, page, options.port);
+    const internalBrowser = new InternalBrowser(browser, page, options.port, _storybookGlobals);
 
     try {
       if (isShuttingDown.current) return null;
@@ -205,7 +226,6 @@ export class InternalBrowser {
         browserName,
         viewport,
         storybookUrl: address,
-        storybookGlobals: _storybookGlobals,
         resolveStorybookUrl: config.resolveStorybookUrl,
       });
 
@@ -217,7 +237,7 @@ export class InternalBrowser {
       const error = new Error(`Can't load storybook root page: ${message}`);
       if (originalError instanceof Error) error.stack = originalError.stack;
 
-      logger.error(error);
+      logger().error(error);
 
       return null;
     }
@@ -227,32 +247,29 @@ export class InternalBrowser {
     browserName,
     viewport,
     storybookUrl,
-    storybookGlobals,
     resolveStorybookUrl,
   }: {
     browserName: string;
     viewport?: { width: number; height: number };
     storybookUrl: string;
-    storybookGlobals?: StorybookGlobals;
     resolveStorybookUrl?: () => Promise<string>;
   }) {
     const sessionId = this.#sessionId;
 
-    prefix.apply(this.#logger, {
+    prefix.apply(logger(), {
       format(level) {
         const levelColor = colors[level.toUpperCase() as keyof typeof colors];
-        return `[${browserName}:${chalk.gray(sessionId)}] ${levelColor(level)} =>`;
+        return `[${browserName}:${chalk.gray(process.pid)}] ${levelColor(level)} => ${chalk.gray(sessionId)}`;
       },
     });
 
-    this.#page.setDefaultNavigationTimeout(10000);
     this.#page.setDefaultTimeout(60000);
 
     return await runSequence(
       [
         () => this.openStorybookPage(storybookUrl, resolveStorybookUrl),
         () => this.waitForStorybook(),
-        () => this.updateStorybookGlobals(storybookGlobals),
+        () => this.updateStorybookGlobals(),
         () => this.resolveCreeveyHost(),
         () => this.updateBrowserGlobalVariables(),
         () => this.resizeViewport(viewport),
@@ -269,29 +286,30 @@ export class InternalBrowser {
 
     try {
       if (resolver) {
-        this.#logger.debug('Resolving storybook url with custom resolver');
+        logger().debug('Resolving storybook url with custom resolver');
 
         const resolvedUrl = await resolver();
 
-        this.#logger.debug(`Resolver storybook url ${resolvedUrl}`);
+        logger().debug(`Resolver storybook url ${resolvedUrl}`);
 
         await this.#page.goto(appendIframePath(resolvedUrl));
       } else {
-        await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url), this.#logger);
+        // TODO this.#page.setDefaultNavigationTimeout(10000);
+        await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url));
       }
     } catch (error) {
-      this.#logger.error('Failed to resolve storybook URL', error instanceof Error ? error.message : '');
+      logger().error('Failed to resolve storybook URL', error instanceof Error ? error.message : '');
       throw error;
     }
   }
 
   private async checkUrl(url: string): Promise<boolean> {
     try {
-      this.#logger.debug(`Opening ${chalk.magenta(url)} and checking the page source`);
+      logger().debug(`Opening ${chalk.magenta(url)} and checking the page source`);
       const response = await this.#page.goto(url, { waitUntil: 'commit' });
       const source = await response?.text();
 
-      this.#logger.debug(`Checking ${chalk.cyan(`#${storybookRootID}`)} existence on ${chalk.magenta(url)}`);
+      logger().debug(`Checking ${chalk.cyan(`#${storybookRootID}`)} existence on ${chalk.magenta(url)}`);
       return source?.includes(`id="${storybookRootID}"`) ?? false;
     } catch {
       return false;
@@ -300,7 +318,7 @@ export class InternalBrowser {
 
   private async waitForStorybook(): Promise<void> {
     // TODO Duplicated code with selenium
-    this.#logger.debug('Waiting for `setStories` event to make sure that storybook is initiated');
+    logger().debug('Waiting for `setStories` event to make sure that storybook is initiated');
 
     const isTimeout = await Promise.race([
       new Promise<boolean>((resolve) => {
@@ -317,9 +335,9 @@ 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);
+            logger().debug('An error has been caught during the script:', e);
           }
         } while (wait);
         return false;
@@ -330,13 +348,13 @@ export class InternalBrowser {
     if (isTimeout) throw new Error('Failed to wait `setStories` event');
   }
 
-  private async updateStorybookGlobals(globals?: StorybookGlobals): Promise<void> {
-    if (!globals) return;
+  private async updateStorybookGlobals(): Promise<void> {
+    if (!this.#storybookGlobals) return;
 
-    this.#logger.debug('Applying storybook globals');
+    logger().debug('Applying storybook globals');
     await this.#page.evaluate((globals: StorybookGlobals) => {
       window.__CREEVEY_UPDATE_GLOBALS__(globals);
-    }, globals);
+    }, this.#storybookGlobals);
   }
 
   private async resolveCreeveyHost(): Promise<void> {
@@ -367,6 +385,7 @@ export class InternalBrowser {
   private async updateBrowserGlobalVariables() {
     await this.#page.evaluate(
       ([workerId, creeveyHost, creeveyPort]) => {
+        window.__CREEVEY_ENV__ = true;
         window.__CREEVEY_WORKER_ID__ = workerId;
         window.__CREEVEY_SERVER_HOST__ = creeveyHost ?? 'localhost';
         window.__CREEVEY_SERVER_PORT__ = creeveyPort;

package/src/server/playwright/webdriver.ts

@@ -1,5 +1,5 @@
 /// <reference types="../../../types/playwright-context" />
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 import { Config, Options, ServerTest, StoriesRaw, StoryInput } from '../../types';
 import { logger } from '../logger';
 import { subscribeOn } from '../messages';
@@ -53,7 +53,7 @@ export class PlaywrightWebdriver extends CreeveyWebdriverBase {
       try {
         return await import('./internal.js');
       } catch (error) {
-        logger.error(error);
+        logger().error(error);
         return null;
       }
     })();

package/src/server/providers/browser.ts

@@ -5,6 +5,7 @@ import { isDefined } from '../../types.js';
 import { logger } from '../logger.js';
 import { deserializeRawStories } from '../../shared/index.js';
 
+// TODO Don't have updates from stories
 export const loadStories: StoriesProvider = async (_config, storiesListener, webdriver) => {
   if (cluster.isPrimary) {
     return new Promise<StoriesRaw>((resolve) => {
@@ -17,13 +18,13 @@ export const loadStories: StoriesProvider = async (_config, storiesListener, web
           if (message.type == 'set') {
             const { stories, oldTests } = message.payload;
             if (oldTests.length > 0)
-              logger.warn(
+              logger().warn(
                 `If you use browser stories provider of CSFv3 Storybook feature\n` +
                   `Creevey will not load tests defined in story parameters from following stories:\n` +
                   oldTests.join('\n'),
               );
             unsubscribe();
-            resolve(stories);
+            resolve(deserializeRawStories(stories));
           }
         });
         sendStoriesMessage(worker, { type: 'get' });
@@ -36,10 +37,11 @@ export const loadStories: StoriesProvider = async (_config, storiesListener, web
   } else {
     subscribeOn('stories', (message) => {
       if (message.type == 'get')
-        emitStoriesMessage({ type: 'set', payload: { stories, oldTests: storiesWithOldTests } });
+        emitStoriesMessage({ type: 'set', payload: { stories: rawStories, oldTests: storiesWithOldTests } });
       if (message.type == 'update') storiesListener(new Map(message.payload));
     });
-    const stories = deserializeRawStories((await webdriver?.loadStoriesFromBrowser()) ?? {});
+    const rawStories = (await webdriver?.loadStoriesFromBrowser()) ?? {};
+    const stories = deserializeRawStories(rawStories);
 
     const storiesWithOldTests: string[] = [];
 

package/src/server/providers/hybrid.ts

@@ -54,7 +54,7 @@ async function parseParams(
 
   if (listener) {
     chokidar.watch(testFiles).on('change', (filePath) => {
-      logger.debug(`changed: ${filePath}`);
+      logger().debug(`changed: ${filePath}`);
 
       // doesn't work, always returns {} due modules caching
       // see https://github.com/nodejs/modules/issues/307

package/src/server/reporter.ts

@@ -22,23 +22,24 @@ export class CreeveyReporter {
   // TODO Output in better way, like vitest, maybe
   constructor(runner: EventEmitter, options: { reporterOptions: { creevey: ReporterOptions } }) {
     const { sessionId, browserName } = options.reporterOptions.creevey;
-    const testLogger = Logger.getLogger(browserName);
+    const testLogger = Logger.getLogger(sessionId);
 
     prefix.apply(testLogger, {
       format(level) {
-        return `${testLevels[level]} => (${browserName}:${chalk.gray(sessionId)})`;
+        return `[${browserName}:${chalk.gray(process.pid)}] ${testLevels[level]} => ${chalk.gray(sessionId)}`;
       },
     });
 
     runner.on(TEST_EVENTS.TEST_BEGIN, (test: FakeTest) => {
-      testLogger.warn(chalk.cyan(test.titlePath().join('/')));
+      testLogger.warn(chalk.cyan(test.fullTitle()));
     });
     runner.on(TEST_EVENTS.TEST_PASS, (test: FakeTest) => {
-      testLogger.info(chalk.cyan(test.titlePath().join('/')));
+      testLogger.info(chalk.cyan(test.fullTitle()), chalk.gray(`(${test.duration} ms)`));
     });
     runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest, error) => {
       testLogger.error(
-        chalk.cyan(test.titlePath().join('/')),
+        chalk.cyan(test.fullTitle()),
+        chalk.gray(`(${test.duration} ms)`),
         '\n  ',
         this.getErrors(
           error,
@@ -76,7 +77,11 @@ export class TeamcityReporter {
     const reporterOptions = options.reporterOptions.creevey;
 
     runner.on(TEST_EVENTS.TEST_BEGIN, (test: FakeTest) => {
-      console.log(`##teamcity[testStarted name='${this.escape(test.title)}' flowId='${process.pid}']`);
+      console.log(`##teamcity[testStarted name='${this.escape(test.fullTitle())}' flowId='${process.pid}']`);
+    });
+
+    runner.on(TEST_EVENTS.TEST_PASS, (test: FakeTest) => {
+      console.log(`##teamcity[testFinished name='${this.escape(test.fullTitle())}' flowId='${process.pid}']`);
     });
 
     runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest, error: Error) => {
@@ -84,6 +89,7 @@ export class TeamcityReporter {
         if (!image) return;
         const filePath = test
           .titlePath()
+          .slice(0, -1)
           .concat(name == browserName ? [] : [browserName])
           .map(this.escape)
           .join('/');
@@ -97,7 +103,7 @@ export class TeamcityReporter {
             );
             console.log(
               `##teamcity[testMetadata testName='${this.escape(
-                test.title,
+                test.fullTitle(),
               )}' type='image' value='report/${filePath}/${fileName}' flowId='${process.pid}']`,
             );
           });
@@ -107,10 +113,10 @@ export class TeamcityReporter {
       // https://teamcity-support.jetbrains.com/hc/en-us/community/posts/207216829-Count-test-as-successful-if-at-least-one-try-is-successful?page=1#community_comment_207394125
 
       if (reporterOptions.willRetry)
-        console.log(`##teamcity[testFinished name='${this.escape(test.title)}' flowId='${process.pid}']`);
+        console.log(`##teamcity[testFinished name='${this.escape(test.fullTitle())}' flowId='${process.pid}']`);
       else
         console.log(
-          `##teamcity[testFailed name='${this.escape(test.title)}' message='${this.escape(
+          `##teamcity[testFailed name='${this.escape(test.fullTitle())}' message='${this.escape(
             error.message,
           )}' details='${this.escape(error.stack ?? '')}' flowId='${process.pid}']`,
         );