Attach screenshot on test failure

[stefanteixeira]

Hey! First, congrats for the project, the report looks amazing and integration was seamless with my test suites.

I saw the docs and original feature requests regarding addAttach function, but I'm having trouble to figure out how to attach the current screenshots I save when a test fails.

In my setup, I use jest-circus and I have a custom PuppeteerEnvironment which saves screenshot when a test fails. I check the event test_fn_failure to know when to take the screenshot. Just to have a notion, this is my custom environment:

class CustomEnvironment extends PuppeteerEnvironment {
  async setup() {
    await super.setup()
  }

  async teardown() {
    await this.global.page.waitFor(2000)
    await super.teardown()
  }

  async handleTestEvent(event, state) {
    if (event.name === 'test_fn_failure') {
      const testDescription = state.currentlyRunningTest.parent.name
      const testName = state.currentlyRunningTest.name
      await fse.ensureDir('e2e/screenshots')
      await this.global.page.screenshot({
        path: 'e2e/screenshots/' + toFilename(`${testDescription}-${testName}.png`),
        fullPage: true
      })
    }
  }
}

I tried adding addAttach passing the file path after the screenshot statement, but it doesn't work. In the examples from the README, I see the addAttach getting called directly in the test case. Do you have an idea of how I could make this work in my setup?

Thanks in advance!

[madhusudhan-patha]

Hi @stefanteixeira , In the recent times I have gone through this challenge. I was able to solve it with the help of jestjs/jest#5292 (comment). Just wanted to share it so that it might help in your case.

//get-current-spec-results.js
let currentSpecResult =jasmine.CustomReporterResult;

jasmine.getEnv().addReporter({
  specStarted: (result) => currentSpecResult = result,
});

function getCurrentSpecResult() {
  return currentSpecResult;
}

module.exports= {
    getCurrentSpecResult
}

Use the above from specs like below.

const getCurrentSpecResult = require("../helpers/get-current-spec-results.js")

     async teardown() {
         const result = getCurrentSpecResult.getCurrentSpecResult();
        const fileName = `${Date.now().toString()}_${result.description.replace(/[^a-zA-Z0-9]/g,'_')}`;
        const isFailed = result.failedExpectations[0];
        if((typeof isFailed) !="undefined") {
          const screenShotBuffer = await page.screenshot({ path: "./test/reports/screenshots/" + file, fullPage: fullPage })
            .catch(error => {
                throw (`Error in capturing page screenshot.\n Stack trace: ${error.stack}`)
            });
        await addAttach(screenShotBuffer, file);
        }
  }

[stefanteixeira]

Hey @madhusudhan-patha, thanks for your reply!

I guess my problem is related to how the library integrates with jest-circus. addAttach takes some Jest global data, but I think the way to get this test data (such as test path, name, description, etc.) is different when we use jest-circus as runner.

It works for me just if I call addAttach directly in the test file, but it doesn't work at all calling it inside the CustomEnvironment definition. I even tried calling it on different states, such as test_fn_failure and test_done, but had no luck 😕

[stefanteixeira]

I managed to make a workaround. Assuming I already save the screenshots in the custom environment file I posted earlier, I could attach the screenshots in a Jest setup file inside an afterEach block:

const fse = require('fs-extra')
const path = require('path')
const { addAttach } = require('jest-html-reporters/helper')

afterEach(async () => {
  const testName = expect
    .getState()
    .currentTestName.replace(/[^a-z0-9.-]+/gi, '_')
  const filePath = path.resolve(__dirname, `../screenshots/${testName}.png`)

  if (fse.pathExistsSync(filePath)) {
    await addAttach(filePath, testName)
  }
})