大家好，又见面了，我是你们的朋友全栈君。
上一篇文章的示例如下：
代码语言：javascript复制describe('测试百度搜索', function () {
it('测试protractor官网会不会出现在第一个搜索结果中', async function () {
await browser.waitForAngularEnabled(false);
await browser.driver.get('https://www.baidu.com');
await $('#kw').sendKeys('protractor');
await $('#su').click();
var EC = protractor.ExpectedConditions;
await browser.wait(EC.presenceOf($('.result.c-container h3')), 5000);
await expect($$('.result.c-container h3 a').first().getText())
.toBe('Protractor - end-to-end testing for AngularJS');
});
});示例很简单，打开百度，搜索protractor，看搜索结果第一个是不是protractor官网。
在实际情况中，自动化测试的逻辑会很复杂。为了脚本的可维护性，我们把页面功能和测试用例分开来写：
代码语言：javascript复制// 页面功能
function baidu() {
this.open = function () {
browser.waitForAngularEnabled(false);
return browser.driver.get('https://www.baidu.com');
};
this.getSearchInput = function () {
return $('#kw');
};
this.getSubmitBtn = function () {
return $('#su');
};
this.getResults = async function () {
await browser.wait(ExpectedConditions.presenceOf($('.result.c-container h3')), 5000);
return $$('.result.c-container h3 a');
};
}
// 测试用例
describe('测试百度搜索', function () {
it('测试protractor官网会不会出现在第一个搜索结果中', async function () {
var page = new baidu();
await page.open();
await page.getSearchInput().sendKeys('protractor');
await page.getSubmitBtn().click();
var searchResults = await page.getResults();
var firstResult = await searchResults[0].getText();
expect(firstResult).toBe('Protractor - end-to-end testing for AngularJS');
});
});这么写代码，function baidu()这块代码就可以复用了。
例如要测试十个关键词的搜索结果，怎么找搜索框，怎么获取结果这些逻辑我们都能复用。 以后页面结构修改，例如搜索框的id变了，我们也只用改一个地方。
另外也可以看出测试用例（describe部分）可读性更强了。
后面还可以再进一步，把function baidu()移到单独的文件中。
TypeScript
现在TypeScript很流行，我们不妨来用用看。可以享受到面向对象、类型检查和编码提示等好处。
最终文件结构
代码语言：javascript复制root
|----node_modules/
|----package.json
|----protractor.conf.js
|----src/
|----page.ts
|----spec.ts
|----tsconfig.json下面一一介绍这几个文件。
package.json
devDependencies添加了jasmine types的依赖，protractor自带ts申明文件。
这里的ts-node读者可能没见过，它可以让ts文件在node上运行，详情见官网。
{
"name": "e2e-ts",
"version": "1.0.0",
"devDependencies": { "@types/jasmine": "^2.5.51", "protractor": "^5.1.2", "ts-node": "^3.0.6", "typescript": "^2.3.4" } }tsconfig.json
代码运行在node中，因此可以大胆使用es2017。另外指定了需要加载的types文件。
{
"compilerOptions": { "module": "commonjs", "moduleResolution": "node", "target": "es2017", "lib": [ "es2017" ], "typeRoots": [ "node_modules/@types" ], "types": [ "jasmine", "node" ] } }page.ts
封装页面功能
代码语言：javascript复制import { browser, $, $$, ExpectedConditions, ElementFinder } from 'protractor';
export class Baidu {
open() {
browser.waitForAngularEnabled(false);
return browser.driver.get('https://www.baidu.com');
}
getSeachInput() {
return $('#kw');
}
getSubmitBtn() {
return $('#su');
}
private waitForSearchResults() {
return browser.wait(ExpectedConditions.presenceOf($('.result.c-container h3')), 5000);
}
async getResults(): Promise<ElementFinder[]> {
await this.waitForSearchResults();
return await $$('.result.c-container h3 a');
}
}spec.ts
测试用例
代码语言：javascript复制import { Baidu } from './page';
describe('测试百度搜索', function () {
it('测试protractor官网会不会出现在第一个搜索结果中', async function () {
let baidu = new Baidu();
await baidu.open();
await baidu.getSeachInput().sendKeys('protractor');
await baidu.getSubmitBtn().click();
let results = await baidu.getResults();
let firstResult = await results[0].getText();
expect(firstResult).toBe('Protractor - end-to-end testing for AngularJS');
});
});protractor.conf.js
protractor的配置文件，注意这个还是个js文件，并没转成ts。
内容比上一篇文章里的配置文件多了一段beforelaunch，主要用来初始化ts-node。
exports.config = {
directConnect: true,
framework: 'jasmine',
SELENIUM_PROMISE_MANAGER: false,
specs: ['src/spec.ts'],
beforeLaunch: function () {
require('ts-node').register({
project: 'tsconfig.json'
});
}
};运行脚本
代码语言：javascript复制protractor protractor.conf.js和之前效果一样，但被我们改成了ts版的。随着测试脚本的增多，ts的优势会越发明显。
调试
这里介绍使用VSCode调试的方法，主要就是配置launch.json。
launch.json
代码语言：javascript复制{
// 使用 IntelliSense 以学习相关的 Node.js 调试属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "C:/Users/apolis/AppData/Roaming/npm/node_modules/protractor/bin/protractor",
"args": [
"${workspaceRoot}/protractor.conf.js"
]
}
]
}program配置npm全局安装的protractor的路径
args指定了protractor的配置
点击VSCode的调试，就OK啦！
结束
如果读者对Protractor感兴趣，建议阅读一下官网文档。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/204284.html原文链接：https://javaforall.cn
