摘要:简言之,就是一个可以自动化前端测试的工具,我们可以使用简单的或者写测试用例。首先引入构造函数创建在中切换笔者认为的调试功能不太成熟,只支持下一步等简单操作
What is Test Cafe
TestCafe is a node.js tool to automate end-to-end web testing, you can write tests in JS or TypeScript, run them and view results.
简言之, Testcafe就是一个可以自动化前端end-to-end测试的工具,我们可以使用简单的JS或者Typescript写测试用例。
需要提前安装NodeJS, 官网没有指定版本,本文基于NodeJS 8+撰写。
Install TestCafeGlobally
npm install -g testcafe
Locally
npm install --save-dev testcafe
建议使用本地安装,这样团队里其他人直接npm install便可安装相同版本的所有依赖。
How to run test cases Command Line Interface可以使用命令行执行单元测试
使用指定浏览器
testcafe chrome tests.js
testcafe path:/safari.app tests.js
使用所有安装的浏览器
testcafe all tests.js
headless mode
Chrome 和 Firefox 支持 headless mode
testcafe "chrome:headless" tests.js
更多信息请参考 Command Line Interface
Programming Interface也可以写JS代码用Node执行单元测试,这也是本文着重推荐的方法,因为这个方式更加灵活。
引入工厂函数
const createTestCafe = require("testcafe")
使用工厂函数获得TestCafe实例
工厂函数接受三个参数, 分别是 host controlPanelPort servicePort,返回一个promise, 该promise的最终结果便是一个TestCafe实例
</>复制代码
createTestCafe("localhost", 1337, 1338)
.then(testcafe => {
/* ... */
});
TestCafe对外暴露三个方法,分别是: createBrowserConnection createRunner close,详情请参考 TestCafe Class
调用 createRunner
testcafe.createRunner返回一个Runner实例,该实例对外暴露多个方法,用于配置和执行测试任务,支持链式调用,比如:
</>复制代码
const runner = testcafe.createRunner();
return runner
.src(["test1.js", "test2.js"]) // 可以提前定义一个数组,或者将需要执行的文件保存在一个文件里,更加灵活,也可以配置文件夹
.filter((testName, fixtureName, fixturePath) => {
//Add some filters based on testName, fixtureName, fixturePath
})
.browsers(["chrome:headless"])
.reporter("json", stream) // stream is the report file, like const stream = fs.createWriteStream("report.json");
.run({
selectorTimeout: 10000, // the timeout testcafe wait for an element to appear
skipJsErrors: true // to ignore JS error
});
详情请参考 Runner Class
How to write test cases Code Structure FixtureTestCafe使用fixture来组织测试用例,一个测试文件必须包含一个或多个fixture
</>复制代码
fixture(fixtureName)
fixture `fixtureName`
可以指定fixture的开始页面:
</>复制代码
fixture.page(url)
fixture.page `url`
Test Case
然后写测试用例
</>复制代码
test
.page `url`
(testName, async t=> {
/* Test Code */
})
注意传入的参数t,它是 test controller,包含测试API和测试用例上下文,使用它我们可以调用 test actions, 处理浏览器对话框,等待,执行断言。
Make Test Step Common也许你会注意到 t 是在测试用例中拿到的, 如果我们需要把一个公用的action抽出来,如何获得 t 呢?
TestCafe提供了一种直接引入t的方式,此时t不包含具体测试用例的上下文,但包含了测试API, 比如:
</>复制代码
async login() {
await t
.typeText("#user", "name")
.typeText("#pwd", "pwd")
.click("#login")
}
看到这里,也许你对typeText click很陌生,没关系,后面会提到。
Test HooksTest Hooks, 执行在Test Case之前或之后
</>复制代码
fixture.beforeEach(fn(t))
fixture.afterEach(fn(t))
test.before(fn(t))
test.after(fn(t))
注意 test.before test.after会覆盖fixture.beforeEach fixture.afterEach, Test Hooks 同样会拿到Test Controller实例。
Skip Tests可以跳过某些test case 或者fixture
</>复制代码
fixture.skip
test.skip
也可以指定只执行某些test case或fixture
</>复制代码
fixture.only
test.only
Selectors
请参考Selectors
Actions请参考Actions
AssertionsAssertion | Description |
---|---|
eql | deep equal |
notEql | not deep equal |
ok | actual is true |
notOk | actual is false |
contains | Array or String or Object or promise contains |
notContains | Array or String or Object or promise not contains |
typeOf | type check |
notTypeOf | type check |
gt | Greater than |
gte | greater than or equal to |
lt | less than |
lte | less than or equal to |
within | range from start and finish |
notWithin | not range from start and finish |
match | regex check |
notMatch | regex check |
详情请参考Assertion API
Tricks ClientFunction在之前的章节我们说在 test case 中, 我们可以执行 test controller 对外暴露的 action, 执行断言,获取上下文变量等等,但是关于 client side 的数据却无法直接拿到,比如:
</>复制代码
fixture("Fixture")
test("window", async t=> {
await t.navigateTo("url");
await t.expect(window.location.href).eql("url")
})
会报出如下错误:
</>复制代码
window is not defined
TestCafe 提供了ClientFunction构造函数,我们可以传入一个回调函数,在回调函数中可以访问 window
</>复制代码
const getWindowLocation = ClientFunction(() => window.location)
fixture("Fixture")
test("window", async t=> {
await t.navigateTo("url");
let location = await getWindowLocation();
await t.expect(location.href).eql("url")
})
Role
在很多网站中,具有不同角色的用户可以访问不同的界面或功能,TestCafe 提供了Role构造方法并且在 TestController 中暴露 UseRole方法以便切换角色。
首先引入 Role 构造函数
</>复制代码
import { Role } from "testcafe"
创建 role
</>复制代码
const user = Role(Env.LOGIN_URL, async t => {
await t
.typeText("userInput", "name")
.typeText("pwdInput", "123")
.click("submitBtn");
});
在 test case 中切换 role
</>复制代码
t.useRole(user)
How to debug
笔者认为TestCafe的调试功能不太成熟,只支持下一步等简单操作
</>复制代码
t.debug()
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97085.html
摘要:阅读原文目前测试工具有哪些项目不需要不需要端到端测试一般都需要一个容器,来运行前端应用。向快速,一致和可靠的无剥落测试问好。 阅读原文 1. 目前E2E测试工具有哪些? 项目 Web Star puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 31906 nightmare Electron 15502 ...
摘要:详情在线是一个简单的在线详情一套前端架构库说不上快速,但其集成了自定义元素可观察对象路由等,是一款轻量级的库。和等都有使用它。详情这是一本涵盖和内容的新书,可在线阅读或付费下载电子书。 01. 2018 JavaScript 测试概览 文章介绍了JavaScript测试的关键术语、测试类型、工具和方法,并简要分析了工具jsdom、Istanbul、Karma、Chai、Wallaby等...
摘要:详情在线是一个简单的在线详情一套前端架构库说不上快速,但其集成了自定义元素可观察对象路由等,是一款轻量级的库。和等都有使用它。详情这是一本涵盖和内容的新书,可在线阅读或付费下载电子书。 01. 2018 JavaScript 测试概览 文章介绍了JavaScript测试的关键术语、测试类型、工具和方法,并简要分析了工具jsdom、Istanbul、Karma、Chai、Wallaby等...
阅读 3825·2023-01-11 11:02
阅读 4321·2023-01-11 11:02
阅读 3142·2023-01-11 11:02
阅读 5254·2023-01-11 11:02
阅读 4815·2023-01-11 11:02
阅读 5602·2023-01-11 11:02
阅读 5401·2023-01-11 11:02
阅读 4107·2023-01-11 11:02