Chimp.js with Mocha - save screenshots of failed tests on CircleCI

Question

I am using Chimp.js to run E2E tests on CircleCI against my staging server which runs a Meteor app. Tests sometimes fails, and it would be great to take screenshot of UI to debug those failing tests.

Is it possible to save screenshots with Chimp and Mocha? Chimp uses webdriver.io which has ability to save screenshots by calling browser.saveScreenshot('./snapshot.png'); http://webdriver.io/api/utility/saveScreenshot.html#Example

But how to save screenshots only when tests fail? And how to view those screenshots on CircleCI?

Answer 1

To save screenshot exactly after Mocha test fails, you can use code similar to this one. Screenshot is saved in afterEach() function if test in it block fails.

describe('some feature test', function () {

    it('first it block', function () {
        signInPage.open();
        ...
    });

    it('second it block', function () {
        ...
    });

    afterEach(function () {
        if (this.currentTest.state === 'failed') {
            browser.saveScreenshot('/tmp/artifacts/screenShot.png');
        }
    });
});

Not this should work fine on local computer.

---

To be able to save and view screenshot on circleCI you can use artifacts: https://circleci.com/docs/2.0/artifacts/#uploading-artifacts

Put code similar to this one to your config.yml

version: 2
jobs:
  my_fancy_test:

    ...

    steps:

      ...

      - run: |
          mkdir /tmp/artifacts
          cd app && npm run my-fancy-test

      - store_artifacts:
          path: /tmp/artifacts

If test fails on CircleCI, screenShot.png should be copied and visible in artifacts tab on CircleCI: