一、简介

TestCafe是一个基于Node.js的端到端（E2E）Web测试框架。它能直接运行在所有现代浏览器中，无需任何插件或浏览器驱动程序。总之是一个易用、功能全面且性能优越的端到端Web测试框架！

官网API地址：https://testcafe.io/documentation/402632/api

TestCafe的主要特点如下：

1. 无需浏览器插件：TestCafe无需安装任何浏览器插件或驱动程序，便可在所有主流浏览器中运行。它使用代理机制拦截HTTP请求并注入测试脚本。

2. 跨平台和跨浏览器：TestCafe支持多种操作系统（Windows、macOS和Linux）以及多种浏览器（包括Chrome、Firefox、Safari、Edge和Internet Explorer 11）。

3. 同步操作：TestCafe的API基于Promises设计，使得测试用例可以按照预期顺序执行。这样就避免了因异步代码导致的假失败。

4. 并发测试：TestCafe支持在多个浏览器中同时运行测试，加快测试速度。

5. 自动等待：TestCafe自动处理等待时间，确保页面加载完成或元素出现后再进行操作。这大大减少了因等待时间不足导致的测试失败。

6. 实用工具和选择器：TestCafe提供了许多实用工具和选择器，例如Selector和ClientFunction，帮助你轻松操控DOM元素和执行客户端代码。

7. 灵活性和可扩展性：TestCafe支持编写自定义报告生成器、插件和集成，使其能够满足不同项目的需求。

8. 支持运行时截图/录屏，方便问题回溯

9. Live模式方便调试用例

二、用法与实践

1、安装TestCafe

npm install testcafe --save-dev

2、编写测试用例

import { Selector, ClientFunction } from 'testcafe';
 
const getElementByXPath = (xpath) => {
  return Selector(xpathExpression => {
      const iterator = document.evaluate(
          xpathExpression,
          document,
          null,
          XPathResult.UNORDERED_NODE_ITERATOR_TYPE,
          null
      );
      return iterator.iterateNext();
  })(xpath);
};
 
 
fixture('UI自动化')
  .page('https://app.ui.com/login');
 
test('验证登录页面展示', async (t) => {
  // 定义登录表单中的选择器
  const usernameInput = getElementByXPath('//input[@name="email"]');
  const passwordInput = getElementByXPath("//input[@name='password']");
  const loginCheckbox = getElementByXPath("//div[@class='content']//label[@class='sd-Checkbox-container-3eGP-']//input");
  const loginButton = getElementByXPath("//button[@class='sd_global_focus_controller_class sd-Button-container-2jYtl sd-foundation-bold-body-secondary-18jsE sd-Button-primary-2l4kM sd-Button-lg-raukP submit']");
   
  // 填写用户名和密码，然后单击登录按钮
  await t
    .typeText(usernameInput, 'user@app.com')
    .typeText(passwordInput, 'tester')
    .click(loginCheckbox)
    .click(loginButton);
 
  // 等待成功登录并被重定向到主页
  const homepageElement = getElementByXPath("//div[@class='ui-app']//div[@class='main-panel--new-ui main-panel']");
  await t.expect(homepageElement.exists).ok('登录成功，进入主页');

3、执行测试，并且可以指定浏览器

1.使用Chrome浏览器运行测试：

npx testcafe chrome your_test_file.js

2.使用Firefox浏览器运行测试：

npx testcafe firefox your_test_file.js

3.使用Safari浏览器运行测试：

npx testcafe safari your_test_file.js

4.使用Edge浏览器运行测试：

npx testcafe edge your_test_file.js

5.使用Internet Explorer 11运行测试：

npx testcafe "internet explorer" your_test_file.js

6.同时指定多个浏览器，以便在多个浏览器上并行运行测试。例如，使用Chrome和Firefox浏览器同时运行测试：

npx testcafe chrome,firefox your_test_file.js

7.其他暂不支持的浏览器，在npm可以直接下载使用现成的插件：https://www.npmjs.com/search?q=testcafe-browser-provider

4、测试报告

TestCafe支持多种报告格式，包括JSON、xUnit、List等。运行测试时通过命令行参数-r 或 --reporter来指定生成特定类型的报告。

npx testcafe chrome your_test_file.js -r xunit:report.xml

npx testcafe chrome your_test_file.js -r json:report.json

npx testcafe chrome your_test_file.js -r list:report.txt

npm社区也有一些已经开发好的报告格式，可以自行下载：https://www.npmjs.com/search?q=testcafe-reporter