test(playwright): check story has actually rendered before proceeding (…

…#4760)

e2e/test-utils/storybook.js

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const { expect } = require('@playwright/test');
+
 async function visitStory(page, options) {
   const { component, story, id, globals, args } = options;
   let url = getStoryUrl({
@@ -32,6 +34,7 @@ async function visitStory(page, options) {
   }
 
   await page.goto(url);
+  await expect(page).toContainAStory(options);
 }
 
 function getStoryUrl({ component, story, id }) {

packages/core/.storybook/preview.js

@@ -50,7 +50,7 @@ const decorators = [
     JSON.stringify(args.featureFlags);
 
     return (
-      <div className="preview-position-fix">
+      <div className="preview-position-fix story-wrapper">
         <Style styles={index}>
           {args.featureFlags ? (
             <ActionableNotification

playwright.config.js

@@ -112,4 +112,44 @@ expect.extend({
   },
 });
 
+expect.extend({
+  async toContainAStory(page, options) {
+    let pass;
+    try {
+      /**
+       * This isn't a foolproof way to determine that an actual story
+       * has been rendered, but it should determine if a storybook
+       * error page is present or not.
+       */
+      await expect(page.locator('css=.story-wrapper')).toBeInViewport();
+      pass = true;
+    } catch (e) {
+      pass = false;
+    }
+
+    if (pass) {
+      return {
+        pass: true,
+      };
+    } else {
+      return {
+        pass: false,
+        message:
+          () => `An element with the "story-wrapper" class was not found at url:
+          ${page.url()}
+          The url is probably invalid and does not render a story.
+          Check the url locally, and verify the parameters passed to visitStory are correct.
+          {
+            component: ${options.component} 
+            story: ${options.story} 
+            id: ${options.id} 
+            globals: ${JSON.stringify(options.globals)} 
+            args: ${JSON.stringify(options.args)},
+          }
+          `
+      };
+    }
+  },
+});
+
 module.exports = config;