跨终端读书笔记

跨终端web

方式

• 响应式
• 多站点
• 多模板
• 多平台

mobile web

基准

核心价值

以有限的测试资源最大化测试覆盖率

数据来源

友盟等

移动分级浏览器支持 MGBS

• 分辨率
• 设备
• 浏览器

分级

描述

1. 测试基准分A主要,B次之,C可选.
2. 季度更新
3. B级别也是可选,根据不同业务的实际情况选择
4. 标记最新版本

说明

1. A级为优先级最高. 要求测试过所有的用例. 开发要按照上线标准过自测用例.
2. B级是对A级别的补充. 要求测试过所有的测试用例. 开发不要求自测.
3. C级优先级比较低, 各业务线测试测试可以抽样测试, 不需要做到测试用例完全覆盖,也不需要样式完全保持一致.如果遇到具体的bug,需要可测试一起评定bug的严重性.在双方认可的情况下,允许不解决C级的bug而发布代码.

渐进增强和平稳退化

• 渐进增强: 在高级浏览器上,作为前端,需要考虑如何理由浏览器提供的资源, 提供更好的用户体验.
• 平稳退化: 平稳退化不是不做某些功能, 卫视提供一些更合适的功能, 更合适的交互给适合的平台. 不让繁杂的功能由于不在合适的平台上使用, 而成为一个负担.

分级目标环境 GTE

• 用户层
• 核心层
• 数据层

检测

User Agent的使用

接口

流程复用

InterFace(IF)

• 接口描述:请求,响应数据格式
• 接口文档:由接口描述生成接口文档
• 接口Mock(调试):由接口描述生成接口Mock数据
• 接口校验:提供校验服务(HTTP)和检测工具包, 支持多种形式的接口校验

解决方案

• 规范: 统一的接口规范
• 文档: 对所有角色有约束的接口文档
• 校验: 数据校验工具(UI工具和HTTP服务),后端数据UT
• 流程: 接口改动通知, 接口测试数据

JOSN Schema

描述JSON数据结构的规范

定位

方案

• Hash
• History API

数据

1. 首次访问返回HTML, HTML由后端模板生成
2. 非首次访问只用AJAX请求JSON(P)数据, 在前端使用同一套模板生成HTML. 这里提到了前后端使用同一套模板, 是为了同一份逻辑在前后端维护的成本.

预览

用一些工具改写UA进行跨终端预览

Hybrid App

存储

整体方案

• 存储方案: store.js(http://github.com/marcuswestin/store.js) –localStorage + userData
• 跨域方案: 使用iframe加载代理页, 数据存储在代理页面所在的域下, 需要实现宿主与代理页之间的通信, postMessage + windows.name

同步动作

实现

Selenium

1. 启动Firefox浏览器并且启动Selenium插件
2. 启动录制
3. 在页面产生交互
4. 录制结束产生一份录制代码
5. Seienium Webdricer解析这个录制代码回放动作行为
6. 监听页面并记录测试结果

脚本录制和回放

1. PC端浏览器
2. 操作页面产生动作
3. PC端浏览器手机动作并出发Socket事件
4. Mobile端浏览器接受Socket事件, 获取到动作数据
5. Mobile端回放动作