Layout测试

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

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

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

Galen的特点

开源项目，License基于Apache License, Version 2.0
可测试页面布局、响应式设计，支持功能测试
基于Selenium，对Selenium Grid支持很好，可直接在Sauce Labs和 BrowserStack
支持并行测试，减少测试时间
语法简洁

@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

验证安装

➜  Downloads galen -v
Galen Framework
Version: 2.3.2
JavaScript executor: Rhino 1.7 release 5 2015 01 29

第一个测试项目

测试页面: http://samples.galenframework.com/tutorial1/tutorial1.html
创建一个空文件夹，新增一个文件home-page.gspec
home-page.gspec内容如下

@objects
    header              id      header

= Main section =
    header:
        height 100px

测试验证的内容是header元素的高为100px
下载一个driver，本次测试以下载chromedriver为例
- geckodriver
- chromedriver

修改配制: ~/.galen.config

浏览器配制

# 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

执行测试

galen check home-page.gspec
     --url http://samples.galenframework.com/tutorial1/tutorial1.html
     --size 640x480  
     --htmlreport .

执行测试时，会先将浏览器启动
浏览器的大小为640x480
对比header元素的height是否为100px
在当前home-page.gspec的文件夹中，会生成测试报告
以下为执行过程日志

➜  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

@objects
    header        id    header
= Main section =
    header:
        height 40px

－再次执行测试，查看测试结果

➜  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测试结合一起使用

Layout测试

Galen的特点

使用

安装

第一个测试项目

总结

参考