スクリーンショットコネクタ

スクリーンショットテストプロセスで使用されるスクリーンショットコネクタモジュールを構成して、テストのキャッシュ、比較、公開のデフォルトの動作を変更できます。コネクタクラスを定義するファイルを作成し、ステンシルテスト構成でそれを指すだけです。

export const config: Config = {
  ...
  testing: {
    screenshotConnector: './connector.js'
  }
};

Writing a connector

To write a connector, import the base ScreenshotConnector class from stencil and extend it:

##コネクタの書き込みコネクタを作成するには、基本の ScreenshotConnectorクラスをステンシルからインポートして拡張します。

const { ScreenshotConnector } = require('@stencil/core/screenshot');

module.exports = class ScreenshotCustomConnector extends ScreenshotConnector {
  ...
};

これを行う方法の良いリファレンスについては、デフォルトの StencilLocalConnector をご覧ください。

メソッド

ステンシルからインポートおよび拡張できるベースコネクタには、上書き可能な次のメソッドがあります。

export interface ScreenshotConnector {
  initBuild(opts: ScreenshotConnectorOptions): Promise<void>;

  pullMasterBuild(): Promise<void>;

  getMasterBuild(): Promise<ScreenshotBuild>;

  getScreenshotCache(): Promise<ScreenshotCache>;

  completeBuild(masterBuild: ScreenshotBuild): Promise<ScreenshotBuildResults>;

  publishBuild(buildResults: ScreenshotBuildResults): Promise<ScreenshotBuildResults>;

  updateScreenshotCache(screenshotCache: ScreenshotCache, buildResults: ScreenshotBuildResults): Promise<ScreenshotCache>;

  generateJsonpDataUris(build: ScreenshotBuild): Promise<void>;
}

インターフェイスへの参照については、ここを参照

initBuild（options）

このメソッドは、コネクタをセットアップし、テストを実行するためのすべての準備をするために呼び出されています。スクリーンショットテストの実行に必要な変数、ファイルパス、およびフォルダー構造の設定を担当します。

自分が何をしているのかがわかっている場合にのみ、このメソッドを上書きしてください。簡単に拡張できるように、必ず super.initBuildを呼び出してください。

pullMasterBuild()

コネクタを初期化し、ビルドを設定した後、このメソッドを実行して、マスタービルドをプルできるようにします。これは、スクリーンショットがテストが実行されているマシン以外の場所に保存されている場合に非常に役立ちます。

getMasterBuild()

テストがセットアップされたので、このメソッドを実行する準備ができて、マスタービルドを返すために呼び出されています。したがって、マスタービルドをファイルからロードする代わりに、APIからフェッチして、このメソッドで返すことができます。

getScreenshotCache()

このメソッドは、現在のビルド結果で拡張されるスクリーンショットキャッシュを返すために呼び出されています。

completeBuild(masterBuild)

テストを実行し、構成されたフォルダーにスクリーンショットを生成した後、このメソッドが呼び出されて、結果のjsonデータが作成されます。この時点で、イメージはそこにあり、マスタービルドはオプションとして渡されています。

自分が何をしているのかがわかっている場合にのみ、このメソッドを上書きしてください。簡単に拡張できるように、必ず super.completeBuildを呼び出してください。

export interface ScreenshotConnectorOptions {
  buildId: string;

  buildMessage: string;

  buildAuthor?: string;

  buildUrl?: string;

  previewUrl?: string;

  appNamespace: string;

  buildTimestamp: number;

  logger: Logger;

  rootDir: string;

  cacheDir: string;

  packageDir: string;

  screenshotDirName?: string;

  imagesDirName?: string;

  buildsDirName?: string;

  currentBuildDir?: string;

  updateMaster?: boolean;

  allowableMismatchedPixels?: number;

  allowableMismatchedRatio?: number;

  pixelmatchThreshold?: number;

  waitBeforeScreenshot?: number;

  pixelmatchModulePath?: string;
}

export interface ScreenshotBuild {
  id: string;

  message: string;

  author?: string;

  url?: string;

  previewUrl?: string;

  appNamespace: string;

  timestamp: number;

  screenshots: Screenshot[];
}

export interface ScreenshotBuildResults {
  appNamespace: string;

  masterBuild: ScreenshotBuild;

  currentBuild: ScreenshotBuild;

  compare: ScreenshotCompareResults;
}

export interface ScreenshotCompareResults {
  id: string;

  a: {
    id: string;
    message: string;
    author: string;
    url: string;
    previewUrl: string;
  };

  b: {
    id: string;
    message: string;
    author: string;
    url: string;
    previewUrl: string;
  };

  timestamp: number;

  url: string;

  appNamespace: string;

  diffs: ScreenshotDiff[];
}

export interface ScreenshotCache {
  timestamp?: number;

  lastBuildId?: string;

  size?: number;

  items?: {
    /**
     * Cache key
     */
    key: string;

    /**
     * Timestamp used to remove the oldest data
     */
    ts: number;

    /**
     * Mismatched pixels
     */
    mp: number;
  }[];
}

export interface Screenshot {
  id: string;

  desc?: string;

  image: string;

  device?: string;

  userAgent?: string;

  width?: number;

  height?: number;

  deviceScaleFactor?: number;

  hasTouch?: boolean;

  isLandscape?: boolean;

  isMobile?: boolean;

  testPath?: string;

  diff?: ScreenshotDiff;
}

export interface ScreenshotDiff {
  mismatchedPixels: number;

  id?: string;

  desc?: string;

  imageA?: string;

  imageB?: string;

  device?: string;

  userAgent?: string;

  width?: number;

  height?: number;

  deviceScaleFactor?: number;

  hasTouch?: boolean;

  isLandscape?: boolean;

  isMobile?: boolean;

  allowableMismatchedPixels: number;

  allowableMismatchedRatio: number;

  testPath?: string;

  cacheKey?: string;
}

Back

Submit an edit

スクリーンショットコネクタ

Writing a connector

メソッド

initBuild（options）

pullMasterBuild()

getMasterBuild()

getScreenshotCache()

completeBuild(masterBuild)

publishBuild(buildResults)

updateScreenshotCache(screenshotCache,buildResults)

インターフェース

Contributors

Contents

スクリーンショットコネクタ

Contributors

Contents

Thanks for your interest!