Web自动化测试-Protractor基础（二）

全栈程序员站长

发布于 2022-11-01 14:16:02

8020

发布于 2022-11-01 14:16:02

大家好，又见面了，我是你们的朋友全栈君。

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官网。

在实际情况中，自动化测试的逻辑会很复杂。为了脚本的可维护性，我们把页面功能和测试用例分开来写：

// 页面功能
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很流行，我们不妨来用用看。可以享受到面向对象、类型检查和编码提示等好处。

最终文件结构

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

封装页面功能

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

测试用例

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'
});
}
};

运行脚本

protractor protractor.conf.js

和之前效果一样，但被我们改成了ts版的。随着测试脚本的增多，ts的优势会越发明显。

调试

这里介绍使用VSCode调试的方法，主要就是配置launch.json。

launch.json

{
// 使用 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啦！