以e2e测试工具 protractor为例，分享下page object 的使用

hyj785

Protractor 是 AngularJS 团队构建的一个端对端的测试运行工具。
以这个工具为例。这里分享下  page object的使用，希望大家能给些意见，
整个公司就我一个测试，黑盒测试，自动化测试，性能测试，没人交流闭门造车。在这里希望能和大家交流下。
安装配置网上都可以找的到 这里就不多说了

page object的使用主要是为了维护方便，个人理解 就是把 页面元素， 测试用例，逻辑给分开了写。减少页面结构修改后， 修改代码的工作
我把用例拆成3个部分，页面元素（page)，步骤（step），用例（spec），另外写了1个基类 base，里面放了一些基本的方法，一个constants文件，存放用户名，密码一类的东西。

以登陆为例
page 文件： 这里放页面元素
-----------------
'use strict';
module.exports = {
  。。。
    nameInput: element(by.id('username')),
    passwordInput: element(by.id('password')),
    loginButton: element(by.id('login-btn01')),
    menu: element(by.id('account-menu')),
    logoutButton: element(by.id('logout')),
   。。。
}

---------------------------------------------------
step： 这里放逻辑，主要流程，一些方法
-------------------------------------------------
'use strict';

const step = function () {

    const page = require('./login.page.js');
    const EC = protractor.ExpectedConditions;

    this.go = () => {
        browser.get('/');
        browser.wait(EC.visibilityOf(page.loginButton), 5000, '登陆按钮没有显示')
        .then((result) => { expect(result).toBe(true) })
    }

    this.login = () => {
        let user = constants.USERS.test;
        let page = require('./login/login.page.js');
        let stant = this;
        browser.manage().deleteAllCookies();
        browser.get('/', 5000)
        browser.wait(EC.visibilityOf(page.nameInput), 50000, '名称输入文本框没有显示');
        page.nameInput.clear().sendKeys(user.name);
        page.passwordInput.clear().sendKeys(user.word);
        browser.wait(EC.textToBePresentInElementValue(page.nameInput, user.name), 5000);
        browser.wait(EC.textToBePresentInElementValue(page.passwordInput, user.word), 5000);
        page.loginButton.click();
        browser.wait(EC.visibilityOf(page.accountname), 5000, '账号名称不可见');
        page.accountname.getText().then((text) => {
            console.log(text);
            expect(text).toMatch(user.name);
        });

    };

    this.logout = () => {
        browser.get('/');
        base.wait(self.menu, 5000);
        self.menu.click();

        browser.wait(EC.visibilityOf(page.loginButton), 5000, '登录按钮不可见').
        then((result) => { expect(result).toBe(true) })
    }  
}
module.exports = new step();

------------------------------------------------
spec文件： 这里就是测试用例了
-----------------------------------------------
'use strict';

const step = require('./login.step.js');


describe('login page', function () {


    it('should navigate to the login page', function () {
        step.go();
    });

    it('should navigate to the main page', function () {
        step.login();
    });

    it('should return to the login page', function () {
        step.logout();
    });

    /* */
});


这个是启动文件，初始化的时候加载基类和constants文件
--------------------------------------------------------
exports.config = {
    framework: 'jasmine2',

    specs: [
        'login.spec.js'
    ],

   baseUrl: 'http://127.0.0.1:8080',
    directConnect: true,
    capabilities: {
        'browserName': 'chrome',
        },
    },

    onPrepare: function () {
        browser.ignoreSynchronization = true;
        global.__base = __dirname;
        global.constants = require(__base + '/bvt/constants.js');
        global.base = require(__base + '/bvt/base.js');
        jasmine.getEnv().addReporter(reporter);
    },
    jasmineNodeOpts: {
        defaultTimeoutInterval: 900000
    },
}

梦想家

+1

jingzizx