get checkbox with data attr vitest addon

[meeshan-dev]

@dosu, storybook vitest how to get checkbox with data attr data-select-all

[dosubot[bot]]

You can select a checkbox with the data attribute data-select-all in a Storybook Vitest test using standard DOM methods on the story's canvas element. For example:

import { within, waitFor } from 'storybook/test';

play: async ({ canvasElement }) => {
  // Wait for the checkbox to be rendered if needed
  await waitFor(() => {
    const checkbox = canvasElement.querySelector('[data-select-all]');
    if (!checkbox) throw new Error('Checkbox not found');
  });

  // Get the checkbox
  const checkbox = canvasElement.querySelector('[data-select-all]');
  // You can now interact with or assert on the checkbox
}

If you use Testing Library queries, you can also do:

const canvas = within(canvasElement);
const checkbox = await canvas.getByRole('checkbox', { name: /select all/i });
// Or by test id if you use data-testid
// const checkbox = await canvas.getByTestId('select-all');

Using waitFor is recommended to ensure the element is present before interacting with it. For more details, see examples in Storybook's Checkbox stories and usage of canvasElement in tests.

To reply, just mention @dosu.

---

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

   

[meeshan-dev]

@dosu, i am using playwright with vitest, why in storybook/test there is @testing-library/**

[dosubot[bot]]

storybook/test includes @testing-library/* because its main purpose is interaction testing inside Storybook stories, not end-to-end automation. These utilities let you query and interact with the rendered DOM in a way that matches how users interact with your UI, and they power features like the Interactions panel for debugging. Even if you use Playwright with Vitest, storybook/test relies on Testing Library for querying and simulating user events within stories, while Playwright is typically used for full end-to-end tests outside Storybook’s play functions or interaction tests. For more details, see the storybook/test README and Storybook interaction testing docs.

To reply, just mention @dosu.

---

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

   

[meeshan-dev]

@dosu so interections mean, test gonna run in browser, if i have opened storybook server in chrome iam testing chrome, in firefox, and in webkit i am responsible to test on every browser manually

[dosubot[bot]]

Storybook interaction tests (using play functions and the Interactions panel) run in the browser where you open Storybook, so if you open Storybook in Chrome, you're testing in Chrome; if you open it in Firefox, you're testing in Firefox. This is useful for manual debugging and visual checks.

For automated cross-browser testing, you don't need to manually open Storybook in every browser. Use the Storybook test runner with Playwright to run your interaction tests in multiple browsers automatically. You can specify which browsers to test (chromium, firefox, webkit) using the --browsers CLI option, for example:

npx test-storybook --browsers chromium firefox webkit

This will launch Storybook in each browser and run your tests for you. More details in the Storybook test runner docs.

To reply, just mention @dosu.

---

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