Need a way to know browser name in postRender

[vladnicula]

I'm following along a really nice article from https://storybook.js.org/blog/interaction-testing-with-storybook/

In it, there are two things that work well in isolation:

1. The cross browser testing

# cross-browser testing
npm run test-storybook --browsers chromium firefox webkit

and
2. Snapshot testing via jest-snapshot-test

// .storybook/test-runner.js
const { toMatchImageSnapshot } = require('jest-image-snapshot');

const customSnapshotsDir = `${process.cwd()}/__snapshots__`;

module.exports = {
  setup() {
    expect.extend({ toMatchImageSnapshot });
  },
  async postRender(page, context) {
    const image = await page.screenshot();
    expect(image).toMatchImageSnapshot({
      customSnapshotsDir,
      customSnapshotIdentifier: context.id,
    });
  },
};

However these two don't work togather. If I try to do a screenshot of a modest button with the css style all:unset, we will get a snapshot failed error because there are small pixel differences between browsers.

Ideally, I'd like to prefix the snapshotIdentifier with the browser name, just like playwright does it. To do so, I think I need the browserName https://playwright.dev/docs/api/class-fixtures#fixtures-browser-name variable to be accesible in the postRender.

[vladnicula]

Looking at the code it might be a simple extension of the testPrefixer to include the browser name in the context here:

test-runner/src/playwright/transformPlaywright.ts

Line 26 in c97c9c0

const context = { id: %%id%%, title: %%title%%, name: %%name%% };

[yannbf]

Hey @vladnicula you can get the browser name by using page.context().browser().browserType().name(). I updated the recipe in our README to reflect that!

[vladnicula]

Ups, sorry I missed that. Thanks!