Web页面Layout测试,一直是测试人员比较头疼的事情。原因有

  • 当前市面中设备的分辨率千差万别
  • 浏览器版本众多,工作量很大

如何使用高效的方式来测试Web Layout是否能正常,下面来看下Galen是如何帮助我们的

Galen的特点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@objects
comments #comments
article-content div.article

= Main section =
@on mobile, tablet
comments:
width 300px
inside screen 10 to 30px top right
near article-content > 10px right

@on desktop
comments:
width ~ 100% of screen/width
below article-content > 20px

使用

安装

  • Java 1.8或更新版本
  • NPM安装

    1
    sudo npm install -g galenframework-cli
  • 验证安装

    1
    2
    3
    4
    Downloads galen -v
    Galen Framework
    Version: 2.3.2
    JavaScript executor: Rhino 1.7 release 5 2015 01 29

第一个测试项目

1
2
3
4
5
6
@objects
header id header

= Main section =
header:
height 100px
  • 测试验证的内容是header元素的高为100px
  • 下载一个driver,本次测试以下载chromedriver为例
  • 修改配制: ~/.galen.config

    • 浏览器配制

      1
      2
      3
      4
      # Default browser
      # ~~~~~~~~~~~~~~~~~~~~~~~~
      # A browser that should be used by default in case it was not specified in galen test
      galen.default.browser=chrome
    • 在配制文件内,追加driver本机路径

      1
      $.webdriver.chrome.driver=~/Documents/All/Software/driver/chromedriver
  • 执行测试

1
2
3
4
galen check home-page.gspec
--url http://samples.galenframework.com/tutorial1/tutorial1.html
--size 640x480
--htmlreport .
  • 执行测试时,会先将浏览器启动
  • 浏览器的大小为640x480
  • 对比header元素的height是否为100px
  • 在当前home-page.gspec的文件夹中,会生成测试报告
  • 以下为执行过程日志
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
➜  galenDemo galen check home-page.gspec --url http://samples.galenframework.com/tutorial1/tutorial1.html --size 640x480 --htmlreport .
========================================
Test: home-page.gspec
========================================
Starting ChromeDriver 2.25.426935 (820a95b0b81d33e42712f9198c215f703412e1a1) on port 7505
Only local connections are allowed.
Nov 28, 2016 3:15:04 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Attempting bi-dialect session, assuming Postel's Law holds true on the remote end
Nov 28, 2016 3:15:05 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
check home-page.gspec --url http://samples.galenframework.com/tutorial1/tutorial1.html --size 640x480 --htmlreport . -Dwebdriver.chrome.driver=/usr/local/lib/node_modules/galenframework-cli/node_modules/chromedriver/lib/chromedriver/chromedriver
= Main section =
header:
height 100px


========================================
----------------------------------------
========================================
Suite status: PASS
Total tests: 1
Total failed tests: 0
Total failures: 0
  • 查看测试报告

测试报告

至此,使用Galen进行单个页面布局的测试就已经结束了。下面再进行一次测试修改元素高度

  • 修改header元素的height是否为40px,home-page.gspec
1
2
3
4
5
@objects
header id header
= Main section =
header:
height 40px

- 再次执行测试,查看测试结果

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
➜  galenDemo galen check home-page.gspec --url http://samples.galenframework.com/tutorial1/tutorial1.html --size 640x480 --htmlreport .
========================================
Test: home-page.gspec
========================================
Starting ChromeDriver 2.25.426935 (820a95b0b81d33e42712f9198c215f703412e1a1) on port 9809
Only local connections are allowed.
Nov 28, 2016 3:24:11 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Attempting bi-dialect session, assuming Postel's Law holds true on the remote end
Nov 28, 2016 3:24:12 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: OSS
check home-page.gspec --url http://samples.galenframework.com/tutorial1/tutorial1.html --size 640x480 --htmlreport . -Dwebdriver.chrome.driver=/usr/local/lib/node_modules/galenframework-cli/node_modules/chromedriver/lib/chromedriver/chromedriver
= Main section =
header:
-> height 40px
-> : "header" height is 100px instead of 40px


========================================
----------------------------------------
========================================
Failed tests:
home-page.gspec

Suite status: FAIL
Total tests: 1
Total failed tests: 1
Total failures: 1
There were failures in galen tests
  • 测试失败FAIL,查看测试报告中具体报告
    • 选择Tests页签
    • 点击home-page.gspec,会自动显示具体的报错信息
      测试失败,报告显示

到目前为止,我们可以发现,使用Galen进行页面布局测试会很方便和快速,且错误信息显示足够详细

总结

  • 使用Galen进行测试时,可以很快速的切换不同的浏览器浏览器大小,来支持Layout测试
  • Galen自带的测试报告,可以帮助测试人员,快速定位出具体的问题在哪。
  • Galen基于Selenium,还可用来进行功能测试,可以将Layout测试与Function测试结合一起使用

参考