Interaction addon: Experimental step debugging documentation is buried

[nebbles]

Spent parts of today setting up the new interactions addon - was very excited to see its release and strong development recently.

The documentation I was following spanned both:

• https://storybook.js.org/docs/react/writing-stories/play-function
• https://storybook.js.org/docs/react/writing-tests/interaction-testing

However, I was getting stuck since I only had the simple UI. I was missing the step control and play button, which was shown in all the documentation screenshots.

Eventually, I stumbled across the Experimental step debugging instructions (here https://storybook.js.org/addons/@storybook/addon-interactions) that indicated this is feature flagged and has to be enabled manually.

I'd suggest either the instruction to enabled this manually is made a little more obvious, or the screenshots in the documentation should reflect what a user gets out of the box when installing - otherwise a lot of worry about doing something wrong!

Thanks again for an awesome new addon 🙏

/cc @shilman since I've noticed you've been heavily involved in the interaction addon

[shaunpersad]

It's also worth pointing out that the play function documentation shows a gif of the step debugger with very nice messages for each step, which doesn't appear to be available as an option in the current release.

[jonniebigodes]

@nebbles and @shaunpersad thanks for reaching out to us with your question and comments, we appreciate it. Indeed you're correct the images used in the documentation are indeed a bit misleading as they were captured using a version that had the flag enabled. I'll update them next week to prevent misconceptions and provide you and the rest of the community with the same UI that is enabled out of the box when adding the Interactions addon.

Have a great weekend.

Stay safe both of you.

[aanti]

It still doesn't seem to be resolved (my addon version: 6.5.16). I spent some time today trying to figure out what I'm missing because the documentation still presents a stepper panel. Using a stepper requires an experimental flag which it's really difficult to find in the Internet (the name of the flag). The link mention by the author doesn't contain this information anymore. The only trace is here: https://storybook.js.org/blog/interaction-testing-with-storybook/
After setting this flag, the stepper panel appears, but I believe it's not obvious and can still confuse people.

For those who just like me can't find any information about the flag:

// .storybook/main.js
module.exports = {
  features: {
    interactionsDebugger: true,
  },
};

[jonniebigodes]

@aanti, thanks for reaching out to us with your comment. Appreciate it 🙏 ! To give you some context, the article you pointed out is a bit outdated and was referencing Storybook 6.5 and the way how to configure the Interactions addon. As of Storybook 7, it's already included, as you may have noticed by its absence from the documentation, which you can read more about it here. Also, the previous versions of the documentation (e.g., for version 6.5) are still featured and available for browsing. If you open up the documentation site and click the version selector near the framework and language, you'll see the option to select other versions: