什么是TestCafeTestCafe是一个node.js自动化端到端web测试工具，可以用JS或TypeScript编写测试，运行并查看结果。换句话说，Testcafe是一个可以自动化前端端到端测试的工具。我们可以使用简单的JS或Typescript来编写测试用例。安装准备需要提前安装NodeJS，官网没有指定版本。本文基于NodeJS8+编写。安装TestCafeGloballynpminstall-gtestcafeLocallynpminstall--save-devtestcafe推荐使用本地安装，这样团队中的其他人可以直接通过npminstall安装所有同版本的依赖。如何运行测试用例CommandLineInterface可以使用命令行执行单元测试使用指定浏览器testcafechrometests.jstestcafepath:/safari.apptests.js使用所有安装的浏览器testcafealltests.jsheadlessmodeChrome和Firefox支持headlessmodetestcafe》chrome:headless"tests.js更多信息，请参考命令行接口编程接口。您也可以编写JS代码并使用Node执行单元测试。这也是本文推荐的方法，因为它更灵活。引入工厂函数constcreateTestCafe=require('testcafe')使用工厂函数获取一个TestCafe实例工厂函数接受三个参数，分别是hostcontrolPanelPortservicePort并返回一个promise。promise的最终结果是一个TestCafe实例createTestCafe('localhost',1337,1338).then(testcafe=>{/*...*/});TestCafe暴露了三个方法，分别是：createBrowserConnectioncreateRunnerclose，详见，请参考TestCafe类调用createRunnertestcafe.createRunner返回一个Runner实例，该实例暴露了多个配置和执行测试任务的方法，支持链式调用，如：construnner=testcafe.createRunner();returnrunner.src(['test1.js','test2.js'])//可以预先定义一个数组，或者将要执行的文件保存在一个文件中，更加灵活，也可以配置文件夹。filter((testName,fixtureName,fixturePath)=>{//根据testName,fixtureName,fixturePath添加一些过滤器}).browsers(["chrome:headless"]).reporter('json',stream)//流是报告文件，例如conststream=fs.createWriteStream('report.json');.run({selectorTimeout:10000,//testcafe等待元素出现的超时skipJsErrors:true//忽略JS错误}）;具体可以参考RunnerClass如何编写测试用例代码结构FixtureTestCafe使用fixture来组织测试用例，一个测试文件必须包含一个或多个fixturefixture(fixtureName)fixture`fixtureName`可以指定fixture的起始页：fixture.page(url)fixture.page`url`TestCase然后写测试用例test.page`url`(testName,asynct=>{/*TestCode*/})注意传入的参数t，是测试控制器，包括测试API和测试用例上下文，使用它我们可以调用测试操作，处理浏览器对话框，等待，执行断言MakeTestStepCommon也许你会注意到在测试用例中获取了t，如果我们需要把一个通用的行动如何摆脱困境？TestCafe提供了一种直接导入t的方法。此时t中不包含具体测试用例的上下文，而是包含测试API，如：asynclogin(){awaitt.typeText("#user","name")。typeText("#pwd","pwd").click("#login")}看到这里，可能你对typeTextclick很陌生，没关系，后面会提到。TestHooks测试钩子，在测试用例之前或之后执行fixture.beforeEach(fn(t))fixture.afterEach(fn(t))test.before(fn(t))test.after(fn(t))注意测试。beforetest.after会覆盖fixture.beforeEachfixture.afterEach，TestHooks也会得到TestController实例。SkipTests可以跳过某些测试用例或者fixturefixture.skiptest.skip也可以指定只执行某些测试用例或者fixturefixture.onlytest.onlySelectors或者String或者Object或者promisenotcontainstypeOftypechecknotTypeOftypecheckgtGreaterthangtegreaterthanorequaltoltlessthanltelessthanorequaltowithinrangefromstartandfinishnotWithinnotrangefromstartandfinishmatchregexchecknotMatchregexchecktest具体可以参考上一章我们可以实现断言APITricksClientFunction测试控制器暴露动作，执行断言，获取上下文变量等，但是无法直接获取客户端的数据，例如：fixture("Fixture")test('window',asynct=>{awaitt.navigateTo("url");awaitt.expect(window.location.href).eql("url")})会报如下错误：windowisnotdefinedTestCafe提供了一个ClientFunction构造函数，我们可以传入一个回调函数，在回调函数中可以访问windowconstgetWindowLocation=ClientFunction(()=>window.location)fixture("Fixture")test('window',asynct=>{awaitt.navigateTo("url");letlocation=awaitgetWindowLocation();awaitt.expect(location.href).eql("url")})角色在很多网站中，不同角色的用户可以访问不同的界面或功能。TestCafe提供了一个Role构造方法，并在TestController中暴露了UseRole方法来切换角色首先引入Role构造函数import{Role}from'testcafe'创建角色constuser=Role(Env.LOGIN_URL,asynct=>{awaitt.typeText("userInput","name").typeText("pwdInput","123").click("submitBtn");});在测试用例中切换角色.useRole(user)如何调试笔者认为调试TestCafe的功能还不成熟，只支持下一步t.debug()等简单操作
