带有Mocha的Chimp.js-在CircleCI上保存失败测试的屏幕截图

Question

我正在使用Chimp.js在CircleCI上针对运行Meteor应用程序的登台服务器运行E2E测试。测试有时会失败，因此最好截取UI屏幕快照来调试那些失败的测试。

是否可以使用Chimp和Mocha保存屏幕截图？黑猩猩使用webdriver.io，它可以通过调用browser.saveScreenshot('./snapshot.png'); http://webdriver.io/api/utility/saveScreenshot.html#Example

保存屏幕截图

但是如何仅在测试失败时才保存屏幕截图？ 以及如何在CircleCI上查看这些屏幕截图？

Answer 1

要在Mocha测试失败后立即保存屏幕截图，可以使用与此类似的代码。如果afterEach()块中的测试失败，屏幕快照将保存在it函数中。

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');
        }
    });
});

这不能在本地计算机上正常工作。

---

要能够在circleCI上保存和查看屏幕截图，您可以使用工件：https://circleci.com/docs/2.0/artifacts/#uploading-artifacts

将与此代码相似的代码放入您的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

如果在CircleCI上测试失败，则应该复制screenShot.png并在CircleCI的“工件”选项卡中可见：