Extend hooks api with prepare and getHttpHeaders properties

[yannbf]

Replaces #222

There are now additional properties you can set in .storybook/test-runner.js:

prepare

The test-runner has a default prepare function which gets the browser in the right environment before testing the stories. You can override this behavior, in case you might want to hack the behavior of the browser. For example, you might want to set a cookie, or add query parameters to the visiting URL, or do some authentication before reaching the Storybook URL. You can do that by overriding the prepare function.

The prepare function receives an object containing:

• browserContext: a Playwright Browser Context instance
• page: a Playwright Page instance.
• testRunnerConfig: the test runner configuration object, coming from the .storybook/test-runner.js.

getHttpHeaders

The test-runner makes a few fetch calls to check the status of a Storybook instance, and to get the index of the Storybook's stories. Additionally, it visits a page using Playwright. In all of these scenarios, it's possible, depending on where your Storybook is hosted, that you might need to set some HTTP headers. For example, if your Storybook is hosted behind a basic authentication, you might need to set the Authorization header. You can do so by passing a getHttpHeaders function to your test-runner config. That function receives the url of the fetch calls and page visits, and should return an object with the headers to be set.

// .storybook/test-runner.js
module.exports = {
  getHttpHeaders: async (url) => {
    const token = url.includes('prod') ? 'XYZ' : 'ABC';
    return {
      Authorization: `Bearer ${token}`,
    };
  },
};

📦 Published PR as canary version: 0.9.5--canary.245.714d3ca.0

✨ Test out this PR locally via:

npm install @storybook/test-runner@0.9.5--canary.245.714d3ca.0
# or 
yarn add @storybook/test-runner@0.9.5--canary.245.714d3ca.0

Version

Published prerelease version: v0.10.0-next.10

Changelog

🚀 Enhancement

• New prerelease structure / upgrade to SB7 #210 (@shilman)

🐛 Bug Fix

• Extend hooks api with prepare and getHttpHeaders properties #245 (@yannbf)
• Use preview api instead of store #273 (@kasperpeulen)
• Support other test-runner config extensions #259 (@yannbf)
• Use ipv4 loopback address #252 (@IanVS)
• Fix safe json stringify code #239 (@hansottowirtz)
• feat: add shard cli option #243 (@Niznikr @yannbf)
• Updating deps to handle TS 4.9 #237 (@kasperpeulen)
• Fix target url in error feedback #233 (@yannbf)
• Remove unused development packages #227 (@yannbf)
• Make setup-page globally available for index.json mode compatibility #217 (@yannbf)
• Upgrade CSF to next #212 (@shilman)
• Fix missing dependencies #209 (@bryanjtc)

📝 Documentation

• Document index.json mode for Svelte CSF #263 (@JReinhold)
• Docs: add recipe for browser name #221 (@yannbf)

Authors: 8

• Bryan Thomas (@bryanjtc)
• Hans Otto Wirtz (@hansottowirtz)
• Ian VanSchooten (@IanVS)
• Jeppe Reinhold (@JReinhold)
• Kasper Peulen (@kasperpeulen)
• Michael Shilman (@shilman)
• Robert Niznik (@Niznikr)
• Yann Braga (@yannbf)

[yannbf]

@davidferguson the prepare function would allow you to achieve what you wanted in #242, and gives you much more power over it. The drawback is that you will be responsible for the behavior of preparing the browser, which might change in future releases.

[davidferguson]

Thanks @yannbf, this exactly fits our needs! Looking forward to being able to use this once it's merged.

[ndelangen]

@yannbf merge it?!

[davidferguson]

Bump, would love to see this merged at some point!

[davidferguson]

Just wanted to give this another bump!

[yannbf]

Hey @davidferguson sorry for the long time to merge this, got quite busy with the Storybook day conference!

[github-actions]

🚀 PR was released in v0.10.0 🚀