使用故事书背景进行颜色转换的笑话快照

Question

我有一个项目使用故事书背景插件来测试明暗模式组件。但是尽管组件看起来相同，但一些暗模式测试似乎失败了。我深入研究，当我在油漆中使用颜色选择器选择背景颜色时，所有测试都有不同的黑色阴影。虽然它已针对“暗”模式设置为#000000，但结果中的背景颜色通常为 rgb(2, 2, 2) 或 rgb(4, 4, 4) 或 rgb(8, 8, 8)。

这导致测试失败。这似乎是完全随机的。运行测试后，某些组件快照具有 rgb(2,2,2)，我什么也不做，然后再次运行它及其 rgb(8, 8, 8)。

是什么原因导致它似乎在浏览器故事书中完美呈现。

这里是片段

.storybook/preview.js

import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";
setCompodocJson(docJson);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: { inlineStories: true },
  design: {
    type: 'figma',
    // a personal access token can be generated on figma https://www.figma.com/developers/api#access-tokens
    accessToken: '<insert-your-figma-token-here>',
  },
  backgrounds: {
    default: 'light',
    values: [
      {
        name: 'light',
        value: '#ffffff',
      },
      {
        name: 'dark',
        value: '#000000',
      },
    ],
  },
}

.storybook/main.js

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-backgrounds",
    'storybook-addon-designs',
  ],
  "framework": "@storybook/angular",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },

   managerWebpack: (config, options) => {
    options.cache.set = () => Promise.resolve();
    return config;
  },
}

test.stories.js

export const smallDarkRadioButton = Template.bind({})
smallDarkRadioButton.parameters = { backgrounds: { default: 'dark' } }
smallDarkRadioButton.args = {
    size: 'small',
    disabled: false,
    label: 'Small Radio Button',
    rdName: 'rdSmall',
    rdValue: 'Small Radio Button',
    checked: false,
    colorTheme: 'dark'
}

Answer 1

假设您正在使用

page.screenshot()

拍摄图像，此选项将使它从快照中省略故事的背景，因此停止失败：

const image = await page.screenshot({ omitBackground: true });

不要忘记在此更改后重建 Storybook。