TestCafe：使用来自客户端的数据生成测试？

Question

使用TestCafe [1]，我想做以下事情：

1. 导航到一个 URL。
2. 执行客户端 JavaScript 以检索其他 URL 列表。
3. 为每个 URL 生成测试。
4. 同时执行测试。

使用单个测试并串行执行的工作示例

下面的简化测试用例有效，但不是我所需要的，它执行以下操作：

1. 执行测试。
2. 导航到测试“之前”挂钩中的 URL。
3. 执行客户端 JavaScript 以检索测试的“之前”挂钩中的 URL 列表。
4. 串行在测试正文中为每个 URL 运行断言。

我通过 TestCafe 运行的测试文件包含以下内容：

import { ClientFunction, Selector } from 'testcafe';

const getSiteMapFromClientSide = ClientFunction(
  () =>
    new Promise(resolve => {
      // this example looks like it could be synchronous, or that the data could
      // be defined in the test but this data comes from an async source which
      // is only reachable client side.
      resolve(['https://localhost:6007/some/url1', 'https://localhost:6007/some/url2']);
    })
);

fixture('Storybook').page('https://localhost:6007');

const modalError = Selector('#error-message');

test.before(async t => {
  t.ctx.siteMap = await getSiteMapFromClientSide();
})('Smoke Test all Stories for Full Screen Errors or Blank Screens', async t => {
  // assert we have URLs or we'll have a passing suite that looped over nothing
  await t.expect(t.ctx.siteMap.length > 0).ok('Site Map is Empty');
  // assert each story has no full screen error message
  await Promise.all(
    t.ctx.allStories.map(async url => {
      await t
        .navigateTo(url)
        .expect(modalError.exists && modalError.visible)
        .notOk(`Full Screen Error found at ${url}`);
    })
  );
});

上下文

在实际应用中，我正在为 Storybook [2] 编写烟雾测试。要获取所有 URL 的列表，我需要调用结果 require('@storybook/react').getStorybook()，仅在运行时在 Storybook 客户端应用程序中可用。 我已将这些细节从简化的测试用例中删除，因为它们与 TestCafe 无关。

[1] http://devexpress.github.io/testcafe [2] https://storybook.js.org

Answer 1

我认为最好将您的任务分为两部分。 首先，您需要通过 ClientFunction 获取所有测试过的 URL，并使用第一个测试文件将这些 URL 保存在某处（例如，保存到全局变量中）。 然后使用concurrency 选项启动一个新的TestCafe 任务，并将src 参数设置为您的第二个测试文件。 最好的方法是使用createTestCafe 函数。也请阅读以下文章http://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/createtestcafe.html