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安装

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本机路径

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

参考

• Galen
• Install Galen
• First Project-Galen