Use test name as screenshot file name?

[alisman]

In an earlier version of WDIO (wdio-visual-regression-service), the framework could pick up the name of the test

it(THIS_THING, ()=>test)

as the name of the screenshot. This was super helpful because it allowed us to easily get from test report back to test spec with code search.

Is there any simple way to achieve this in the new service?

[wswebcreation]

Hi @alisman

Thanks for your issue. This is not a rewrite of the wdio-visual-regression-service, but a completely different module. Feel free to open a PR for this

[sytolk]

@alisman to get test name you can write

const filename = `${expect.getState().currentTestName}.png`;

but how can we use this service to get screenshot running programmatically?
this miss me:

wdioImageComparisonService.afterTest(() => takeScreenshot());

This works but screenshots is taken from the next test.. wdio its have afterTest hook that I cannot configure programmatically:

jasmine.getEnv().addReporter({
  specDone: async result => {
    if (result.status !== 'disabled') {
      if (result.status === 'failed') {
        await takeScreenshot();
      }
    }
  }
});
export async function takeScreenshot() {
  await browser.saveFullPageScreen(
      `${expect.getState().currentTestName}`,
      {
        fullPageScrollTimeout: '1500'
      }
    );
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[zbyte64]

Here's how I did it without rewriting all my tests to invoke such an awkward pattern.

In your wdio.conf.js:

const {default: WdioImageComparisonService} = require('wdio-image-comparison-service');

export.config = {
  // your wdio config
  // add a mocha hook to reregister the browser commands but with a format that includes the test name
  async beforeTest(test) {
    const testName = test.title // may want to include test.parent
    // prefix image snapshots with test name
    const imageService = new WdioImageComparisonService({
      ...imageComparisonOptions,
      formatImageName: `${testName}.{tag}`,
    })
    const capabilities = [
      {
        browserName: 'chrome'
      }
    ];
    imageService.addCommandsToBrowser(capabilities, browser)
  }
}