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

【问题标题】：Chimp.js with Mocha - save screenshots of failed tests on CircleCI带有 Mocha 的 Chimp.js - 在 CircleCI 上保存失败测试的屏幕截图
【发布时间】：2018-06-27 21:36:07
【问题描述】：

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

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

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

【问题讨论】：

标签： mocha.js circleci webdriver-io chimp.js

【解决方案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 上的工件选项卡中可见：

【讨论】：