Take screenshot when a test fails

[gregberge]

As suggested in #43, we would like to have a screenshot when a test fail, it is the same idea as #130.

Technical detail

• The screenshot would be created in a .jest-puppeteer/screenshots folder.
• The name of the screenshot would be ${fileName}-${describe}-${it}-${timestamp}.png

We could redefine it and test but I think this is not the cleanest method. Any help from Jest team to do it properly is welcome @SimenB.

[SimenB]

This is exactly the same as #130 (from Jest's perspective), right? Whether you take a screenshot or not shouldn't matter, as long as you can intercept the error reporting. Unless I'm misunderstanding?

[testerez]

Here is how I did it:

export const registerScreenshotReporter = () => {
  /**
   * jasmine reporter does not support async.
   * So we store the screenshot promise and wait for it before each test
   */
  let screenshotPromise = Promise.resolve();
  beforeEach(() => screenshotPromise);
  afterAll(() => screenshotPromise);

  /**
   * Take a screenshot on Failed test.
   * Jest standard reporters run in a separate process so they don't have
   * access to the page instance. Using jasmine reporter allows us to
   * have access to the test result, test name and page instance at the same time.
   */
  jasmine.getEnv().addReporter({
    specDone: async result => {
      if (result.status === 'failed') {
        screenshotPromise = screenshotPromise
          .catch()
          .then(() => takeScreenshot(result.fullName));
      }
    },
  });
};

[elmolicious]

+1 for a much needed feature

[kevlened]

The jest-screenshot-reporter handles screenshots the way @testerez shows. That reporter currently assumes browser uses the webdriver api, but the logic is simple, so you could write something similar for puppeteer or add a contribution there.

[jacobweber]

@testerez Can you tell me where you're calling that code from? I was trying to do it the way jest-screenshot-reporter does, but it seems like the page gets closed before I can take the screenshot.

[testerez]

@jacobweber I just call registerScreenshotReporter() in setupTestFrameworkScriptFile (I'm not using jest-puppeteer anymore)

[jacobweber]

@testerez Thanks! Got it working.

[ricwal-richa]

@testerez On using your custom reporter, I get an error that takeScreenshot is not a valid method. I am using jest-puppeteer so I searched for this method in jasmine2 (as jest-jasmine2 used in jest-puppeteer) but could not find a reference. Can you please tell me if jasmine reporter would also need browser/page handle explicitly for this method to work ?

eg. browser.takeScreeshot() or page.takeScreenshot

I am able to make this work with puppeteer screenshot method (using that in custom defined method); but would prefer to use the in-built support for screenshot available with jasmine reporter, if any.

[testerez]

@ricwal-richa yes, takeScreenshot was not part of my code sample so it's normal you got this error. Here is the full code I use (this is typescript):

import path from 'path';
import mkdirp from 'mkdirp';

const screenshotsPath = path.resolve(__dirname, '../testReports/screenshots');

const toFilename = (s: string) => s.replace(/[^a-z0-9.-]+/gi, '_');

export const takeScreenshot = (testName: string, pageInstance = page) => {
  mkdirp.sync(screenshotsPath);
  const filePath = path.join(
    screenshotsPath,
    toFilename(`${new Date().toISOString()}_${testName}.png`),
  );
  return pageInstance.screenshot({
    path: filePath,
  });
};

export const registerScreenshotReporter = () => {
  /**
   * jasmine reporter does not support async.
   * So we store the screenshot promise and wait for it before each test
   */
  let screenshotPromise: Promise<any> = Promise.resolve();
  beforeEach(() => screenshotPromise);
  afterAll(() => screenshotPromise);

  /**
   * Take a screenshot on Failed test.
   * Jest standard reporters run in a separate process so they don't have
   * access to the page instance. Using jasmine reporter allows us to
   * have access to the test result, test name and page instance at the same time.
   */
  (jasmine as any).getEnv().addReporter({
    specDone: async (result: any) => {
      if (result.status === 'failed') {
        screenshotPromise = screenshotPromise
          .catch()
          .then(() => takeScreenshot(result.fullName));
      }
    },
  });
};

[petrogad]

Did you ever see blank screenshots and get around that issue?

Thank you for sharing!

@testerez ^

[gregberge]

It looks like a lot of people are close to the solution. Could someone try to submit a PR to add screenshot? 🙏

[helloguille]

@testerez Thanks for the code! However, I cannot I get undefined error for the pageInstance variable.

I just put all the code (In javascript) in my setupTestFrameworkScriptFile file + a call to registerScreenshotReporter().

I modified the declaration for Vainilla as such:

export const takeScreenshot = (testName, pageInstance = page) => { ... }
And page is indeed the name of the page instance in my tests.