How to change the default images' names to include browser name for *all* the matchImage invokations?

[smellyshovel]

Hello.

I need to be able to run image diffing tests in various browsers. However, different browser tend to render fonts differently, and because of that the resulting images may differ based on the browser the tests are run in.

So, I'm wondering whether there's a way to change the default generated images' file names to include the current browser.

I can see in the README that I can configure that per-test, but that's a lot of self-repitition, so I'm trying to set the global setting to use the same pattern.

As I understand from the README, that's only achievable by passing the "pluginVisualRegressionTitle: `${Cypress.currentTest.titlePath.join(' ')} (${Cypress.browser.displayName})`," option to Cypress's env configuration. However, if I do that, I get the error stating that Cypress is not defined, which is expected since there's indeed no Cypress imported in the file:

import { defineConfig } from "cypress";
import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/dist/plugins";

export default defineConfig({
  component: {
    specPattern: "cypress/component/**/*.cy.{js,jsx,ts,tsx}",
    setupNodeEvents(on, config) {
      initPlugin(on, config);
    },
    devServer: {
      framework: "vue",
      bundler: "vite"
    },
    env: {
      pluginVisualRegressionTitle: `${Cypress.currentTest.titlePath.join(" ")} (${Cypress.browser.displayName})`,
      pluginVisualRegressionMaxDiffThreshold: 0.1
    }
  }
});

So, the question is: am I doing it wrong? Am I missing something? How do I change the option globally?

P.S. Thanks for the amazing tool!