[Feature]: Support component testing

[digitaldoddy]

Given

A project with component tests

When

A component is imported from another file

import TextArea from "../src/components/TextArea";
import { Given, Then, When, expect } from "./fixtures";

Given('Mounted input component', async ({ mount }) => {
  await mount(<TextArea />);
});

Here is the imported component:

// TextArea.jsx
const TextArea = () => {
  return <textarea data-testid="textField" />;
};

export default TextArea;

Then

npx bddgen -c playwright-ct.config.js && npx playwright test -c playwright-ct.config.js

The error is thrown

1) [chromium] › .features-gen/features/input.feature.spec.js:6:7 › input component › Mount component and interact with it › Given Mounted input component 

    Error: page._wrapApiCall: Error: Unregistered component: development_playwright_bdd_component_src_components_TextArea. Following components are registered: 
        at ImportRegistry.resolveImportRef (http://localhost:3100/assets/index-DzBzAE4t.js:16732:13)
        at http://localhost:3100/assets/index-DzBzAE4t.js:16758:50

Expected Result

I would expect the tests to pass like they do if the component is defined in the steps file like so:

// This works ✅
import { Given, Then, When, expect } from "./fixtures";

Given('Mounted input component', async ({ mount }) => {
  await mount(<textarea data-testid="textField" />);
});

Am I missing something here?

Reproduction Demo URL

https://github.com/digitaldoddy/playwright-bdd-component

Environment

Playwright-bdd environment info:

platform: darwin
node: v20.17.0
playwright-bdd: v8.3.1
@playwright/test: v1.54.1
@cucumber/cucumber: none
Playwright config file: playwright-ct.config.js

Priority Level

Medium

[vitalets]

@digitaldoddy thanks for reporting this, I can confirm it's a bug.

Definitely, component tests have never worked this way. The root cause lies at the architectural level:

1. Playwright collects component imports directly from test files and compiles them into a client-side bundle.
2. When using playwright-bdd, the step definitions are loaded outside of the Playwright context, so the components used in steps aren't registered.

There are other limitations to the current approach for component tests, which are discussed in detail here: https://github.com/microsoft/playwright/issues/22302

I'm currently exploring whether it's possible to make this work with playwright-bdd. The goal is to let Playwright know about the components used in step definitions. If you have any ideas, feel free to share.

[vitalets]

I've updated docs that component tests are actually not supported: https://vitalets.github.io/playwright-bdd/#/guides/component-tests

[digitaldoddy]

Thanks for validating! @vitalets

My plan for now is to just serve my component variations using storybook and run Playwright E2E tests on those, which works with playwright-bdd

[vitalets]

My plan for now is to just serve my component variations using storybook and run Playwright E2E tests on those, which works with playwright-bdd

Good idea. Will add it as a recipe.

[kyjo2014]

Thanks for validating! @vitalets

My plan for now is to just serve my component variations using storybook and run Playwright E2E tests on those, which works with playwright-bdd

hello, i have same problem. can storybook work ?

[vitalets]

can storybook work ?

Yes, it should work. There is no guide for that, but if you try - feel free to share your result or issues.