0

伙计们！我有一个带有 storyshots 插件的故事书项目。我配置 storyshots 来创建我的组件的屏幕截图。但我遇到了这个问题。测试屏幕截图在不同的机器 (OS) 上看起来有些不同。

这就是为什么，我在想，创建一个 docker 容器来链接 chrome 浏览器中的故事书（在容器内）并在那里创建屏幕截图。

有人可以帮助我创建这样的流程吗？我正在使用 storybook v.6.0.16，storyshots 配置文件如下所示：

import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
import {imageSnapshot} from '@storybook/addon-storyshots-puppeteer';

const storybookUrl = process.env.CI ? path.resolve('storybook-static') : 'http://localhost:6006';
const encoding: 'base64' = 'base64';

const getScreenshotOptions = () => {
    return {
        encoding, // encoding: 'base64' is a property required by puppeteer
        fullPage: false // Do not take the full page screenshot. Default is 'true' in Storyshots.
    };
};

const getMatchOptions = ({context: {story}}) => {
  ...           
};

const beforeScreenshot = async () => {
    return new Promise(resolve => setTimeout(() => resolve(), 600));
};

const afterScreenshot = () => {
    return new Promise(resolve => setTimeout(() => resolve(), 600));
};

export const storyshots = initStoryshots({
    suite: 'Image storyshots',
    test: imageSnapshot({
        storybookUrl,
        getScreenshotOptions,
        beforeScreenshot,
        afterScreenshot,
        getMatchOptions
    })
});
4

0 回答 0