Merge pull request #58 from storybookjs/feat/add-url-flag

feat: add url flag

README.md

@@ -88,9 +88,11 @@ yarn storybook
 yarn test-storybook
 ```
 
-> **NOTE:** The runner assumes that your Storybook is running on port `6006`. If you're running Storybook in another port, set the TARGET_URL before running your command like:
+> **NOTE:** The runner assumes that your Storybook is running on port `6006`. If you're running Storybook in another port, either use --url or set the TARGET_URL before running your command like:
 >
 > ```jsx
+> yarn test-storybook --url http://localhost:9009
+> or
 > TARGET_URL=http://localhost:9009 yarn test-storybook
 > ```
 
@@ -106,6 +108,7 @@ Usage: test-storybook [options]
 | `-s`, `--stories-json`          | Run in stories json mode (requires a compatible Storybook) <br/>`test-storybook --stories-json`                                  |
 | `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`test-storybook -c .storybook`                                        |
 | `--watch`                       | Run in watch mode <br/>`test-storybook --watch`                                                                                  |
+| `--url`                         | Define the URL to run tests in. Useful for custom Storybook URLs <br/>`test-storybook --url http://the-storybook-url-here.com`   |
 | `--browsers`                    | Define browsers to run tests in. One or multiple of: chromium, firefox, webkit <br/>`test-storybook --browsers firefox chromium` |
 | `--maxWorkers [amount]`         | Specifies the maximum number of workers the worker-pool will spawn for running tests <br/>`test-storybook --maxWorkers=2`        |
 | `--no-cache`                    | Disable the cache <br/>`test-storybook --no-cache`                                                                               |
@@ -124,13 +127,19 @@ The test runner uses [jest-playwright](https://github.com/playwright-community/j
 
 ## Running against a deployed Storybook
 
-By default, the test runner assumes that you're running it against a locally served Storybook.
+By default, the test runner assumes that you're running it against a locally served Storybook on port 6006.
 If you want to define a target url so it runs against deployed Storybooks, you can do so by passing the `TARGET_URL` environment variable:
 
 ```bash
 TARGET_URL=https://the-storybook-url-here.com yarn test-storybook
 ```
 
+Or by using the `--url` flag:
+
+```bash
+yarn test-storybook --url https://the-storybook-url-here.com
+```
+
 ### Stories.json mode
 
 By default, the test runner transforms your story files into tests. It also supports a secondary "stories.json mode" which runs directly against your Storybook's `stories.json`, a static index of all the stories.

bin/test-storybook.js

@@ -74,9 +74,9 @@ async function checkStorybook(url) {
     console.error(
       dedent`[test-storybook] It seems that your Storybook instance is not running at: ${url}. Are you sure it's running?
       
-      If you're not running Storybook on the default 6006 port or want to run the tests against any custom URL, you can set the TARGET_URL variable like so:
+      If you're not running Storybook on the default 6006 port or want to run the tests against any custom URL, you can pass the --url flag like so:
       
-      TARGET_URL=http://localhost:9009 yarn test-storybook
+      yarn test-storybook --url http://localhost:9009
       
       More info at https://github.com/storybookjs/test-runner#getting-started`
     );
@@ -134,8 +134,14 @@ const main = async () => {
     process.exit(0);
   }
 
-  const targetURL = sanitizeURL(process.env.TARGET_URL || `http://localhost:6006`);
+  const targetURL = sanitizeURL(process.env.TARGET_URL || runnerOptions.url);
   await checkStorybook(targetURL);
+
+  process.env.TARGET_URL = targetURL;
+
+  if(process.env.REFERENCE_URL) {
+    process.env.REFERENCE_URL = sanitizeURL(process.env.REFERENCE_URL);
+  }
 
   // Use TEST_BROWSERS if set, otherwise get from --browser option
   if (!process.env.TEST_BROWSERS && runnerOptions.browsers) {

playwright/custom-environment.js

@@ -1,41 +1,16 @@
 require('regenerator-runtime/runtime');
 const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment').default;
 
-const sanitizeURL = (url) => {
-  let finalURL = url
-  // prepend URL protocol if not there
-  if (finalURL.indexOf("http://") === -1 && finalURL.indexOf("https://") === -1) {
-    finalURL = 'http://' + finalURL;
-  }
-
-  // remove iframe.html if present
-  finalURL = finalURL.replace(/iframe.html\s*$/, "");
-
-  // add forward slash at the end if not there
-  if (finalURL.slice(-1) !== '/') {
-    finalURL = finalURL + '/';
-  }
-
-  return finalURL;
-}
-
 class CustomEnvironment extends PlaywrightEnvironment {
   async setup() {
     await super.setup();
     const page = this.global.page;
     const start = new Date();
-    const targetURL = sanitizeURL(process.env.TARGET_URL || `http://localhost:6006`);
-
-    const referenceURL = process.env.REFERENCE_URL && sanitizeURL(process.env.REFERENCE_URL);
-
-    if ('TARGET_URL' in process.env && !process.env.TARGET_URL) {
-      console.log(`Received TARGET_URL but with a falsy value: ${process.env.TARGET_URL
-        }, will fallback to ${targetURL} instead.`)
-    }
+    const { TARGET_URL: targetUrl, REFERENCE_URL: referenceUrl } = process.env
 
-    await page.goto(`${targetURL}iframe.html`, { waitUntil: 'load' }).catch((err) => {
+    await page.goto(`${targetUrl}iframe.html`, { waitUntil: 'load' }).catch((err) => {
       if (err.message?.includes('ERR_CONNECTION_REFUSED')) {
-        const errorMessage = `Could not access the Storybook instance at ${targetURL}. Are you sure it's running?\n\n${err.message}`;
+        const errorMessage = `Could not access the Storybook instance at ${targetUrl}. Are you sure it's running?\n\n${err.message}`;
         throw new Error(errorMessage)
       }
 
@@ -52,7 +27,7 @@ class CustomEnvironment extends PlaywrightEnvironment {
           constructor(storyId, errorMessage) {
             super(errorMessage);
             this.name = 'StorybookTestRunnerError';
-            const storyUrl = \`${referenceURL || targetURL}?path=/story/\${storyId}\`;
+            const storyUrl = \`${referenceUrl || targetUrl}?path=/story/\${storyId}\`;
             const finalStoryUrl = \`\${storyUrl}&addonPanel=storybook/interactions/panel\`;
 
             this.message = \`\nAn error occurred in the following story:\n\${finalStoryUrl}\n\nMessage:\n \${errorMessage}\`;

src/util/getCliOptions.ts

@@ -4,6 +4,7 @@ import type { BrowserType } from 'jest-playwright-preset';
 type CliOptions = {
   runnerOptions: {
     storiesJson?: boolean;
+    url?: string;
     configDir?: string;
     eject?: boolean;
     browsers?: BrowserType | BrowserType[];
@@ -18,6 +19,7 @@ const STORYBOOK_RUNNER_COMMANDS: StorybookRunnerCommand[] = [
   'configDir',
   'browsers',
   'eject',
+  'url',
 ];
 
 export const getCliOptions = () => {

src/util/getParsedCliOptions.ts

@@ -18,6 +18,11 @@ export const getParsedCliOptions = () => {
       'Define browsers to run tests in. Could be one or multiple of: chromium, firefox, webkit',
       ['chromium']
     )
+    .option(
+      '--url <url>',
+      'Define the URL to run tests in. Useful for custom Storybook URLs',
+      'http://localhost:6006'
+    )
     .option(
       '--maxWorkers <amount>',
       'Specifies the maximum number of workers the worker-pool will spawn for running tests'