"this looks slightly promising" 🤞

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

@@ -114,6 +114,14 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
         : undefined,
     }
   );
+  console.log('LOG: I am globalizing globals 🌎');
+  globalThis.__STORYBOOK_TESTSTUFF = {
+    ...globalThis.__STORYBOOK_TESTSTUFF,
+    [storyName]: {
+      load: composedStory.load,
+      play: composedStory.play,
+    },
+  };
 
   return composedStory;
 }

test-storybooks/portable-stories-react/src/stories/Button.playwright.tsx

@@ -13,16 +13,20 @@ import stories from './Button.portable';
 test('renders primary button', async ({ mount }) => {
   const component = await mount(<stories.CSF3Primary />);
   await expect(component).toContainText('Decorator')
-  // const element = await component.evaluate((element) => {
-  //   // You can interact with the element directly here
-  //   return element; // This returns the DOM element to Playwright's context
-  // });
-
-  // console.log({bla: stories.CSF3InputFieldFilled  })
-  // await stories.CSF3InputFieldFilled.play({ canvasElement: element as HTMLElement });
-  // expect(button).toContainText('Hello world')
-  // const buttonElement = screen.getByText(/Hello world/i);
-  // expect(buttonElement).not.toBeNull();
+});
+
+test.only('apply story loaders', async ({ mount, page }) => {
+
+
+  // await stories.LoaderStory.load();
+  await mount(<stories.CSF3InputFieldFilled />);
+    // console.log({loaderStory: globalThis.__STORYBOOK_TESTSTUFF })
+    await page.evaluate(async() => {
+      console.log('LOG: stuff', { __STORYBOOK_TESTSTUFF: globalThis.__STORYBOOK_TESTSTUFF})
+      const story = globalThis.__STORYBOOK_TESTSTUFF['CSF3InputFieldFilled']
+      console.log({story})
+      await story.play({ canvasElement: document.body });  
+    })
 });
 
 // test('reuses args from composed story', ({ mount }) => {

test-storybooks/portable-stories-react/src/stories/Button.portable.ts

@@ -1,4 +1,4 @@
 import { composeStories } from '@storybook/react';
 import * as stories from './Button.stories';
 
-export default composeStories(stories);
+export default composeStories(stories);

test-storybooks/portable-stories-react/src/stories/Button.stories.tsx

@@ -125,4 +125,4 @@ export const LoaderStory: CSF3Story<{ spyFn: (val: string) => string }> = {
   play: async () => {
     expect(spyFn).toHaveBeenCalledWith('foo');
   },
-};
+};