document vue limitations

code/lib/preview-api/src/modules/store/csf/portable-stories.ts

@@ -199,6 +199,8 @@ export function createPlaywrightTest<TFixture extends { extend: any }>(
               
               do:
               await mount(<MyComponent foo="bar"/>)
+
+              More info: https://storybook.js.org/docs/api/portable-stories-playwright
             `);
         }
 

docs/api/portable-stories-playwright.md

@@ -10,6 +10,8 @@ export const SUPPORTED_RENDERERS = ['react', 'vue'];
 
 <Callout variant="info">
 
+The portable stories API for Playwright CT is experimental. Playwright CT itself is also experimental. Breaking changes might occur on either libraries in upcoming releases.
+
 Portable stories are currently only supported in [React](?renderer=react) and [Vue](?renderer=vue) projects.
 
 </Callout>
@@ -38,7 +40,7 @@ Normally, Storybok composes a story and its [annotations](#annotations) automati
 
 <Callout variant="info">
 
-If your stories use template-based Vue components, you may need to alias the `vue` module to resolve correctly in the Playwright CT environment. You can do this via the [`ctViteConfig` property](https://playwright.dev/docs/test-components#i-have-a-project-that-already-uses-vite-can-i-reuse-the-config):
+If your stories use template-based Vue components, you may need to [alias the `vue` module](https://vuejs.org/guide/scaling-up/tooling#note-on-in-browser-template-compilation) to resolve correctly in the Playwright CT environment. You can do this via the [`ctViteConfig` property](https://playwright.dev/docs/test-components#i-have-a-project-that-already-uses-vite-can-i-reuse-the-config):
 
 <details>
 <summary>Example Playwright configuration</summary>
@@ -160,7 +162,7 @@ The code which you write in your Playwright test file is transformed and orchest
 Because of this, you have to compose the stories _in a separate file than your own test file_:
 
 ```ts
-// Button.portable.ts
+// Button.stories.portable.ts
 // Replace <your-renderer> with your renderer, e.g. react, vue3
 import { composeStories } from '@storybook/<your-renderer>';
 
@@ -173,6 +175,8 @@ export default composeStories(stories);
 
 You can then import the composed stories in your Playwright test file, as in the [example above](#createtest).
 
+## createTest
+
 <Callout variant="info">
 
 [Read more about Playwright's component testing](https://playwright.dev/docs/test-components#test-stories).

docs/snippets/react/portable-stories-playwright-ct.ts.mdx

@@ -3,7 +3,7 @@
 import { createTest } from '@storybook/react/experimental-playwright';
 import { test as base } from '@playwright/experimental-ct-react';
 
-import stories from './Button.portable';
+import stories from './Button.stories.portable';
 
 const test = createTest(base);
 
@@ -12,4 +12,11 @@ test('renders primary button', async ({ mount }) => {
   // such as loaders, render, and play function
   await mount(<stories.Primary />);
 });
+
+test('renders primary button with overriden props', async ({ mount }) => {
+  // You can pass custom props to your component via JSX
+  const component = await mount(<stories.Primary label="label from test" />);
+  await expect(component).toContainText('label from test');
+  await expect(component.getByRole('button')).toHaveClass(/storybook-button--primary/);
+});
 ```

docs/snippets/vue/portable-stories-playwright-ct.ts.mdx

@@ -3,13 +3,22 @@
 import { createTest } from '@storybook/vue3/experimental-playwright';
 import { test as base } from '@playwright/experimental-ct-vue';
 
-import stories from './Button.portable';
+import stories from './Button.stories.portable';
 
 const test = createTest(base);
 
+// 👉 Important: Due to current limitations, you can only reference your stories as JSX elements.
+
 test('renders primary button', async ({ mount }) => {
   // The mount function will execute all the necessary steps in the story,
   // such as loaders, render, and play function
-  await mount(stories.Primary);
+  await mount(<stories.Primary />);
+});
+
+test('renders primary button with overriden props', async ({ mount }) => {
+  // You can pass custom props to your component via JSX
+  const component = await mount(<stories.Primary label="label from test" />);
+  await expect(component).toContainText('label from test');
+  await expect(component.getByRole('button')).toHaveClass(/storybook-button--primary/);
 });
 ```

test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.playwright.tsx

@@ -1,7 +1,6 @@
 import { test as base, expect } from '@playwright/experimental-ct-vue';
 import { createTest } from '@storybook/vue3/experimental-playwright';
 import stories, { SingleComposedStory, WithSpanishGlobal } from './Button.stories.portable';
-import Button from './Button.vue';
 
 const test = createTest(base);