[Feature Request] Check browser in play function

[ashleyryan]

Context
We use test-runner to run tests using playwright against chromium and webkit. There are some tests that I'd like to skip in webkit, if possible.

In the preRender function in test-runner config, I can access the browser name from playwright using page.context()?.browser()?.browserType().name(), but as far as I can tell, the page object is not accessible within a play function's context, nor is it possible to mutate the context object inside of preRender to add browser data to it to check in the play function.

Is it possible to determine which browser the test is running in from within a play function? Or is it possible to access the page object at all?

[yannbf]

Hey @ashleyryan! Thanks for writing this issue. Unfortunately there's no equivalent of Playwright's conditional test annotations in the test-runner.

As a temporary workaround, the play function runs in the browser, so you could create a small utility or just add an inline check based on browser detection, then do an early return so it won't do anything when executing in that browser. You can combine with Test-runner's user agent so this will only happen when the story is accessed via the test-runner:

function shouldSkipTest() {
    const UA = window.navigator.userAgent;
    const isTestRunner = UA.match(/StorybookTestRunner/);
    const isWebkit = /\b(iPad|iPhone|iPod)\b/.test(UA) && /WebKit/.test(UA) && !/Edge/.test(UA) && !window.MSStream;
    return isTestRunner && isWebkit;
}

export const MyStory = {
  play: async ({canvasElement}) => {
    if(shouldSkipTest) return;

    // the actual tests here...
  },
};

[ashleyryan]

Oh excellent, I was concerned about this checking for safari in the Interactions tab, which I don't want, so thank you for the check for the TestRunner UA. I'll give that a try