精华内容
下载资源
问答
  • 阿里QA导读:伴随智能UI的发展,淘宝大促会场已支持AI千人千面的解决方案。但智能UI模块样式庞大的数量级面前,传统的手工测试显得十分的力不从心,单纯地堆积人力已然无法解决问题,我们该如...

    阿里QA导读:伴随智能UI的发展,淘宝大促会场已支持AI千人千面的解决方案。但智能UI模块样式庞大的数量级面前,传统的手工测试显得十分的力不从心,单纯地堆积人力已然无法解决问题,我们该如何应对新的挑战?让我们来看看淘宝质量团队是如何破解这个难题。

    背景


           不同的用户有不同的偏好,不仅对于商品,对于UI也是同样如此。淘系会场的智能UI模块由此应运而生。在目前的淘系会场中,所谓的智能UI指的是借助AI提供界面千人千面的解决方案,给不同的用户展现不同的界面。在今年的双11中,智能UI模块成为了会场模块的主流方案之一,在本次双11大促中覆盖了300+的会场,使得会场除了在商品推荐上做到个性化之外,还实现了UI层面上的千人千面的个性化能力。


    现状和挑战


    什么是智能UI?

            通过对大量线上页面的研究,智能UI设计团队总结并提出了描述电商模块设计方案的模型。模型包含了界面的栅格、布局、样式等信息,具体定义见下图。

          通过上述模型,可以将电商模块的设计数据进行结构化。在实际应用中,我们将模型拆分成几个部分分别进行描述。

          以区块(Block)为例,在上图的智能UI商品模块视觉稿中,我们将整个模块划分为5个区块,分别为:封面、标题、卖点、营销活动、价格,每个区块有唯一对应的编码:A - E,每个区块可以展示不同的物料。以上图为例,该视觉稿包含的样式方案数为5个区块的乘积:3*2*8*3*1=144。前端在开发时,会根据算法接口返回的唯一编码把对应物料渲染到对应区块位置。

    测试要怎么做?

          单一模块具有如此众多的样式,势必会给测试工作带来新的挑战。为了保障线上质量,在测试工作中必须覆盖所有的样式,然而在智能UI模块样式庞大的数量级面前,传统的手工测试显得十分的力不从心。从现实角度考虑,单纯地堆积人力已然无法解决问题,因此,自动化检测就顺理成章地成为了我们唯一的选择。

    通过梳理智能UI模块的现状,我们的自动化测试方案主要需要解决以下几个问题:

    • 针对不同智能UI模块,自动获取所有样式方案,并分别生成测试页面。

    • 针对某一特定方案,自动校验数据投放和显示的逻辑,即:页面上展示的图片以及数据是否正确。

    • UI样式检测。内容包括商品坑相互之间的间距,以及商品坑与边框的边距等。

    解决方案


    测试样本生成

    //区块全部描述信息
    {
      "blocks":
        [
          {"name":"封面区","code":"A","children":["1","2","3"]},
          {"name":"标题区","code":"B","children":["1","2"]},
          {"name":"卖点区","code":"C","children":["1","2","3","4","5","6","7","8"]},
          {"name":"营销活动区","code":"D","children":["1","2","3"]},
          {"name":"价格区","code":"E","children":["1"]}
        ],
        "key": "A^1|B^2|C^4|D^1|E^1"
    }

    上述代码描述了一个智能UI模块的区块信息,其中key字段表示当前所使用的样式“A^1|B^2|C^4|D^1|E^1”:

    A1:封面区显示场景图

    B2:标题区显示算法商品名字段

    C4:卖点区显示销量字段

    D1:营销活动区显示满减字段

    E1:价格区显示价格字段

    根据模块的区块描述信息,我们很容易就可以遍历生成模块对应的所有样式。

          对于会场所使用的模块,我们开发了相应的功能,用于批量生成模块的测试页面。测试页面的数据投放方式(阿拉丁、kangaroo)以及渲染方式与线上正式页面保持一致。通过构造页面的mock数据,我们可以指定测试页面所使用的样式,同时也可以设置模块所要展示的商品或店铺等数据字段。

    自动识别

          生成模块测试页面之后,我们希望能够对于页面上的元素进行自动识别,判断是否与生成页面时所使用的mock数据相一致。

        整个识别的过程大致可以分为两个步骤:

    1. 识别坑位(商品坑、店铺坑等等);

    2. 识别坑位中的信息。

    目标检测(Object Detection)

          为了能够识别页面截图中的商品/店铺坑位,我们采用了深度学习中的目标检测算法。整个流程可以分为3个步骤:数据准备、训练、部署。

    1.数据准备

          众所周知,机器学习需要大量的数据样本用于训练。那么用于智能UI模块训练的样本需要如何生成?如果单纯依靠手工标注的方式,显然费时费力,效率低下,样本的多样性也比较难以保障。因此我们选择的是imgcook。通过imgcook提供的sketch插件,我们可以从设计师提供的sketch文件中抠出对应的模块,生成相应的DSL代码,具体详情可参考文档:https://imgcook.taobao.org/dsl。在获取到模块对应的DSL代码之后,我们就可以对所有模块进行统一管理。

          如上图所示,我们对设计稿中提取出的模块做了统一管理,并且对模块中的区域进行了进一步的标注。例如在上图的商品模块中,我们将图片区域标注为商品白底图,商品标题、商品利益点、商品描述以及价格等区域也分别进行了标注。这样做的目的,是为了在后续的样本生成中,可以自动生成更多的样本用于训练。在生成样本时,我们会从淘宝的商品池中随机选取一张商品白底图,替换上图模块中的白底图,其他商品标题价格等字段也是类似的处理方式。总的来说,标注得越细致,所生成样本的多样性越能得到保障。

          完成单个模块的数据录入之后,我们会将模块组装成类似手机截屏的样式,并自动对图中的模块进行标注,生成最终的测试样本。

           至此,为了训练所用的数据准备就基本完成。依托于淘宝庞大的商品数据库,我们可以根据需求,生成任意数量的测试样本,并自动完成标注。

    2.训练

        我们采用的是标准的Faster R-CNN模型,具体细节可参见论文:http://arxiv.org/abs/1506.01497,模型的结构如下图所示,这里就不再赘述。

          由于训练需要GPU资源,因此我们准备了一台装有2张Nvidia GTX 1080显卡的机器用于训练。从我们的使用情况来看,一般训练一个模型可以在2小时以内完成,AP(Average Precision)在95%以上。

          在实际使用中我们发现,如果直接训练模型对图片中的商品坑进行识别,识别的准确率并不理想,因此我们对方案进行了调整。如上图所示,我们首先训练的是一个比较粗粒度的模型,对图片中的布局进行一个识别,识别出其中的1排1、1排2、1排3、底部bar等模块。其次,我们又训练了一个坑位级识别的模型,对上一步识别的结果进行再一次的识别,最终达到的效果,可以将1排2、1排3等常规模块中的每个坑位都识别出来,也可以识别出组件中的按钮等元素。

    3.部署

          最终我们需要将完成训练完成的模型进行部署。我们在训练中使用的是PyTorch,可以选择相应的平台完成相关模型的部署。

    内容识别

          在对模块进行识别之后,我们需要对模块中的内容进行进一步的识别,以校验模块内容是否正确。整个校验可以分为两部分:

    1. 图片校验。基于OpenCV,校验mock数据中所使用的图片是否在模块中展示。

    2. 文字校验。基于OCR能力,校验mock数据中的文字信息是否在模块中正确显示。

          在实践中,首先我们会检测页面上识别到的坑位数是否与mock数据一致。其次,我们会分别检测每个坑位的图片以及文字信息是否与对应的mock数据相符合。

    UI样式检测

          在智能UI模块的设计中,设计师规定了模块与边框的距离已经商品坑位相互之间的间距,但在具体实现中开发可能会有所疏漏,因此我们设计了对应的自动检测能力。

          以上图中的第一个坑位为例,通过目标检测我们可以从图片中识别到坑位的位置,然而由于精度问题,算法识别出的边框与实际边框存在一定的误差,因此我们无法直接通过算法识别到的坑位边框来进行边距的计算。为了解决这个问题,我们可以在生成测试页面的时候指定页面的背景色(非白色),然后基于目标检测算法识别到的坑位边框,以一定的偏移量向上/向下/向左/向右比较图片中像素点的颜色是否与背景色一致,从而定位到准确的坑位边框,最终实现边距的精确计算。

    其他

          不可避免的是,智能UI中依然有部分功能需要涉及人工测试,比如线上会场的真实数据以及真实页面的校验。此外,整个自动化测试也需要留底用于日后的校验或复盘。基于上述考虑,我们也做了相应功能的开发。目前我们的系统支持mock页面的生成,也支持线上页面的获取。在截图方面,我们可以通过浏览器模拟手机页面来截图,也支持通过指定的手机真机来截图。

          此外,通过上文对于智能UI模块的分析可以发现,智能UI模块样式在生成的过程中,采用的是类似笛卡尔积的方式,将不同区域的物料进行了一个组合。在具体的测试过程中,特别是针对人工测试,我们认识到,没有必要对每一种样式都进行测试,只要检测的样式可以覆盖所有的物料,就可以保障模块的质量。因此,我们对每个智能UI模块生成的样式进行了去重处理,使得需检测的样式降低了一个数量级,从而大大减少了工作量。

    总结

          在2020年的双十一中,我们通过上述方案对智能UI模块进行了质量保障,累计覆盖样式20000+。总体而言,整个智能UI方案接受住了大促的考验,线上未产生故障或bug,同时也为业务带来了稳定的增长,智能UI逐渐成为流量精细化运营不可或缺的新能力。

    end

    
    
    展开全文
  • 阿里QA导读:伴随智能UI的发展,淘宝大促会场已支持AI千人千面的解决方案。但智能UI模块样式庞大的数量级面前,传统的手工测试显得十分的力不从心,单纯地堆积人力已然无法解决问题,我们该如何...

    阿里QA导读:伴随智能UI的发展,淘宝大促会场已支持AI千人千面的解决方案。但智能UI模块样式庞大的数量级面前,传统的手工测试显得十分的力不从心,单纯地堆积人力已然无法解决问题,我们该如何应对新的挑战?让我们来看看淘宝质量团队是如何破解这个难题。

    背景

    不同的用户有不同的偏好,不仅对于商品,对于UI也是同样如此。淘系会场的智能UI模块由此应运而生。在目前的淘系会场中,所谓的智能UI指的是借助AI提供界面千人千面的解决方案,给不同的用户展现不同的界面。在今年的双11中,智能UI模块成为了会场模块的主流方案之一,在本次双11大促中覆盖了300+的会场,使得会场除了在商品推荐上做到个性化之外,还实现了UI层面上的千人千面的个性化能力。


    现状和挑战


    什么是智能UI?

    通过对大量线上页面的研究,智能UI设计团队总结并提出了描述电商模块设计方案的模型。模型包含了界面的栅格、布局、样式等信息,具体定义见下图。

    通过上述模型,可以将电商模块的设计数据进行结构化。在实际应用中,我们将模型拆分成几个部分分别进行描述。

    以区块(Block)为例,在上图的智能UI商品模块视觉稿中,我们将整个模块划分为5个区块,分别为:封面、标题、卖点、营销活动、价格,每个区块有唯一对应的编码:A - E,每个区块可以展示不同的物料。以上图为例,该视觉稿包含的样式方案数为5个区块的乘积:3*2*8*3*1=144。前端在开发时,会根据算法接口返回的唯一编码把对应物料渲染到对应区块位置。


    测试要怎么做?

    单一模块具有如此众多的样式,势必会给测试工作带来新的挑战。为了保障线上质量,在测试工作中必须覆盖所有的样式,然而在智能UI模块样式庞大的数量级面前,传统的手工测试显得十分的力不从心。从现实角度考虑,单纯地堆积人力已然无法解决问题,因此,自动化检测就顺理成章地成为了我们唯一的选择。

    通过梳理智能UI模块的现状,我们的自动化测试方案主要需要解决以下几个问题:

    • 针对不同智能UI模块,自动获取所有样式方案,并分别生成测试页面。

    • 针对某一特定方案,自动校验数据投放和显示的逻辑,即:页面上展示的图片以及数据是否正确。

    • UI样式检测。内容包括商品坑相互之间的间距,以及商品坑与边框的边距等。

    解决方案


    测试样本生成

    //区块全部描述信息
    {
      "blocks":
        [
          {"name":"封面区","code":"A","children":["1","2","3"]},
          {"name":"标题区","code":"B","children":["1","2"]},
          {"name":"卖点区","code":"C","children":["1","2","3","4","5","6","7","8"]},
          {"name":"营销活动区","code":"D","children":["1","2","3"]},
          {"name":"价格区","code":"E","children":["1"]}
        ],
        "key": "A^1|B^2|C^4|D^1|E^1"
    }

    上述代码描述了一个智能UI模块的区块信息,其中key字段表示当前所使用的样式“A^1|B^2|C^4|D^1|E^1”:

    A1:封面区显示场景图

    B2:标题区显示算法商品名字段

    C4:卖点区显示销量字段

    D1:营销活动区显示满减字段

    E1:价格区显示价格字段

    根据模块的区块描述信息,我们很容易就可以遍历生成模块对应的所有样式。

    对于会场所使用的模块,我们开发了相应的功能,用于批量生成模块的测试页面。测试页面的数据投放方式(阿拉丁、kangaroo)以及渲染方式与线上正式页面保持一致。通过构造页面的mock数据,我们可以指定测试页面所使用的样式,同时也可以设置模块所要展示的商品或店铺等数据字段。


    自动识别

    生成模块测试页面之后,我们希望能够对于页面上的元素进行自动识别,判断是否与生成页面时所使用的mock数据相一致。

    整个识别的过程大致可以分为两个步骤:

    1. 识别坑位(商品坑、店铺坑等等);

    2. 识别坑位中的信息。

    目标检测(Object Detection)

    为了能够识别页面截图中的商品/店铺坑位,我们采用了深度学习中的目标检测算法。整个流程可以分为3个步骤:数据准备、训练、部署。

    1.数据准备

    众所周知,机器学习需要大量的数据样本用于训练。那么用于智能UI模块训练的样本需要如何生成?如果单纯依靠手工标注的方式,显然费时费力,效率低下,样本的多样性也比较难以保障。因此我们选择的是imgcook。通过imgcook提供的sketch插件,我们可以从设计师提供的sketch文件中抠出对应的模块,生成相应的DSL代码,具体详情可参考文档:https://imgcook.taobao.org/dsl。在获取到模块对应的DSL代码之后,我们就可以对所有模块进行统一管理。

    如上图所示,我们对设计稿中提取出的模块做了统一管理,并且对模块中的区域进行了进一步的标注。例如在上图的商品模块中,我们将图片区域标注为商品白底图,商品标题、商品利益点、商品描述以及价格等区域也分别进行了标注。这样做的目的,是为了在后续的样本生成中,可以自动生成更多的样本用于训练。在生成样本时,我们会从淘宝的商品池中随机选取一张商品白底图,替换上图模块中的白底图,其他商品标题价格等字段也是类似的处理方式。总的来说,标注得越细致,所生成样本的多样性越能得到保障。

    完成单个模块的数据录入之后,我们会将模块组装成类似手机截屏的样式,并自动对图中的模块进行标注,生成最终的测试样本。

    至此,为了训练所用的数据准备就基本完成。依托于淘宝庞大的商品数据库,我们可以根据需求,生成任意数量的测试样本,并自动完成标注。

    2.训练

    我们采用的是标准的Faster R-CNN模型,具体细节可参见论文:http://arxiv.org/abs/1506.01497,模型的结构如下图所示,这里就不再赘述。

    由于训练需要GPU资源,因此我们准备了一台装有2张Nvidia GTX 1080显卡的机器用于训练。从我们的使用情况来看,一般训练一个模型可以在2小时以内完成,AP(Average Precision)在95%以上。

    在实际使用中我们发现,如果直接训练模型对图片中的商品坑进行识别,识别的准确率并不理想,因此我们对方案进行了调整。如上图所示,我们首先训练的是一个比较粗粒度的模型,对图片中的布局进行一个识别,识别出其中的1排1、1排2、1排3、底部bar等模块。其次,我们又训练了一个坑位级识别的模型,对上一步识别的结果进行再一次的识别,最终达到的效果,可以将1排2、1排3等常规模块中的每个坑位都识别出来,也可以识别出组件中的按钮等元素。

    3.部署

    最终我们需要将完成训练完成的模型进行部署。我们在训练中使用的是PyTorch,可以选择相应的平台完成相关模型的部署。

    内容识别

    在对模块进行识别之后,我们需要对模块中的内容进行进一步的识别,以校验模块内容是否正确。整个校验可以分为两部分:

    1. 图片校验。基于OpenCV,校验mock数据中所使用的图片是否在模块中展示。

    2. 文字校验。基于OCR能力,校验mock数据中的文字信息是否在模块中正确显示。

    在实践中,首先我们会检测页面上识别到的坑位数是否与mock数据一致。其次,我们会分别检测每个坑位的图片以及文字信息是否与对应的mock数据相符合。

    UI样式检测

    在智能UI模块的设计中,设计师规定了模块与边框的距离已经商品坑位相互之间的间距,但在具体实现中开发可能会有所疏漏,因此我们设计了对应的自动检测能力。

    以上图中的第一个坑位为例,通过目标检测我们可以从图片中识别到坑位的位置,然而由于精度问题,算法识别出的边框与实际边框存在一定的误差,因此我们无法直接通过算法识别到的坑位边框来进行边距的计算。为了解决这个问题,我们可以在生成测试页面的时候指定页面的背景色(非白色),然后基于目标检测算法识别到的坑位边框,以一定的偏移量向上/向下/向左/向右比较图片中像素点的颜色是否与背景色一致,从而定位到准确的坑位边框,最终实现边距的精确计算。

    其他

    不可避免的是,智能UI中依然有部分功能需要涉及人工测试,比如线上会场的真实数据以及真实页面的校验。此外,整个自动化测试也需要留底用于日后的校验或复盘。基于上述考虑,我们也做了相应功能的开发。目前我们的系统支持mock页面的生成,也支持线上页面的获取。在截图方面,我们可以通过浏览器模拟手机页面来截图,也支持通过指定的手机真机来截图。

    此外,通过上文对于智能UI模块的分析可以发现,智能UI模块样式在生成的过程中,采用的是类似笛卡尔积的方式,将不同区域的物料进行了一个组合。在具体的测试过程中,特别是针对人工测试,我们认识到,没有必要对每一种样式都进行测试,只要检测的样式可以覆盖所有的物料,就可以保障模块的质量。因此,我们对每个智能UI模块生成的样式进行了去重处理,使得需检测的样式降低了一个数量级,从而大大减少了工作量。

    总结

    在2020年的双十一中,我们通过上述方案对智能UI模块进行了质量保障,累计覆盖样式20000+。总体而言,整个智能UI方案接受住了大促的考验,线上未产生故障或bug,同时也为业务带来了稳定的增长,智能UI逐渐成为流量精细化运营不可或缺的新能力。


    - EOF -

    想要加入中生代架构群的小伙伴,请添加群合伙人大白的微信

    申请备注(姓名+公司+技术方向)才能通过哦!

    阿里技术精彩文章推荐

    往期推荐

    深度:揭秘阿里巴巴的客群画像

    多隆:从工程师到阿里巴巴合伙人

    阿里技术专家楚衡:架构制图的工具与方法论

    蚂蚁集团技术专家山丘:性能优化常见压测模型及优缺点

    阿里文娱技术专家战獒: 领域驱动设计详解之What, Why, How?

    阿里专家马飞翔:一文读懂架构整洁之道

    阿里专家常昊:新人如何上手项目管理?

    蚂蚁集团沈凋墨:Kubernetes-微内核的分布式操作系统

    阿里合伙人范禹:常挂在阿里技术人嘴边的四句土话

    阿里技术专家都铎:一文搞懂技术债

    支付宝研究员兼OceanBase总架构师杨传辉:我在数据库梦之队的十年成长路

    阿里技术专家麒烨:修炼测试基本功

    阿里计算平台掌门人贾扬清:我对人工智能方向的一点浅见

    蚂蚁资深算法专家周俊:从原理到落地,支付宝如何打造保护隐私的共享智能?

    阿里高级技术专家箫逸:如何画好一张架构图?

    阿里高级技术专家张建飞:应用架构分离业务逻辑和技术细节之道

    蚂蚁科技 Service Mesh 落地实践与挑战 | GIAC 实录

    阿里6年,我的技术蜕变之路!

    蚂蚁集团涵畅:再启程,Service Mesh 前路虽长,尤可期许

    阿里P9专家右军:大话软件质量稳定性

    阿里合伙人程立:阿里15年,我撕掉了身上两个标签

    阿里高工流生 | 云原生时代的 DevOps 之道

    阿里高级技术专家邱小侠:微服务架构的理论基础 - 康威定律

    阿里P9专家右军:以终为始的架构设计

    阿里P8架构师:淘宝技术架构从1.0到4.0的架构变迁!12页PPT详解

    阿里技术:如何画出一张合格的技术架构图?

    蚂蚁资深技术专家王旭:开源项目是如何让这个世界更安全的?

    阿里资深技术专家崮德:8 个影响我职业生涯的重要技能

    儒枭:我看技术人的成长路径

    阿里高级技术专家宋意:平凡人在阿里十年的成长之旅

    阿里技术专家甘盘:浅谈双十一背后的支付宝LDC架构和其CAP分析

    阿里技术专家光锥:亿级长连网关的云原生演进之路

    阿里云原生张羽辰:服务发现技术选型那点事儿

    蚂蚁研究员玉伯:做一个简单自由有爱的技术人

    阿里高级技术专家至简: Service Mesh 在超大规模场景下的落地挑战

    阿里巴巴山猎:手把手教你玩转全链路监控

    阿里涉江:你真的会学习吗?从结构化思维说起

    蚂蚁金服资深技术专家经国:云原生时代微服务的高可用架构设计

    深入分布式缓存之EVCache探秘开局篇

       END     
    #架构师必备#
    
    点分享点点赞点在看
    
    展开全文
  • 1. IT Mill ToolkitIT Mill Toolkit是一个开源的Web UI 框架,为富 Web 应用程序提供widgets 和工具。无需担忧Web 浏览器、DOM 、 JavaScript的兼容性性问题。2. LivePipe UILivePipe UI 是一系列基于 Prototype ...

    1. IT Mill Toolkit

    IT Mill Toolkit是一个开源的Web UI 框架,为富 Web 应用程序提供widgets 和工具。无需担忧Web 浏览器、DOM 、 JavaScript的兼容性性问题。

    2. LivePipe UI

    LivePipe UI 是一系列基于 Prototype  JavaScript 框架建立的高质量Web 2.0 widgets 和 controls 应用。 每一个应用都经过正常测试,具有高扩展性,完善的文档可以帮助你更好地学习使用这个Web UI框架。

    3. Iwebkit iPhone/iPod touch 框架

    Iwebkit 帮助你在几分钟时间内创建一个高质量的 iPhone 和 iPod touch 网站,应用非常广泛。

    4. Jitsu

    Jitsu 包含一系列完善的工具,帮助开发者建立和部署精密成熟的用户接口,它还包括Xml标记语言、 页面编译器、数据绑定、JavaScript runtime、控制库、 runtime inspector、 animation engine、 cross-platform library、 Ajax 和 back button 等。

    5. MochaUI

    MochaUI 是一个基于 Mootools JavaScript 框架建立的Web UI 库,它包括:Web应用、Web 桌面、 Web网站开发、 widgets、窗体、语义化等功能。

    6. Echo Web Framework

    Echo是一个为富 Web 应用开发的开源框架。目的时实现 Web 客户端应用接近桌面应用。

    7. The Yahoo! User Interface Library (YUI)

    The YUI Library 这个库相信大家都不陌生,用 JavaScript 编写,目的时为建立更加完善的Web 交互性应用。包括 DOM scripting、 DHTML、AJAX等技术。 YUI 基于 BSD 协议对所有用户免费。

    8. Sigma Ajax UI builder

    SigmaVisual 由 javascript 和 PHP 编写,是一个可视化的 AJAX UI 创建工具,开发者使用SigmaVisual 可以在建立原型和真实的Web应用过程中节省时间,提高效率。

    9. WUI Web UI 框架

    WUI (Web User Interface)Web用户界面是一个 MVC 框架,使用Java语言编写。

    10. Butterfly Web UI

    Butterfly Web UI 和其他的Web UI框架比较,其优势是很好地集成  Butterfly DI Container,帮助你构建和减少在Web 应用中的内部组件使用,优化结构。

    展开全文
  • 阿里QA导读:伴随智能UI的发展,淘宝大促会场已支持AI千人千面的解决方案。但智能UI模块样式庞大的数量级面前,传统的手工测试显得十分的力不从心,单纯地堆积人力已然无法解决问题,我们该如何...

    阿里QA导读:伴随智能UI的发展,淘宝大促会场已支持AI千人千面的解决方案。但智能UI模块样式庞大的数量级面前,传统的手工测试显得十分的力不从心,单纯地堆积人力已然无法解决问题,我们该如何应对新的挑战?让我们来看看淘宝质量团队是如何破解这个难题。

    背景


           不同的用户有不同的偏好,不仅对于商品,对于UI也是同样如此。淘系会场的智能UI模块由此应运而生。在目前的淘系会场中,所谓的智能UI指的是借助AI提供界面千人千面的解决方案,给不同的用户展现不同的界面。在今年的双11中,智能UI模块成为了会场模块的主流方案之一,在本次双11大促中覆盖了300+的会场,使得会场除了在商品推荐上做到个性化之外,还实现了UI层面上的千人千面的个性化能力。


    现状和挑战


    什么是智能UI?

            通过对大量线上页面的研究,智能UI设计团队总结并提出了描述电商模块设计方案的模型。模型包含了界面的栅格、布局、样式等信息,具体定义见下图。

          通过上述模型,可以将电商模块的设计数据进行结构化。在实际应用中,我们将模型拆分成几个部分分别进行描述。

          以区块(Block)为例,在上图的智能UI商品模块视觉稿中,我们将整个模块划分为5个区块,分别为:封面、标题、卖点、营销活动、价格,每个区块有唯一对应的编码:A - E,每个区块可以展示不同的物料。以上图为例,该视觉稿包含的样式方案数为5个区块的乘积:3*2*8*3*1=144。前端在开发时,会根据算法接口返回的唯一编码把对应物料渲染到对应区块位置。

    测试要怎么做?

          单一模块具有如此众多的样式,势必会给测试工作带来新的挑战。为了保障线上质量,在测试工作中必须覆盖所有的样式,然而在智能UI模块样式庞大的数量级面前,传统的手工测试显得十分的力不从心。从现实角度考虑,单纯地堆积人力已然无法解决问题,因此,自动化检测就顺理成章地成为了我们唯一的选择。

    通过梳理智能UI模块的现状,我们的自动化测试方案主要需要解决以下几个问题:

    • 针对不同智能UI模块,自动获取所有样式方案,并分别生成测试页面。

    • 针对某一特定方案,自动校验数据投放和显示的逻辑,即:页面上展示的图片以及数据是否正确。

    • UI样式检测。内容包括商品坑相互之间的间距,以及商品坑与边框的边距等。

    解决方案


    测试样本生成

    //区块全部描述信息
    {
      "blocks":
        [
          {"name":"封面区","code":"A","children":["1","2","3"]},
          {"name":"标题区","code":"B","children":["1","2"]},
          {"name":"卖点区","code":"C","children":["1","2","3","4","5","6","7","8"]},
          {"name":"营销活动区","code":"D","children":["1","2","3"]},
          {"name":"价格区","code":"E","children":["1"]}
        ],
        "key": "A^1|B^2|C^4|D^1|E^1"
    }

    上述代码描述了一个智能UI模块的区块信息,其中key字段表示当前所使用的样式“A^1|B^2|C^4|D^1|E^1”:

    A1:封面区显示场景图

    B2:标题区显示算法商品名字段

    C4:卖点区显示销量字段

    D1:营销活动区显示满减字段

    E1:价格区显示价格字段

    根据模块的区块描述信息,我们很容易就可以遍历生成模块对应的所有样式。

          对于会场所使用的模块,我们开发了相应的功能,用于批量生成模块的测试页面。测试页面的数据投放方式(阿拉丁、kangaroo)以及渲染方式与线上正式页面保持一致。通过构造页面的mock数据,我们可以指定测试页面所使用的样式,同时也可以设置模块所要展示的商品或店铺等数据字段。

    自动识别

          生成模块测试页面之后,我们希望能够对于页面上的元素进行自动识别,判断是否与生成页面时所使用的mock数据相一致。

        整个识别的过程大致可以分为两个步骤:

    1. 识别坑位(商品坑、店铺坑等等);

    2. 识别坑位中的信息。

    目标检测(Object Detection)

          为了能够识别页面截图中的商品/店铺坑位,我们采用了深度学习中的目标检测算法。整个流程可以分为3个步骤:数据准备、训练、部署。

    1.数据准备

          众所周知,机器学习需要大量的数据样本用于训练。那么用于智能UI模块训练的样本需要如何生成?如果单纯依靠手工标注的方式,显然费时费力,效率低下,样本的多样性也比较难以保障。因此我们选择的是imgcook。通过imgcook提供的sketch插件,我们可以从设计师提供的sketch文件中抠出对应的模块,生成相应的DSL代码,具体详情可参考文档:https://imgcook.taobao.org/dsl。在获取到模块对应的DSL代码之后,我们就可以对所有模块进行统一管理。

          如上图所示,我们对设计稿中提取出的模块做了统一管理,并且对模块中的区域进行了进一步的标注。例如在上图的商品模块中,我们将图片区域标注为商品白底图,商品标题、商品利益点、商品描述以及价格等区域也分别进行了标注。这样做的目的,是为了在后续的样本生成中,可以自动生成更多的样本用于训练。在生成样本时,我们会从淘宝的商品池中随机选取一张商品白底图,替换上图模块中的白底图,其他商品标题价格等字段也是类似的处理方式。总的来说,标注得越细致,所生成样本的多样性越能得到保障。

          完成单个模块的数据录入之后,我们会将模块组装成类似手机截屏的样式,并自动对图中的模块进行标注,生成最终的测试样本。

           至此,为了训练所用的数据准备就基本完成。依托于淘宝庞大的商品数据库,我们可以根据需求,生成任意数量的测试样本,并自动完成标注。

    2.训练

        我们采用的是标准的Faster R-CNN模型,具体细节可参见论文:http://arxiv.org/abs/1506.01497,模型的结构如下图所示,这里就不再赘述。

          由于训练需要GPU资源,因此我们准备了一台装有2张Nvidia GTX 1080显卡的机器用于训练。从我们的使用情况来看,一般训练一个模型可以在2小时以内完成,AP(Average Precision)在95%以上。

          在实际使用中我们发现,如果直接训练模型对图片中的商品坑进行识别,识别的准确率并不理想,因此我们对方案进行了调整。如上图所示,我们首先训练的是一个比较粗粒度的模型,对图片中的布局进行一个识别,识别出其中的1排1、1排2、1排3、底部bar等模块。其次,我们又训练了一个坑位级识别的模型,对上一步识别的结果进行再一次的识别,最终达到的效果,可以将1排2、1排3等常规模块中的每个坑位都识别出来,也可以识别出组件中的按钮等元素。

    3.部署

          最终我们需要将完成训练完成的模型进行部署。我们在训练中使用的是PyTorch,可以选择相应的平台完成相关模型的部署。

    内容识别

          在对模块进行识别之后,我们需要对模块中的内容进行进一步的识别,以校验模块内容是否正确。整个校验可以分为两部分:

    1. 图片校验。基于OpenCV,校验mock数据中所使用的图片是否在模块中展示。

    2. 文字校验。基于OCR能力,校验mock数据中的文字信息是否在模块中正确显示。

          在实践中,首先我们会检测页面上识别到的坑位数是否与mock数据一致。其次,我们会分别检测每个坑位的图片以及文字信息是否与对应的mock数据相符合。

    UI样式检测

          在智能UI模块的设计中,设计师规定了模块与边框的距离已经商品坑位相互之间的间距,但在具体实现中开发可能会有所疏漏,因此我们设计了对应的自动检测能力。

          以上图中的第一个坑位为例,通过目标检测我们可以从图片中识别到坑位的位置,然而由于精度问题,算法识别出的边框与实际边框存在一定的误差,因此我们无法直接通过算法识别到的坑位边框来进行边距的计算。为了解决这个问题,我们可以在生成测试页面的时候指定页面的背景色(非白色),然后基于目标检测算法识别到的坑位边框,以一定的偏移量向上/向下/向左/向右比较图片中像素点的颜色是否与背景色一致,从而定位到准确的坑位边框,最终实现边距的精确计算。

    其他

          不可避免的是,智能UI中依然有部分功能需要涉及人工测试,比如线上会场的真实数据以及真实页面的校验。此外,整个自动化测试也需要留底用于日后的校验或复盘。基于上述考虑,我们也做了相应功能的开发。目前我们的系统支持mock页面的生成,也支持线上页面的获取。在截图方面,我们可以通过浏览器模拟手机页面来截图,也支持通过指定的手机真机来截图。

          此外,通过上文对于智能UI模块的分析可以发现,智能UI模块样式在生成的过程中,采用的是类似笛卡尔积的方式,将不同区域的物料进行了一个组合。在具体的测试过程中,特别是针对人工测试,我们认识到,没有必要对每一种样式都进行测试,只要检测的样式可以覆盖所有的物料,就可以保障模块的质量。因此,我们对每个智能UI模块生成的样式进行了去重处理,使得需检测的样式降低了一个数量级,从而大大减少了工作量。

    总结

          在2020年的双十一中,我们通过上述方案对智能UI模块进行了质量保障,累计覆盖样式20000+。总体而言,整个智能UI方案接受住了大促的考验,线上未产生故障或bug,同时也为业务带来了稳定的增长,智能UI逐渐成为流量精细化运营不可或缺的新能力。


    10年IT老兵酒后吐真言,我看了5遍...

    2021-08-02

    我要重构“软件行业”......

    2021-07-30

    刘朋:程序员如何练就领导力

    2021-07-29

    山哥新作:架构师必备技能之业务分析

    2021-07-26

    浅谈云原生架构的 7 个原则

    2021-07-23

    展开全文
  • 今天我们一起来聊一聊智能化WebUI自动化测试框架recheck-web如何使用。 引言 如果你在项目中使用过WebUI自动化测试,那么如下的一些状况想必你肯定遇见过: 1、当端到端的WebUI自动化测试执行失败后,你也无法确定是...
  • 很高兴可以再次与你在智能化测试专栏中相遇。在前面的两节课程中我们一起学习了智能化单元测试中的技术方向以及现在相对成熟的EvoSuite框架的使用,然后我把我自己亲身经历的智能化接口测试框架的一些关键技术拿出来...
  • 源码地址:https://pan.baidu.com/s/1Y3aSQDnpNbJ5siQZSETKkg 提取码:oc48
  • CodeFun-UI 设计稿智能生成前端源代码

    千次阅读 2021-08-12 11:31:16
    CodeFun这个UI 设计稿智能生成前端源代码的工具,为我们提高工作效率,减少力气活节省了很多时间,用这些时间来做更有意义的事岂不是更香嘛。(膜拜解放CodeFun开发团队) 使用: 1.官网注册登录...
  • CodeFun是一款 UI 设计稿智能生成源代码的工具,可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。这是来自CodeFun官方定义,看到这里不少同学肯定会想到另外一款工具-蓝湖,如果CodeFun的作用仅仅类似于...
  • 回首受疫情影响的2020年,工作、学习、购物几乎都是依靠互联网来实现,远程办公、远程学习、网上学习、网上购物也不断从年轻群体扩散...目前相当多一部分从事UI设计工作的设计师,是平面设计、网页设计、程序员、美工、
  • 千万不要当成是邮箱账户名了,否正会报错提示文件夹不存,害的我搞了几个小时,一直没有找到对于这个值的详细说明,于是只能请求度娘,找到了http://dotnetbasic.com/2019/07/uipath-email-automation.html 这个时...
  • 请记住这个名字,后面我想用,ui.pbn_MyButton 来访问。 结果我发现:不提示!!!!! 我做了几步错误的尝试: 1、重新编译了ui文件。 2、重新编译工程,发现,仍然没有提示。 重点: **1、接下来我关闭了VS 然后...
  • CodeFun 是一款 UI 设计稿智能生成源代码的工具,可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。它最大的特色是: 精准还原设计稿,不再需要反复 UI 走查 可以生成如工程师手写一般的代码 在日常工作中...
  • 在 Android 连接世界的大潮中,智能电视也无法幸免,成为了浪潮中的一员。我们平常拿着电视遥控器,随意地上下左右切换选中的频道图标,再按确认键进入我们所选的频道。这看似十分平常的一个习惯,殊不知 Android ...
  • 甚至更好的开发人员也可以使用智能功能来扩展编程语言,从而更易于阅读和编写简洁的代码。 让我向您展示Swift的5个代码扩展,这些代码扩展我每天都会使用。每个细节都会详细说明,并会根据其背景/原始意图进行重新...
  • 86 盒智能新型开关面板是基于公司 8ms GUI 平台开发的,用户新建工程后,在设计器实现 UI设计。 针对86面板UI,启明云端在8ms开发工具平台上提供了丰富的素材,您可以一健克隆,快速出品产品DEMO。 方案主要特性:...
  • CodeFun 是一款 UI 设计稿智能生成源代码的工具,可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。它最大的特色是: 精准还原设计稿,不再需要反复 UI 走查 可以生成如工程师手写一般的代码 在日常工作中...
  • 3)智能机器人问答功能 依据训练的模型库对用户输入的相关信息检索关键字返回问 题相关答案,从而达到人机交互、智能问答的目的。 4)同城电商平台 除下单、购物车等一般功能外,还提供商铺入驻功能,大学生可以 ...
  • vue-uieditor

    2021-06-18 04:07:08
    VUE 可视化编辑器(vue-uieditor)基于 VUE 2.x在线可视化VUE开发,所见即所得支持 es2015 JS 语法开发结果不用二次编译,马上可以使用减轻开发成本,提升项目维护效率可实现低代码开发相关资源安装与使用安装yarn add...
  • 前端智能化历时三年有余,从最初被误解为“用 AI 包装自己的 PPT 产品...到 imgcook.com 发布上线。从淘系技术双十一零研发战役,到赋能十余个 BU。从 QCon 十周年分...
  • UiPath窗口介绍

    2021-09-09 19:12:20
    UiPath Studio是一个完整的应用程序集成解决方案,可自动化第三方应用程序,管理IT任务和业务IT流程。RPA之家的Studio中最重要的概念之一是自动化项目。 项目是业务流程的图形表示。通过让您完全控制执行顺序以及...
  • 【基于python实现UI自动化】selenium环境搭建[1.0 selenium工具介绍](https://blog.csdn.net/lht3347/article/details/111246921)Windows搭建...通过前面的介绍,我们已经了解UI自动化所需的编程语言和工具了。相信你已
  • UiPath sap logon

    2021-10-21 20:15:34
    2018年收购了Contextor并计划在2019年将智能RPA功能纳入SAP S/4HANA应用程序,并循序渐进地推广到其他SAP应用程序。 对此,让我们保持期待吧。虽然已经复杂化的东西已经不可以回去了,就看看在它发展策略发生改变的...
  • UIAutomation识别UI元素

    2021-06-08 07:10:30
    MS UI Automation(Microsoft User Interface Automation:UIA)是随.net framework3.0一起发布的,虽然在如今这个几乎每天都有各种新名词、新技术出来的所谓的21世纪,它显得已经有些过时了。前些日子,正好一个项目...
  • UI实战教程之切图标注篇(UI小白必备) 一. 切图工具和标注工具 学会使用工具可以起到事半功倍的效果。在这里为大家推荐我常用的切图和标注工具。 1. 切图工具: (1)Cutterman 这是一款运行在Photoshop中的插件,...
  • 智能手机越来越普及的今天,软件的移动端也越来越受到各大厂商的重视,因此,移动端软件的界面设计,或者叫UI设计的需求也日益旺盛。为此,很多平面设计师都开始转型投入到UI设计的领域中去,设计软件厂商也纷纷...
  • 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率。下面本篇文章给大家推荐几款款优秀的基于JQuery的Web UI设计框架。jquery UI框架...
  • UiPath流程终止方法

    2021-09-09 19:05:16
    右侧分支在Trigger中放入一个Monitor Events(UiPath.Core.Activities.MonitorEvents)用来同时检测快捷键是否触发。实际运行的时候,Pick的逻辑是这样的,两个分支的Trigger部分会并行执行(但其实各个分支的启动还是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 93,661
精华内容 37,464
关键字:

智能UI