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

Question

我正在使用Chimp.js在运行Meteor应用程序的临时服务器上的CircleCI上运行E2E测试。测试有时会失败，如果能截取UI的屏幕截图来调试那些失败的测试，那就太好了。

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

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

Answer 1

要在Mocha测试失败后保存截图，可以使用类似下面的代码。如果在it块中测试失败，截图保存在afterEach()函数中。

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上的工件选项卡中可见：

​

​