creevey 0.10.0-beta.43 → 0.10.0-beta.45

package/src/server/playwright/reporter.ts

@@ -0,0 +1,386 @@
+import type { Reporter, FullConfig, Suite, TestCase, TestResult, TestStep } from '@playwright/test/reporter';
+import path from 'path';
+import fs from 'fs/promises';
+import { TestsManager } from '../master/testsManager.js';
+import { CreeveyApi } from '../master/api.js';
+import { ServerTest, TestMeta, TestStatus, TestResult as CreeveyTestResult } from '../../types.js';
+import { copyStatics } from '../utils.js';
+
+/**
+ * Simple async queue to handle operations in sequence without returning promises
+ * from reporter methods that should be synchronous
+ */
+class AsyncQueue {
+  private queue: Promise<void>;
+
+  constructor() {
+    this.queue = Promise.resolve();
+  }
+
+  /**
+   * Add an async operation to the queue
+   * @param operation Async operation to execute
+   */
+  enqueue(operation: () => Promise<void>): void {
+    this.queue = this.queue.then(operation).catch((error: unknown) => {
+      console.error(`Error in async queue: ${error instanceof Error ? error.message : String(error)}`);
+    });
+  }
+
+  /**
+   * Wait for all operations in the queue to complete
+   */
+  async waitForCompletion(): Promise<void> {
+    await this.queue;
+  }
+}
+
+/**
+ * CreeveyPlaywrightReporter is a Playwright reporter that integrates with Creevey
+ * to provide visual testing capabilities and use Creevey's UI for reviewing and approving screenshots.
+ */
+export class CreeveyPlaywrightReporter implements Reporter {
+  private testsManager: TestsManager;
+  private api: CreeveyApi | null = null;
+  private reportDir: string;
+  private screenDir: string;
+  private port: number;
+  private debug: boolean;
+  private startServer: ((reportDir: string, port: number, uiEnabled: boolean) => (api: CreeveyApi) => void) | null =
+    null;
+  private testIdMap = new Map<string, string>(); // Maps Playwright test IDs to Creevey test IDs
+  private asyncQueue = new AsyncQueue();
+
+  /**
+   * Creates a new instance of the CreeveyPlaywrightReporter
+   * @param options Configuration options for the reporter
+   */
+  constructor(options?: { reportDir?: string; screenDir?: string; port?: number; debug?: boolean }) {
+    this.reportDir = options?.reportDir ?? path.join(process.cwd(), 'report');
+    this.screenDir = options?.screenDir ?? path.join(process.cwd(), 'images');
+    this.port = options?.port ?? 3000;
+    this.debug = options?.debug ?? false;
+
+    // Initialize TestsManager
+    this.testsManager = new TestsManager(this.screenDir, this.reportDir);
+  }
+
+  /**
+   * Called when the test run starts
+   * @param config Playwright configuration
+   * @param suite Test suite information
+   */
+  onBegin(_config: FullConfig, _suite: Suite): void {
+    this.logDebug('CreeveyPlaywrightReporter started');
+
+    // Use the async queue to handle initialization without returning a promise
+    this.asyncQueue.enqueue(async () => {
+      try {
+        // Dynamically import the modules to avoid circular dependencies
+        const { start } = await import('../master/server.js');
+        this.startServer = start;
+
+        // Initialize report directory
+        try {
+          await fs.mkdir(this.reportDir, { recursive: true });
+          await copyStatics(this.reportDir);
+        } catch (error) {
+          this.logError(
+            `Failed to initialize report directory: ${error instanceof Error ? error.message : String(error)}`,
+          );
+        }
+
+        // Start server API
+        try {
+          const resolveApi = this.startServer(this.reportDir, this.port, true);
+
+          // Create and connect the API
+          this.api = new CreeveyApi(this.testsManager);
+          resolveApi(this.api);
+
+          console.log(`Creevey report server started at http://localhost:${this.port}`);
+        } catch (error) {
+          this.logError(`Could not start Creevey server: ${error instanceof Error ? error.message : String(error)}`);
+          console.log('Screenshots will still be captured but UI will not be available');
+        }
+      } catch (error) {
+        this.logError(
+          `Error in Creevey reporter initialization: ${error instanceof Error ? error.message : String(error)}`,
+        );
+      }
+    });
+  }
+
+  /**
+   * Called when a test begins
+   * @param test Test case information
+   * @param result Test result (initially empty)
+   */
+  onTestBegin(test: TestCase, _result: TestResult): void {
+    try {
+      // Map test to Creevey test format
+      const creeveyTest = this.mapToCreeveyTest(test);
+      if (!creeveyTest) return;
+
+      // Create a mapping from Playwright test ID to Creevey test ID
+      this.testIdMap.set(test.id, creeveyTest.id);
+
+      // Update test status to running
+      this.testsManager.updateTestStatus(creeveyTest.id, 'running');
+
+      this.logDebug(`Test started: ${test.title} (${creeveyTest.id})`);
+    } catch (error) {
+      this.logError(`Error in onTestBegin: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  }
+
+  /**
+   * Called when a test step begins
+   * @param test Test case information
+   * @param result Test result
+   * @param step Test step information
+   */
+  onStepBegin(test: TestCase, _result: TestResult, step: TestStep): void {
+    if (this.debug) {
+      this.logDebug(`Step started: ${step.title} in test: ${test.title}`);
+    }
+  }
+
+  /**
+   * Called when a test step ends
+   * @param test Test case information
+   * @param result Test result
+   * @param step Test step information
+   */
+  onStepEnd(_test: TestCase, _result: TestResult, step: TestStep): void {
+    try {
+      // If step has attachments, process them
+      if (step.attachments.length > 0) {
+        this.logDebug(`Processing ${step.attachments.length} attachments from step: ${step.title}`);
+
+        // We'll process attachments in onTestEnd for simplicity in this initial implementation
+      }
+    } catch (error) {
+      this.logError(`Error in onStepEnd: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  }
+
+  /**
+   * Called when a test ends
+   * @param test Test case information
+   * @param result Test result
+   */
+  onTestEnd(test: TestCase, result: TestResult): void {
+    const creeveyTestId = this.testIdMap.get(test.id);
+
+    // Use the async queue to handle result processing without returning a promise
+    this.asyncQueue.enqueue(async () => {
+      try {
+        // Process test results and screenshots
+        await this.processTestResult(test, result);
+
+        if (creeveyTestId) {
+          this.logDebug(`Test ended: ${test.title} (${creeveyTestId}) with status: ${result.status}`);
+        }
+      } catch (error) {
+        this.logError(`Error in onTestEnd: ${error instanceof Error ? error.message : String(error)}`);
+      }
+    });
+  }
+
+  /**
+   * Called when the test run ends
+   * @param result The overall test run result
+   */
+  onEnd(result: { status: 'passed' | 'failed' | 'timedout' | 'interrupted' }): void {
+    // Use the async queue to handle final operations without returning a promise
+    this.asyncQueue.enqueue(async () => {
+      try {
+        // Wait for all previous operations to complete
+        await this.asyncQueue.waitForCompletion();
+
+        // Save test data
+        await this.testsManager.saveTestData();
+
+        this.logDebug(`Test run ended with status: ${result.status}`);
+        console.log(`Visual test results available at http://localhost:${this.port}`);
+
+        // No cleanup of server here as it needs to stay running for the user to view results
+      } catch (error) {
+        this.logError(`Error during reporter cleanup: ${error instanceof Error ? error.message : String(error)}`);
+      }
+    });
+  }
+
+  /**
+   * Maps a Playwright test to a Creevey test format
+   * @param test Playwright test case
+   * @returns Creevey test object or null if mapping fails
+   */
+  private mapToCreeveyTest(test: TestCase): ServerTest | null {
+    try {
+      // Try to extract Creevey metadata from annotations
+      let testName = test.title;
+      let browser = 'chromium'; // Default browser
+      let storyPath: string[] = [];
+
+      const creeveyAnnotation = test.annotations.find((a) => a.type === 'creevey');
+      if (creeveyAnnotation?.description) {
+        try {
+          const metadata = JSON.parse(creeveyAnnotation.description) as {
+            testName?: string;
+            browser?: string;
+            storyPath?: string[];
+          };
+          if (metadata.testName) testName = metadata.testName;
+          if (metadata.browser) browser = metadata.browser;
+          if (metadata.storyPath) storyPath = metadata.storyPath;
+        } catch (e) {
+          this.logError(`Failed to parse Creevey metadata: ${e instanceof Error ? e.message : String(e)}`);
+        }
+      }
+
+      // If no explicit storyPath, use the project and file path
+      if (storyPath.length === 0) {
+        const projectName = test.parent.project()?.name;
+        const titlePath = test.titlePath().slice(0, -1); // Exclude the test title itself
+        storyPath = projectName ? [projectName, ...titlePath] : titlePath;
+      }
+
+      // Generate a unique test ID
+      const testId = `${storyPath.join('/')}/${testName}/${browser}`;
+
+      // Create the test metadata
+      const testMeta: TestMeta = {
+        id: testId,
+        storyPath,
+        browser,
+        testName,
+        storyId: storyPath.join('/'),
+      };
+
+      // Create a stub ServerTest object
+      // This is missing the story and fn properties which would be used in a real Creevey test
+      // However, for our reporter purposes, we just need the metadata
+      const serverTest: ServerTest = {
+        ...testMeta,
+        story: {
+          parameters: {},
+          initialArgs: {},
+          argTypes: {},
+          component: '',
+          componentId: '',
+          name: '',
+          tags: [],
+          title: '',
+          kind: '',
+          id: '',
+          story: '',
+        }, // Placeholder
+        fn: async () => {
+          /* Empty function as placeholder */
+        }, // Placeholder
+      };
+
+      return serverTest;
+    } catch (error) {
+      this.logError(`Error mapping test to Creevey format: ${error instanceof Error ? error.message : String(error)}`);
+      return null;
+    }
+  }
+
+  /**
+   * Process a test result and any attachments
+   * @param test Playwright test case
+   * @param result Playwright test result
+   */
+  private async processTestResult(test: TestCase, result: TestResult): Promise<void> {
+    const creeveyTestId = this.testIdMap.get(test.id);
+    if (!creeveyTestId) {
+      this.logError(`No Creevey test ID found for test: ${test.title}`);
+      return;
+    }
+
+    // Determine test status
+    let status: TestStatus;
+    switch (result.status) {
+      case 'passed':
+        status = 'success';
+        break;
+      case 'failed':
+      case 'timedOut':
+        status = 'failed';
+        break;
+      default:
+        status = 'unknown';
+    }
+
+    // Process attachments
+    const images: Record<string, { actual: string }> = {};
+    const attachmentPaths: string[] = [];
+
+    if (result.attachments.length > 0) {
+      await fs.mkdir(path.join(this.reportDir, creeveyTestId), { recursive: true });
+
+      for (const attachment of result.attachments) {
+        // Only process image attachments
+        if (!attachment.contentType.startsWith('image/')) continue;
+
+        try {
+          const imageName = attachment.name || `screenshot-${Date.now()}`;
+          const imagePath = path.join(creeveyTestId, `${imageName}.png`);
+          const fullImagePath = path.join(this.reportDir, imagePath);
+
+          // Ensure directory exists
+          await fs.mkdir(path.dirname(fullImagePath), { recursive: true });
+
+          // Handle either buffer or path-based attachments
+          if (attachment.body) {
+            await fs.writeFile(fullImagePath, attachment.body);
+          } else if (attachment.path) {
+            await fs.copyFile(attachment.path, fullImagePath);
+          }
+
+          // Add to images for the test result
+          images[imageName] = { actual: `${imageName}.png` };
+          attachmentPaths.push(imagePath);
+
+          this.logDebug(`Saved screenshot: ${imageName} for test: ${test.title}`);
+        } catch (error) {
+          this.logError(`Failed to process attachment: ${error instanceof Error ? error.message : String(error)}`);
+        }
+      }
+    }
+
+    // Update test status and result
+    const testResult: CreeveyTestResult = {
+      status: status === 'success' ? 'success' : 'failed',
+      retries: result.retry,
+      images,
+      error: result.error?.message ?? undefined,
+      duration: result.duration,
+      attachments: attachmentPaths,
+      browserName: test.parent.project()?.name ?? 'unknown',
+    };
+
+    this.testsManager.updateTestStatus(creeveyTestId, status, testResult);
+  }
+
+  /**
+   * Logs a debug message if debug mode is enabled
+   * @param message Message to log
+   */
+  private logDebug(message: string): void {
+    if (this.debug) {
+      console.log(`[Creevey Reporter] ${message}`);
+    }
+  }
+
+  /**
+   * Logs an error message
+   * @param message Error message to log
+   */
+  private logError(message: string): void {
+    console.error(`[Creevey Reporter] ERROR: ${message}`);
+  }
+}

package/src/server/selenium/internal.ts

@@ -373,12 +373,32 @@ export class InternalBrowser {
   }
 
   async loadStoriesFromBrowser(): Promise<StoriesRaw> {
-    const stories = await this.#browser.executeAsyncScript<StoriesRaw | undefined>(function (
-      callback: (stories: StoriesRaw | undefined) => void,
+    const result = await this.#browser.executeAsyncScript<
+      [error?: { message: string; stack?: string } | null, stories?: StoriesRaw]
+    >(function (
+      callback: (response: [error?: { message: string; stack?: string } | null, stories?: StoriesRaw]) => void,
     ) {
-      void window.__CREEVEY_GET_STORIES__().then(callback);
+      window
+        .__CREEVEY_GET_STORIES__()
+        .then((stories) => {
+          callback([null, stories]);
+        })
+        .catch((error: unknown) => {
+          const errorInfo = {
+            message: error instanceof Error ? error.message : String(error),
+            stack: error instanceof Error ? error.stack : undefined,
+          };
+          callback([errorInfo]);
+        });
     });
 
+    const [error, stories] = result;
+
+    if (error) {
+      const errorObj = new Error(error.message);
+      if (error.stack) errorObj.stack = error.stack;
+      throw errorObj;
+    }
     if (!stories) throw new Error("Can't get stories, it seems creevey or storybook API isn't available");
 
     return stories;

package/src/server/selenium/selenoid.ts

@@ -7,6 +7,7 @@ import { Config, BrowserConfigObject } from '../../types.js';
 import { downloadBinary, getCreeveyCache, killTree } from '../utils.js';
 import { pullImages, runImage } from '../docker.js';
 import { subscribeOn } from '../messages.js';
+import { removeWorkerContainer } from '../worker/context.js';
 
 async function createSelenoidConfig(
   browsers: BrowserConfigObject[],
@@ -147,5 +148,9 @@ export async function startSelenoidContainer(config: Config, debug: boolean): Pr
     },
   };
 
+  subscribeOn('shutdown', () => {
+    void removeWorkerContainer();
+  });
+
   return runImage(selenoidImage, ['-limit', String(limit)], selenoidOptions, debug);
 }

package/src/server/shutdown.ts

@@ -0,0 +1,19 @@
+import cluster from 'cluster';
+import { subscribeOn } from './messages.js';
+import { shutdownOnException, isShuttingDown } from './utils.js';
+
+if (cluster.isWorker) {
+  subscribeOn('shutdown', () => {
+    isShuttingDown.current = true;
+  });
+}
+
+process.on('uncaughtException', shutdownOnException);
+process.on('unhandledRejection', shutdownOnException);
+// TODO SIGINT Stuck with selenium
+process.on('SIGINT', () => {
+  if (isShuttingDown.current) {
+    process.exit(-1);
+  }
+  isShuttingDown.current = true;
+});

package/src/server/stories.ts

@@ -1,5 +1,3 @@
-import path from 'path';
-import { mkdirSync, writeFileSync } from 'fs';
 import { createHash } from 'crypto';
 import _ from 'lodash';
 import type {
@@ -12,7 +10,7 @@ import type {
   CreeveyTestFunction,
   CreeveyTestContext,
 } from '../types.js';
-import { isDefined, isFunction } from '../types.js';
+import { isDefined } from '../types.js';
 import { shouldSkip } from './utils.js';
 
 function storyTestFabric(delay?: number, testFn?: CreeveyTestFunction) {
@@ -129,12 +127,3 @@ export async function loadTestsFromStories(
 
   return tests;
 }
-
-export function saveTestsJson(tests: Record<string, unknown>, dstPath: string = process.cwd()): void {
-  mkdirSync(dstPath, { recursive: true });
-  writeFileSync(
-    path.join(dstPath, 'tests.json'),
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    JSON.stringify(tests, (_, value) => (isFunction(value) ? value.toString() : value), 2),
-  );
-}

package/src/server/ui-update.ts

@@ -0,0 +1,46 @@
+import { Config } from '../types.js';
+import { logger } from './logger.js';
+import { TestsManager } from './master/testsManager.js';
+import { start as startServer } from './master/server.js';
+import { CreeveyApi } from './master/api.js';
+
+/**
+ * UI Update Mode implementation.
+ * This mode allows users to review and approve screenshots from the browser interface.
+ * It combines the functionality of both --ui and --update flags.
+ *
+ * @param config Creevey configuration
+ * @param port Port to run the server on
+ */
+export async function uiUpdate(config: Config, port: number): Promise<void> {
+  logger().info('Starting UI Update Mode');
+
+  // Initialize TestsManager with the configured directories
+  const testsManager = new TestsManager(config.screenDir, config.reportDir);
+
+  // Load tests from the report
+  const testsFromReport = testsManager.loadTestsFromReport();
+
+  if (Object.keys(testsFromReport).length === 0) {
+    logger().warn('No tests found in report. Run tests first to generate report data.');
+    return;
+  }
+
+  // Set tests in the manager
+  testsManager.updateTests(testsFromReport);
+
+  // Start API server with UI enabled
+  const resolveApi = startServer(config.reportDir, port, true);
+
+  // Initialize API
+  const api = new CreeveyApi(testsManager);
+
+  // Resolve the API for the server
+  resolveApi(api);
+
+  // Save test data to make it available for the UI
+  await testsManager.saveTestData();
+
+  logger().info(`UI Update Mode started on http://localhost:${port}/`);
+  logger().info('You can now review and approve screenshots from the browser.');
+}

package/src/server/utils.ts

@@ -1,16 +1,17 @@
 import fs from 'fs';
-import https from 'https';
+import path from 'path';
 import http from 'http';
+import https from 'https';
+import assert from 'assert';
 import cluster from 'cluster';
-import { dirname } from 'path';
+import pidtree from 'pidtree';
 import { fileURLToPath, pathToFileURL } from 'url';
 import { register as esmRegister } from 'tsx/esm/api';
 import { register as cjsRegister } from 'tsx/cjs/api';
 import { SkipOptions, SkipOption, isDefined, TestData, noop, ServerTest, Worker } from '../types.js';
-import { emitShutdownMessage, sendShutdownMessage } from './messages.js';
+import { emitShutdownMessage, emitWorkerMessage, sendShutdownMessage } from './messages.js';
 import { LOCALHOST_REGEXP } from './webdriver.js';
-import assert from 'assert';
-import pidtree from 'pidtree';
+import { logger } from './logger.js';
 
 const importMetaUrl = pathToFileURL(__filename).href;
 
@@ -89,6 +90,18 @@ export function shouldSkipByOption(
   return skipByBrowser && skipByKind && skipByStory && skipByTest && reason;
 }
 
+export function shutdownOnException(reason: unknown): void {
+  if (isShuttingDown.current) return;
+
+  const error = reason instanceof Error ? (reason.stack ?? reason.message) : (reason as string);
+
+  logger().error(error);
+
+  process.exitCode = -1;
+  if (cluster.isWorker) emitWorkerMessage({ type: 'error', payload: { subtype: 'unknown', error } });
+  if (cluster.isPrimary) void shutdownWorkers();
+}
+
 export async function shutdownWorkers(): Promise<void> {
   isShuttingDown.current = true;
   await Promise.all(
@@ -151,7 +164,7 @@ export function resolvePlaywrightBrowserType(browserName: string): (typeof brows
 
 export async function getCreeveyCache(): Promise<string | undefined> {
   const { default: findCacheDir } = await import('find-cache-dir');
-  return findCacheDir({ name: 'creevey', cwd: dirname(fileURLToPath(importMetaUrl)) });
+  return findCacheDir({ name: 'creevey', cwd: path.dirname(fileURLToPath(importMetaUrl)) });
 }
 
 export async function runSequence(seq: (() => unknown)[], predicate: () => boolean): Promise<boolean> {
@@ -242,8 +255,8 @@ const [nodeVersion] = process.versions.node.split('.').map(Number);
 export async function loadThroughTSX<T>(
   callback: (load: (modulePath: string) => Promise<T>) => Promise<T>,
 ): Promise<T> {
-  // TODO Check if it work in node18 and type: 'module'
-  const unregister = nodeVersion > 18 ? esmRegister() : cjsRegister();
+  const unregisterESM = nodeVersion > 18 ? esmRegister() : noop;
+  const unregisterCJS = cjsRegister();
 
   const result = await callback((modulePath) =>
     nodeVersion > 18
@@ -254,7 +267,9 @@ export async function loadThroughTSX<T>(
 
   // NOTE: `unregister` type is `(() => Promise<void>) | (() => void)`
   // eslint-disable-next-line @typescript-eslint/await-thenable, @typescript-eslint/no-confusing-void-expression
-  await unregister();
+  await unregisterCJS();
+  // eslint-disable-next-line @typescript-eslint/await-thenable, @typescript-eslint/no-confusing-void-expression
+  await unregisterESM();
 
   return result;
 }
@@ -292,3 +307,19 @@ export function waitOnUrl(waitUrl: string, timeout: number, delay: number) {
     ),
   );
 }
+
+/**
+ * Copies static assets to the report directory
+ * @param reportDir Directory where the report will be generated
+ */
+export async function copyStatics(reportDir: string): Promise<void> {
+  const clientDir = path.join(path.dirname(fileURLToPath(importMetaUrl)), '../../dist/client/web');
+  const assets = (await fs.promises.readdir(path.join(clientDir, 'assets'), { withFileTypes: true }))
+    .filter((dirent) => dirent.isFile())
+    .map((dirent) => dirent.name);
+  await fs.promises.mkdir(path.join(reportDir, 'assets'), { recursive: true });
+  await fs.promises.copyFile(path.join(clientDir, 'index.html'), path.join(reportDir, 'index.html'));
+  for (const asset of assets) {
+    await fs.promises.copyFile(path.join(clientDir, 'assets', asset), path.join(reportDir, 'assets', asset));
+  }
+}

package/src/server/worker/start.ts

@@ -218,7 +218,7 @@ export async function start(browser: string, gridUrl: string, config: Config, op
           browserName: baseContext.browserName,
           workerId: process.pid,
           images: imagesContext.images,
-          error: serializeError(error),
+          error: error ? serializeError(error) : undefined,
           duration,
           attachments: imagesContext.attachments,
           retries: message.payload.retries,

package/src/types.ts

@@ -268,20 +268,17 @@ export interface Config {
   /**
    * Creevey has two built-in stories providers.
    *
-   * `nodejsStoriesProvider` - The first one is used by default except if CSFv3 is enabled in Storybook.
-   * This provider builds and runs storybook in nodejs env, that allows write interaction tests by using Selenium API.
-   * The downside is it depends from project build specific and slightly increases init time.
-   *
-   * `browserStoriesProvider` - The second one is used by default with CSFv3 storybook feature.
-   * It load stories from storybook which is running in browser, like storyshots or loki do it.
+   * `browserStoriesProvider` - Extracts stories directly from the Storybook UI. It loads stories from storybook which is running in browser, like storyshots or loki do it.
    * The downside of this, you can't use interaction tests in Creevey, unless you use CSFv3.
    * Where you can define `play` method for each story
    *
+   * `hybridStoriesProvider` - Combines stories from Storybook with tests from separate files. This is the default provider used in the configuration.
+   *
    * Usage
    * ``` typescript
-   * import { nodejsStoriesProvider as provider } from 'creevey'
-   * // or
    * import { browserStoriesProvider as provider } from 'creevey'
+   * // or
+   * import { hybridStoriesProvider as provider } from 'creevey'
    *
    * // Creevey config
    * module.exports = {
@@ -353,7 +350,15 @@ export interface Options {
   _: string[];
   config?: string;
   port: number;
+  /**
+   * Run in UI mode with web interface for reviewing test results
+   * When used with `update` flag, enables UI Update Mode for approving screenshots
+   */
   ui: boolean;
+  /**
+   * Run in update mode to approve failed tests
+   * When used with `ui` flag, enables UI Update Mode for approving screenshots from browser
+   */
   update: boolean | string;
   debug: boolean;
   trace: boolean;
@@ -529,6 +534,7 @@ export interface CreeveyStatus {
   isRunning: boolean;
   tests: Partial<Record<string, TestData>>;
   browsers: string[];
+  isUpdateMode: boolean;
 }
 
 export interface CreeveyUpdate {