Question

我正在使用TestCafe并尝试集成Percy进行视觉回归测试。我已经导入了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

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

Answer 2

您还可以利用此 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 令牌，以便 Percy 可以在每次运行测试时创建一个新的构建。

在 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

2 个答案: