京东零售营销H5测试综述

巫溪小哥

本文从营销频道H5业务睁开，报告了H5测试的通用测试本领与实现方案，对测试工作和履历举行总结提炼。通过本文可以相识京东内常用研发架构的测试方法和实践结果。


【本文目次】

• 相识H5业务
  
• 常用测试本领
  
• 针对京东现有H5常用架构和实现方案的测试
  
• 痛点和不敷
  

配景






H5页面是营销域最常见的一种运营情势，业务通过H5来提供服务，可以满足用户对于便捷、高效和低本钱的需求。H5页面是业务直面用户的端点，其质量包管工作显得尤为告急。各业务的功能实现具有通用性，相应也有共性的测试方法，本文举行总结和分享。
1 相识H5业务







多角度认识H5业务，相识功能的实现链路，明确各个节点是由哪一方怎样实现，一方面可以打开计划用例的思绪；另一方面在碰到标题时，可以快速定位，准确反馈。


【1.1 前端展示】

1.1.1 两种开发技能

提及前端，须要起首先容两种开发技能“原生开发”、“H5开发”：
原生应用开发：是在 Android、iOS 等移动平台上利用官方提供的开发语言、开发类库、开发工具举行 App 开发。以是原生架构的 App 在应用性能上和交互体验上应该是最好的，比如APP中的“直播”、“登录”以及提示组件等是纯原生开发的模块。
H5开发：是指利用 Web 技能（HTML5、JavaScript、CSS）举行的 App 开发。H5 开发的利益是可以跨平台，编写的代码可以同时在 Android、iOS、Windows 上举行运行。当前APP内的告急活动比如“百亿补贴”、“自制包邮”以及“秒杀”等均为H5开发实现。
两种开发实现的特点对比如下：

	H5	原生
开发本钱	低：一套代码，跨平台利用	高：同样的逻辑、界面要写两套
开发周期	短：量级低，直接添加功能发布	长：更新迭代迟钝，上架时须要等候官方考核通过
调用底层功能	复杂：不能直接调用，须要桥接等其他操纵	简朴：更加贴近底层，对于调取底层功能也是很轻易
性能体验	有范围性：H5 移动应用不能直接访问装备硬件和离线存储	更优：直接运行在装备操纵体系上，通常性能更优，相应更快
摆设更新	快：只需更新服务器上的代码，用户无需下载即可享受最新功能	慢：须要通过应用市肆举行发布和更新，更新大概须要用户下载新版本
营销	较为机动：可以通过网站和交际媒体等渠道更轻易地推广	限定较多：通过应用市肆举行推广和分发，但须要服从市肆的政策和指南

1.1.2 容器角度分层

以春晚页面为例，从容器的角度，一个H5页面从顶层到底层的层级展示如下图：

此中通天塔H5 fragment容器重写了JDHybrid的CommonMFragment，X5WebView容器重写了x5webview，支持自行决定利用体系还是x5。图中涉及4方，分别是通天塔团队、JDHybrid团队、JSSDK和H5详细业务方。此中通天塔团队、JDHybrid团队是原生开发的架构，属于容器侧，JSSDK和H5详细业务方属于H5开发，各自作用可概述如下：
JDHybrid：提供环境装备信息、导航栏、页面路由、页面事故、通用JS功能、性能优化
通天塔：提供自界说的导航栏的逻辑，包罗UI和JS桥；其他复用webview容器的本领
JSSDK：同一API，调用客户端协议；同时提供性能非常上报、常用函数等
H5前端：接入JSSDK，展示页面内容，实现前端交互等业务逻辑
1.1.3 详细功能实现

详细功能的实现，通常涉及多个功能提供方，大要可分两类：
本领由JDHybrid提供的
H5通过JSSDK调JDHybrid封装的方法， JDHybrid调自身逻辑
比方：获取装备信息中的uuid
JDHybrid提供了获取装备根本信息的JS桥，按照约定的规则入参，可以即可得到uuid等信息。但原生底层API，但不再对外袒露，而是由JSSDK同一维护，京东电器的H5代码只须要调用JSSDK即可
本领由其他团队（通天塔或其他组件）提供的
H5调JS代码，颠末webview内核 ，内核调用 JDHybrid封装的同一方法， JDHybrid调通天塔（或其他插件）
比方：打开地点列表，地点列表是地点组件提供的本领，JDHybrid提供了路由方法可以通过测试demo简朴判定是否详细业务标题。
【1.2 内容数据】




能为多个业务提供同一类功能的应用，被抽象为各个“上游”。营销内容从设置到出现给用户，须要多重业务逻辑处理处罚，除本业务服务端举行风雅化业务处理处罚，还须要与各个上游举行交互。一个业务团体的功能实现，与各常见上游之间调用的链路如下图所示：

1.2.1 数据泉源

商品信息、优惠券、红包和长处点，是一个H5页面常见的元素，其底层泉源各不雷同：

页面元素	底层泉源	举例
商品信息	投放商品组
优惠券信息	券中台
红包信息	红包中台
<span ><span >长处点	业务CMS

1.2.2 数据计谋


通常，业务方不会与底层数据直接交互，而是通过多个上游，实现数据的千人千面结果，比方：
算法：根据业务设置计谋，将商品组信息整合之后提供给详细业务
UMC：基于用户数据，针对差别人群，订定发放差别权益范例的规则
互动工坊：按照活动维度，设置任务和奖品的组合规则
关于内容数据的验证，测试关键在于所配即所得，差别的用户画像得到的数据要符合业务预期。
2 常用测试本领







【2.1 测服务端】

2.1.1 查察日记

平台：泰山-日记管理
实用场景：涉及上卑鄙逻辑，且不能在前端直接观察
关注点：
通过关键字，筛选各个应用的信息，验证服务端对上游的入参、上游对服务端的返回是否符合预期
2.1.2 特别场景

平台：deeptest-mock管理
实用场景：对于一些非常场景大概界限值，营销活动或素材无法精准满足场景要求，
关注点：
可在平台上录入上游接口信息，通过mock上游返回，验证业务服务端的处理处罚逻辑
2.1.3 JMQ验证

平台：泰山-JMQ
实用场景：应用服务之间通过MQ来通讯的场景
关注点：开启消耗轨迹，验证发送给其他应用服务的MQ信息机遇是否精确，内容是否精确
2.1.4 缓存查询

平台：泰山-JIMDB
实用场景：需求改动到缓存逻辑，尤其针对长期互动类
关注点：缓存的写入时间是否及时、有用期是否公道、缓存内容精确性
2.1.5 直接调用

平台：deeptest-用例管理
实用场景：
前置操纵较长（如须要先展示再领取）、条件苛刻（如须要多重身份打标）、阈值较高须要批量操纵等
关注点：接口返回同入参预期，界限逻辑精确处理处罚
【2.2 测前端】



2.2.1 功能测试

功能	验证点
用户举动	点击 单次点击：点击事故是否被相应、多层页面是否会出现点击穿透多次点击：页面在等候数据返回过程中，后续点击举动是否会出现业务逻辑错误
	滑动 滑动速率：差别速率滑动，业务功能需保持划一，快速滑动数据加载不能太慢 滑动交互：是否支持左右横滑、滑动时是否相应点击操纵
	革新 主动革新：如下拉革新、点击按钮革新，关注页面加载举动与接口哀求被动革新：业务特别逻辑，关注触发革新机遇与交互
	体系交互 返回：一级页面返回、二级页面返回，关注返回层级和汗青欣赏纪录 输入：特别内容、格式、输入面板唤起与埋伏 退前配景：页面举动如倒计时、动画结果、接口哀求等是否被克制
多媒体干系	图片 图片展示放大、还原、切换等操纵支持
	音频和视频 差别域名下的资源加载环境 交互体验：播放、克制、退出
页面哀求	通过查察、修改HTTP、HTTPS、Websocket的哀求、相应，验证前端入参、各种数据展示逻辑是否符合预期 接口哀求 接口返回过程中动画结果 哀求机遇、接口降级、接口非常前端兜底
	资源哀求 哀求是否重复 翻页、分页场景下哀求数据精确性
登录	未登任命户路径 登录态买通 差别用户身份判定 特别账号的昵称、头像体现 利用微信或其他站外信息登录
弹框	弹框触发机遇 弹框内容的精确性 弹框的素材、动效 弹框关闭的触发条件
网络环境	差别网络环境：WiFi、3G/4G/5G 网络环境切换，用户是否有感知 弱网条件下用户体验 无网兜底逻辑
兜底测试	针对关键字段，验证“不下发”、下发为空、非常值等验证，用于规避由于非常下发导致的“开天窗”、掉楼等用户可感知的标题

2.2.2 兼容测试
覆盖原则：
Android、iOS差别体系
分身差别屏幕分辨率
如涉及到站外投放，需思量到容器版本微信版本兼容，差别原生欣赏器
体系内核、X5内核
平台：
当前已有一些主动化本领，如Airtest、活动主动化测试等以插件情势集成在赛博云测平台
2.2.3 埋点测试

关注点：埋点事故名称、上报机遇、关键字段是否与埋点方案划一
平台：track
2.2.4 与原生架构联合

功能	验证点
APP版本	须要关注组件/框架支持的最低版本，举行版本控制，界限测试 ·须要区分原生客户端，iOS、Android、鸿蒙举行功能验证
容错本领	APP改动须要重新发布，已经发版则无法利用，以是要留意验证功能开关的逻辑、设置 ·完满降级方式，如根据URL参数降级某些功能
内核兼容	体系内核：此处可简朴明白为欣赏器内核，也称渲染引擎大概排版引擎，告急对网页的语法举行表明，而且举行渲染网页，将网页的代码转换为看得到的页面，当前主流厂商多利用Chromium。·X5内核：最初由腾讯基于开源Webkit深度优化而来。基于X5内核，腾讯提供的TBS服务，整合腾讯底层欣赏技能和腾讯平台资源及本领，提供团体欣赏服务办理方案。因此京东APP内，会在APP安装好之后，下载X5内核，供H5利用

留意：
1.X5内核须要为京东APP开启存储权限，才会下载
2.X5内核下载好之后，需重启APP才可以利用
3.快速定位标题方法：利用手机自带欣赏器，访问H5页面，如果和APP内体现不划一，可缩小标题范围
【2.3 线上追踪】

需求上线之后，还须要在真实用户场景下，对需求的功能、性能和体验举行监控、分析和验证。当前公司已有的追踪平台和本领陈列如下：

平台	关注点
用户之声	真实用户反馈，侧重用户体验
行云-接口监控	监控接口的业务逻辑处理处罚，侧重业务服务的连通性、可用性
泰山-雷达大屏	可以全局视角观察体系服务康健状态，侧重全链路服务性能
UIπ-啄木鸟	检测H5活动页各类标题，侧重前端展示
烛龙	可提供多维度的用户举动信息，对排查用户标题有助益

3 针对京东现有H5常用架构和实现方案的测试







【3.1 发布】

3.1.1 ihub

大前端共建平台，基于iPaaS尺度创建，面向开发者提供包罗h5、iOS、安卓等端的跨端楼层开发管理本领。赋能开发者跨业务线、跨体系（符合iPaaS尺度）的开发内容复用、检索及二次开发等功能
验证点：
位置：楼层位于首屏，非首屏等，验证是否有非常，比如数据加载，楼层渲染等
数目：一个页面中是否利用了多个共建模板，是否有辩论
共存：共建模板与通天塔的自有模板共存时是否有非常
联动：共建模板关联锚点导航
当前已经沉淀出针对大促会场的主动化测试方法
3.1.2 通天塔可视化平台

是活动/频道页面可视化搭建平台，支持一次搭建输出H5、原生、PC等多端页面，供产研、采销运营、商家等用户免费利用
验证点：可视化设置、服务端生存与下发、前端展示正常，关注新增功能点对老功能的兼容
【3.2 性能优化】

用户可以大概正常访问页面，页面的内容才气产生代价，最洪流平镌汰页面的加载时间，进而低落跳失率，就显得尤为告急。当前公司内部已有一些较为成熟的性能优化工具，会涉及到工具接入和结果的测试验证工作。
3.2.1 页面加载过程

一个H5页面的加载过程可简朴归纳为以上几个步调，性能优化本领，告急是从提前哀求机遇、镌汰资源哀求等方面入手。
3.2.2 现有优化本领

验证原则：接入见效、接入后对业务逻辑无影响。
3.2.2.1 JDHybrid离线包

原理：
把首屏的一些静态资源(如img、js、css、html等)打包提前加载到当地磁盘，当加载页面时直接从当地磁盘（或内存）获取资源加载
验证方法：
1）日记：借助JDHybrid团队提供的测试工具（Xconsole、xdog等），确认对应资源利用离线资源
2）抓包：H5在利用该资源时，不发起网络哀求
3）hybrid快速验证工具：

利用业务：
通天塔会场、跨晚、春晚等
3.2.2.2 通天塔-数据直出

原理：前端直接从HTML中获取展示数据， 无需发起首屏接口哀求。
验证方法：抓包观察，接入的楼层不发起网络哀求
利用业务：部分通天塔会场、领券中央等
3.2.2.3 通天塔-SSR

原理：服务端渲染网页内容，而且将渲染后的HTML发送给欣赏器，欣赏器直接体现。数据直出和SSR区别在于直接加载一整个html，还是先页面、 后楼条理序的加载页面片。
验证方法：禁用JS，页面仍可加载
利用业务：百亿补贴、自制包邮等
3.2.3 优化结果验证
3.2.3.1 同业比对性能测试工具

录制用户操纵流程，通过主动化拆帧的方式，从用户视角对场景举行耗时收罗和分析。控制变量的环境下可与竞品举行性能对比与分析
3.2.3.2 烛龙

通过侵入式埋点方式，实现了对APP应用的全方位监控，及时收罗用户的性能非常数据，快速精准定位标题，发现性能瓶颈，镌汰用户流失，提拔用户体验
【3.3 风控】

H5常用的风控本领，会集在反爬和用户身份两大方向，验证的关注点在于“接入的精确性”和“计谋的有用性”。
3.3.1 代价反爬接口三件套

神盾处理
验证点：
登录加好坏名单，哀求接口，可触发处理，网关返回605
在处理页放弃验证，可返回上一页，不能循环进入处理页面
在处理页乐成验证，处理页面消散，H5页面重新加载
神盾接口加固
验证点：
入参的h5st正常，验签面板返回结果200，soa接口正常下发数据，前台页面正常展示
mock入参中非常，验签面板返回非200，soa接口在网关侧拦截（下发403大概mock数据），前台页面走业务兜底逻辑
装备指纹
验证点：body中传参精确即可
3.3.2 RCS风控

验证点：根据差别画像人群的设置计谋，验证对应pin触发业务处理处罚逻辑是否符合预期
4 痛点和不敷







1. 组件测试

组件的代码改动偏底层，测试过程相对黑盒，规定测试范围时，通常只能是重复性回归，由于更加底层的逻辑测不到，如场景无法创造等。怎样进步可测性、增长测试精准性，是须要进一步办理的标题。
2. 兼容测试

当前装备机型较多，落实到兼容测试，实在是单一举动的重复，靠人工实行耗时长，且覆盖范围有限。但当前缺乏可靠的主动化工具，可以替换兼容验证，同时低落脚本的维护本钱。
3. 测试素材

涉及到权益干系的需求，依赖真实素材，大概会拦阻测试进度。通过mock的方式条件是有一方作包管，或内容已验证，风险较大。
4. 兜底测试

大型互动中，调用接口较多，且交互复杂，但对结实性要求较高，兜底工作量较大。当前的兜底主动化工具，还须要丰富支持的场景。




作者:技能质量 丁嘉莹
泉源-微信公众号:京东零售技能
出处:https://mp.weixin.qq.com/s/AlwRQriRqVfGmWC8sgRq7w

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

时间的足迹

文章很好,学习了楼主

cutlong

很不错 谢谢分享

光速蜗牛o

谢谢楼主分享

暴力小明哥

多谢楼主的分享

gougou11

支持楼主  来学习一下

windfell

很好学习了

guti

66666666666666

xie7989

谢谢老板的帖子

jolq

来学习下,每天学习才能不断地进步 开好淘宝店