Typography

活版印字


  • Home
  • Archive
  • Categories
  • Tags
  •  

© 2020 alincode

Theme Typography by Makito

Proudly published with Hexo

WebdriverIO VS Protractor 架構(2)

Posted at 2016-06-30

基本上 WebdriverIO 跟 Protractor 的 Page Object Pattern 都一樣的醜陋,這時候才會發現 Geb 的美。

WebdriverIO Page Object Pattern

1
2
3
4
5
6
7
8
9
function Page () {
this.title = 'My Page';
}

Page.prototype.open = function (path) {
browser.url('/' + path)
}

module.exports = new Page()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var Page = require('./page')

var LoginPage = Object.create(Page, {
/**
* define elements
*/
username: { get: function () { return browser.element('#username'); } },
password: { get: function () { return browser.element('#password'); } },
form: { get: function () { return browser.element('#login'); } },
flash: { get: function () { return browser.element('#flash'); } },

/**
* define or overwrite page methods
*/
open: { value: function() {
Page.open.call(this, 'login');
} },

submit: { value: function() {
this.form.submitForm();
} }
});

module.exports = LoginPage

呼叫 Page Object 使用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
var expect = require('chai').expect;
var LoginPage = require('../pageobjects/login.page');

describe('login form', function () {
it('should deny access with wrong creds', function () {
LoginPage.open();
LoginPage.username.setValue('foo');
LoginPage.password.setValue('bar');
LoginPage.submit();

expect(LoginPage.flash.getText()).to.contain('Your username is invalid!');
});
});

Protractor Page Object Pattern

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var AngularHomepage = function() {
var nameInput = element(by.model('yourName'));
var greeting = element(by.binding('yourName'));

this.get = function() {
browser.get('http://www.angularjs.org');
};

this.setName = function(name) {
nameInput.sendKeys(name);
};

this.getGreeting = function() {
return greeting.getText();
};
};

呼叫 Page Object 使用方式

1
2
3
4
5
6
7
8
describe('angularjs homepage', function() {
it('should greet the named user', function() {
var angularHomepage = new AngularHomepage();
angularHomepage.get();
angularHomepage.setName('Julie');
expect(angularHomepage.getGreeting()).toEqual('Hello Julie!');
});
});

Geb Page Object Pattern

1
2
3
4
5
6
7
8
9
10
11
import geb.Page

class LoginPage extends Page {
static url = "http://myapp.com/login"
static at = { heading.text() == "Please Login" }
static content = {
heading { $("h1") }
loginForm { $("form.login") }
loginButton(to: AdminPage) { loginForm.login() }
}
}

呼叫 Page Object 使用方式

1
2
3
4
5
6
7
8
9
10
11
12
import geb.Browser

Browser.drive {
to LoginPage
assert at(LoginPage)
loginForm.with {
username = "admin"
password = "password"
}
loginButton.click()
assert at(AdminPage)
}

Share 

 Previous post: 單元測試錯誤排解 (1) Next post: WebdriverIO vs Protractor 架構(1) 

© 2020 alincode

Theme Typography by Makito

Proudly published with Hexo