I'm getting some trouble about storybook-testing

[Sebastien-Ahkrin]

Summary

I'm trying to test if my "color" button inside my RichText is working. For that I have to test if I can click on the Button, open a classic Color Picker, pick a color then write some text. Then, my new text should be write in my specific color. The problem is that in storybook (inside chrome) everything is working good. BUT, with the CLI (and storybook) i have an error.

This is a screen inside chrome

And this inside my CLI

I have so many test like that, who's work in Chrome, but doesn't in my CLI.
I'm using this as deps :

    "@storybook/addon-docs": "^9.0.18",
    "@storybook/react-vite": "^9.0.18",
    "@storybook/test-runner": "^0.23.0",

In Additional information there is my test.

Additional information

export const TestRichTextColor = {
  tags: ['test-storybook', '!autodocs'],
  render: () => (
    <RadixTooltip.TooltipProvider>
      <RichText label="spec" />
    </RadixTooltip.TooltipProvider>
  ),
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const documentCanvas = within(document.documentElement);

    const textColorButton = await canvas.findByLabelText('Change text color');
    const richText = await canvas.findByText('spec');

    await userEvent.click(textColorButton);
    const greenButton = await documentCanvas.findByTitle(`Color: #22c55e`);

    await userEvent.click(greenButton);
    await userEvent.click(richText);

    await userEvent.type(richText, writeText);

    const textColor = await documentCanvas.findByText(writeText);

    await waitFor(
      () => expect(textColor.style.color).toBe('rgb(34, 197, 94)'),
      { timeout: 3000 },
    );
  },
} satisfies StoryObj;

Create a reproduction

No response

[dosubot[bot]]

Hi @Sebastien-Ahkrin! I'm Dosu and I’m helping the storybook team.

This kind of test failure is usually caused by differences in how styles are applied and detected between the browser UI and the CLI/headless environment. In Storybook's own E2E and integration tests, style assertions always use getComputedStyle(element).color instead of element.style.color, because computed style reflects the actual rendered CSS, including classes and inheritance, while .style.color only checks for inline styles. This difference often causes tests to pass in Chrome but fail in the CLI or CI environments where rendering can differ slightly (example from Storybook E2E tests).

Try updating your assertion like this:

await waitFor(() => {
  expect(getComputedStyle(textColor).color).toBe('rgb(34, 197, 94)');
}, { timeout: 3000 });

Also, make sure all userEvent actions are awaited, and use async queries like findByText or findByRole everywhere possible. This helps avoid timing issues that are more common in headless/CLI environments (discussion).

If you still see discrepancies, check that all global styles, fonts, and assets are loaded identically in both environments, and consider comparing DOM snapshots or enabling debug logging to spot subtle differences (discussion).

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[Sebastien-Ahkrin]

@dosu I've already changed my code to use getComputedStyle. But now I have a new problems. Sometime the code is working in my CI, sometime not. Same error ..

[dosubot[bot]]

Flaky results like this in CI are usually caused by timing issues, asset loading delays, or subtle environment differences between local and headless runs. Here’s a checklist to help stabilize your tests:

• Make sure every Testing Library query is async (use findBy... instead of getBy...), and always await user events and queries. This helps avoid race conditions where the DOM or styles aren’t ready yet example.
• Use getComputedStyle(element).color for assertions, not .style.color, since only computed style reflects the actual rendered color.
• Ensure all global styles, fonts, and assets are loaded identically in both environments. Missing CSS or fonts in CI can cause computed styles to be empty discussion.
• Double-check that .storybook/vitest.setup.ts and .storybook/preview.ts have the same config and annotations.
• If you’re running tests in multiple browsers, try running with only Chromium to see if the issue is browser-specific.
• Use the latest Playwright Docker image for your CI runner for consistent results docs.
• If possible, add debug logging or snapshot the DOM/computed styles in failing runs to compare with passing ones.

If you’re still seeing flakiness, let me know what CI provider you’re using and if you have logs or screenshots from failed runs—sometimes the actual computed value or a missing asset gives a clue.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}