如何在 TestCafe 中实现 Percy

Question

我正在使用 TestCafe and trying to integrate Percy for visual regression tests. I've already imported Percy SDK，但出现此错误 ReferenceError: XMLHttpRequest is not defined。任何关于如何实现这一点的见解都会有所帮助。

const PercyAgent = require('@percy/agent').default;
export default class Helper {
  takeSnapshot(snapshotName: any, snapshotOptions: any) {
    const percyAgentClient = new PercyAgent({
      clientInfo: 'awesome-percy-sdk@0.0.1',
      environmentInfo: 'some helpful os or browser information for debugging',
    });
    percyAgentClient.snapshot(snapshotName, snapshotOptions);
  }
}

test('Regression | Login with wrong credentials | 102', async (t) => {
  loginPage.login('not_existent@xpta.com', 'RandomPassword1');
  await t.expect(loginPage.errorMessage.visible).ok();
  await t.debug();
  await t.expect(loginPage.errorMessage.innerText).eql('Invalid username or password.');
  await helper.takeSnapshot('wrong credentials', {});
});

Answer 1

Percy 代理客户端在 TestCafe 节点进程中是运行而不是浏览器中的运行。这就是您收到错误的原因。

第一步，您应该按照以下文档在浏览器中注入 Percy 客户端：Injecting External Libraries into a Page from a Test

第二步，您应该按照文档中的建议将助手 class 转换为 Client Function。

Answer 2

您还可以利用 this official package (@percy/testcafe) 将 Percy 与 TestCafe 结合使用。

导入库后，使用 TestCafe 在 e2e 测试中通过 Percy 拍摄快照非常简单：

import percySnapshot from '@percy/testcafe';

fixture('MyFixture')
  .page('http://devexpress.github.io/testcafe/example');

test('Test1', async t => {
  await t.typeText('#developer-name', 'John Doe');
  await percySnapshot(t, 'TestCafe Example');
});

记得在运行测试之前设置项目特定的 Percy Token，这样 Percy 就可以在每次测试运行.

时创建一个新的 Build

在 Mac 上设置令牌 OS:

export PERCY_TOKEN=[your-project-token]

要在 Windows 上设置令牌：

set PERCY_TOKEN=[your-project-token]

您可以向 package.json 添加新脚本以简化测试运行:

"scripts": {
    "percy:chrome": "percy exec -- testcafe chrome src/testcafe/tests"
  },

此外，您还可以使用 this tutorial 作为设置方向。

如何在 TestCafe 中实现 Percy

How to implement Percy in TestCafe

testing

automated-tests

google-chrome

typescript

testcafe