Responsive测试

安装Galen

通过NPM安装

1
sudo npm install -g galenframework-cli

检查安装版本galen -v

1
2
3
4
GalenDemo git:(master)galen -v
Galen Framework
Version: 2.3.4
JavaScript executor: Rhino 1.7 release 5 2015 01 29

第一步

创建测试文件,存放于test/step1.test.js

1
2
3
test("First test", function () {
console.log('This is first test')
});

执行测试

1
2
3
4
5
6
7
8
9
10
11
12
13
➜  GalenDemo git:(master) ✗ galen test  test/*.js
========================================
Test: First test
========================================
This is first test

========================================
----------------------------------------
========================================
Suite status: PASS
Total tests: 1
Total failed tests: 0
Total failures: 0

第二步

添加多个不同的设备,用于测试兼容性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
this.devices = {
mobile: {
deviceName: "mobile",
size: "400x700"
},
tablet: {
deviceName: "tablet",
size: "600x800"
},
desktop: {
deviceName: "desktop",
size: "1024x768"
}
};


forAll(devices, function (device) {
test("Home page on ${deviceName}", function (device){
var driver = createDriver("http://galenframework.com",
device.size,
"chrome");
console.log(device.size)
});
});

查看测试结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
➜  GalenDemo git:(master) ✗ galen test test/*.js
========================================
Test: Home page on mobile
========================================
Starting ChromeDriver 2.31.488774 (7e15618d1bf16df8bf0ecf2914ed1964a387ba0b) on port 10344
Only local connections are allowed.
Aug 01, 2017 2:34:11 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
400x700
========================================
Test: Home page on tablet
========================================
Starting ChromeDriver 2.31.488774 (7e15618d1bf16df8bf0ecf2914ed1964a387ba0b) on port 6454
Only local connections are allowed.
Aug 01, 2017 2:34:17 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
600x800
========================================
Test: Home page on desktop
========================================
Starting ChromeDriver 2.31.488774 (7e15618d1bf16df8bf0ecf2914ed1964a387ba0b) on port 42862
Only local connections are allowed.
Aug 01, 2017 2:34:23 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
1024x768

========================================
----------------------------------------
========================================
Suite status: PASS
Total tests: 3
Total failed tests: 0
Total failures: 0

第三步 引入gspec文件,来难页面布局

新增specs/home-page.gspec

1
2
3
4
5
6
@objects
header id header

= Main section =
header:
height 5 to 100px

在测试脚本step3.test.js中添加Layout检查

1
2
3
4
5
6
test("Home page on ${deviceName}", function (device){
var driver = createDriver("http://samples.galenframework.com/tutorial1/tutorial1.html",
device.size,
"chrome");
checkLayout(driver, "GalenDemo/home-page.gspec", [device.deviceName]);
});

添加关闭浏览器

1
driver.close();

添加页面pageObject

  • 新增pageObject
1
2
3
this.home = $page("home", {
content: "div#content"
});
  • 测试中引用pageObject
1
2
3
4
var homepage = new home(driver);
if (!homepage.content.exists()){
console.log("Content element don't exist")
}

第四步 不同分辨率下Layout测试及生成测试报告

不同分辨率测试

  • 重新调整设备配制信息
1
2
3
4
5
6
7
8
9
10
11
function Device(deviceName, size, tags) {
this.deviceName = deviceName;
this.size = size;
this.tags = tags;
}

this.devices = {
mobile: new Device("mobile", "450x700", ["mobile"]),
tablet: new Device("tablet", "600x800", ["tablet"]),
desktop: new Device("desktop", "1024x768", ["desktop"])
};
  • 修改layout测试中的设备辨别和测试
1
2
3
4
5
6
7
8
9
10
11
@on *
header:
height 5 to 100px

@on tablet
content:
width 600px

@on desktop
content:
width 1024px

生成测试报告

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
➜  GalenDemo git:(master) ✗ galen test test/step3.test.js --htmlreport ./report
========================================
Test: Home page on mobile
========================================
Starting ChromeDriver 2.31.488774 (7e15618d1bf16df8bf0ecf2914ed1964a387ba0b) on port 36316
Only local connections are allowed.
Aug 03, 2017 2:56:04 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
= Main section =
header:
height 5 to 100px

========================================
Test: Home page on tablet
========================================
Starting ChromeDriver 2.31.488774 (7e15618d1bf16df8bf0ecf2914ed1964a387ba0b) on port 28325
Only local connections are allowed.
Aug 03, 2017 2:56:07 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
= Main section =
header:
height 5 to 100px

content:
width 600px

========================================
Test: Home page on desktop
========================================
Starting ChromeDriver 2.31.488774 (7e15618d1bf16df8bf0ecf2914ed1964a387ba0b) on port 12177
Only local connections are allowed.
Aug 03, 2017 2:56:10 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
= Main section =
header:
height 5 to 100px

content:
width 1024px


========================================
----------------------------------------
========================================
Suite status: PASS
Total tests: 3
Total failed tests: 0
Total failures: 0
  • 从日志中可以查看到,每次在不同设备测试时layout代码已变更
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Test: Home page on desktop
========================================
Starting ChromeDriver 2.31.488774 (7e15618d1bf16df8bf0ecf2914ed1964a387ba0b) on port 12177
Only local connections are allowed.
Aug 03, 2017 2:56:10 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
= Main section =
header:
height 5 to 100px

content:
width 1024px


========================================

参考