Responsive测试

作者: Yuan_Jie | 来源:发表于2017-08-03 15:54 被阅读46次

Responsive测试

安装Galen

通过NPM安装

sudo npm install -g galenframework-cli

检查安装版本galen -v

➜  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

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

执行测试

➜  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

第二步

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

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)
    });
});

查看测试结果

➜  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

@objects
    header              id      header

= Main section =
    header:
        height 5 to 100px

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

    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]);
    });

添加关闭浏览器

driver.close();

添加页面pageObject

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

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

不同分辨率测试

  • 重新调整设备配制信息
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测试中的设备辨别和测试
    @on *
        header:
            height 5 to 100px

    @on tablet
        content:
            width 600px

    @on desktop
        content:
            width 1024px

生成测试报告

➜  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代码已变更
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


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

参考

相关文章

  • Responsive测试

    Responsive测试 如何使用Galen进行响应式测试 使用Javascript编写测试代码 完整代码:htt...

  • GitHub资源汇集(2014.10.07整理)

    js Responsive-Dashboard Bloat free responsive dashboard -...

  • Material design - Layout - Respo

    Responsive UI - 响应UI Responsive layouts in material desig...

  • HTML-Responsive Web Design

    responsive[https://www.w3schools.com/html/html_responsive...

  • Responsive UI

    Responsive layouts in material design adapt to any possib...

  • Responsive设计

    什么是响应式设计呢?维基百科是这样对响应式做的描述:"Responsive设计简单的称为RWD,是精心提供各种设备...

  • Tailwind Responsive

    关键词:响应式设计 首先需要区分下响应式与自适应之间的区别 自适应:一套模板适应所有终端,每种设备上看到的版式都是...

  • Responsive设计

    移动设备正在爆炸性地增长,成为我们日常访问互联网的终端。于是网页设计师不得不面对一个难题:如何才能在大小相同的设备...

  • Responsive设计

    移动设备正在爆炸性地增长,成为我们日常访问互联网的终端。于是网页设计师不得不面对一个难题:如何才能在大小相同的设备...

  • 响应式文字排版中的基础知识

    Responsive Typography: The Basics by oliver reichenstei...

网友评论

    本文标题:Responsive测试

    本文链接:https://www.haomeiwen.com/subject/vnuplxtx.html