动态化,是指跨平台的动态模板引擎技术方案,双端可使用同一套模板渲染 UI,实现业务需求。
动态模板引擎 (后面统称GaiaX) 是阿里巴巴优酷技术团队研发的一套轻量级的纯 Native 动态化卡片跨端解决方案。
GaiaX 是为了解决多端卡片化UI组件的研发效能瓶颈问题孵化而来的 GaiaX官方介绍。
模板,是指页面 UI 的抽象,最终落地为模板文件,包含布局、样式、数据、事件。当任一客户端完整实现了对这个模板文件的解析与渲染,便可完成 UI 的绘制工作,从而实现跨端。示例:
动态化比较合适卡片化UI组件的场景,在知乎客户端中有很多卡片形式的场景,比如: 热榜、想法、短容器。
当然,在业务使用层面还在不断的探索和挖掘。
动态模板技术体系以跨端动态化SDK为中心,通过在设计阶段、研发阶段、联调阶段降低对接、开发、调试等核心工作的技术成本,从而真正实现研发提效。
目前整个技术方案包括画眉跨平台动效解决方案、智能化设计平台 GaiaSketch、跨端模板动态化方案GaiaX、动态模板可视化少代码搭建平台 GaiaStudio 、辅助调试工具快速预览 FastPreview。
动态模板技术方案将客户端研发链路实现了串联,通过完备的工具化支撑体系,让开发者可以高效完成组件由原始设计稿到可运行代码的最短通路。
如下图,动态化分层设计架构:
动态化基础能力是 动态化中间层 + SDK能力层 + 模版管理提供的通用能力,包含功能: 下载模版、加载模版、渲染模版。
动态化提供底层基础能力 → 业务方开发业务模版 → 通过模版管理平台上传和下发模版。
如下图,动态化分层设计架构:
首先从项目测试流程中,我们期望是可以有一个完备、明确的流程,需要同产品、研发达成共识。
整体测试流程包含:
备注: 标红处需要特别关注
从动态化的架构分层,主要可以分为三层:
在实际工作中,在动态化中间层和底层SDK如果有升级或者代码变更,需要在 业务层看测试效果,比如: 短容器和热榜,但是这样测试在实际中有几点问题:
基于上面的测试痛点,我们希望在动态化业务中引入自动化测试手段,可以主要划分为三种自动化测试手段:
目的是对于中间层和底层SDK可以进行基于Debug UI页面进行定向测试,对于Debug UI的目的是:
在动态化落地不同业务场景的过程中,研发和测试同学对于开发和测试动态化模板基础能力的要求越来越强烈,
为了完善客户端动态化项目的生态建设,所以提出本次需求,后续给研发和测试提供便捷的 debug 页面方便开发和测试模板。
Debug UI是实现效果如下: 可以使用MR包和集成包跳转到调试中心查看。
单条页面的展示效果如下,这个页面是基于热榜渲染的卡片,如果卡片渲染成功(图片、文字、布局等),说明动态化底层渲染能力正常。
单条数据测试重点
多条数据测试重点
测试流程如下:
上述方案会基于UI自动化脚本实现,并把每次执行的测试结果上传的测试平台中存档,包含: 测试步骤、测试截图、图片对比截图
1)、相关概念:
图片diff主要解决本次测试的图片和基线测试图片的相似度,如果下发数据一样的话,两者的相似度应该在100%
图片相似度对比有两种方式:
1、第一种: 直观的像素差异比对
就是对两个图片进行灰度差值,这种比较适用于两个图片很接近,甚至源自同一张图片,只是做了部分修整的情况,这样可以比较出具体修改了哪部分。
2、第二种: 使用专业算法来评估两个图片的相似度
这种经常应用于各大网站进行图片搜索等功能,个人直接接触这类算法的机会较少,而且如果只是计算出两个图片的相似度值,对普通用户应用场景有限。
专业算法原理包括两种:
一部分算法是定义一个相似性评估指标,该值计算出来的大小代表了相似度的大小。过程大致包括:尺寸处理、灰度化处理、计算像素均值、哈希值计算、距离计算/结构相似性计算。
还有一类是基于神经网络算法的计算方法,需要训练样本来进行学习,模拟人类在学习识别物体的过程,经过不断的学习、反馈,最终形成对特定图片相似度识别的网络。
如何对比图片的相似度
对比选用和 基线图片 对比的方式,因为每个机器的屏幕尺寸不太一样会有影响因素,可以在项目工程中内置每个设备的 基线图片。
在 jenkins 创建任务定时任务,每周集成测试阶段执行。
点击 Alluer Report 可以查看报告报告中包含本次执行截图和基线图表,测试结果会发送到企业微信。
Android 端的单测仅仅针对表达式解析逻辑,不会涉及到 ZHGaiaX SDK 其他的逻辑。Android 端单测基于 AndroidTest 环境,依赖 Android 平台,目前测试用例使用 Kotlin 编写。
iOS 端的单测覆盖面比较广一些,不仅有仅仅测试表达式解析逻辑的单测,也有 ZHGaiaX SDK 其他逻辑的测试,比如模版加载、解析、view 创建等等。
iOS单元测试流程:
接入自动化测试流程:
自动化测试的目的是能在代码变更的时候自动化触发测试,更早的发现问题。所以,我们把上面的人工测试进阶成自动化测试。
自动化测试主要依托了Jenkins服务及第三方插件来完成全链路自动化测试。
slather是为 Xcode 项目生成测试覆盖率报告并将其挂接到 CI的一个工具。
slather地址: https://github.com/SlatherOrg/slather
安装方式:
sudo gem install slather
命令中使用方式:
slather coverage -s --scheme YourXcodeSchemeName path/to/project.xcodeproj
OCUnit2JUnit是将OCUnit或Kiwi的输出转换为JUnit使用的格式的脚本。主要目的是能够解析基于Java的构建服务器(如Jenkins)上的Objective-C(OCUnit)测试用例的输出。
github地址:https://github.com/ciryon/OCUnit2JUnit/
安装方法:
sudo gem install ocunit2junit
HTML Publisher 插件可用于将构建生成的 HTML 报告发布到作业和构建页面。它旨在与 Freestyle 项目以及 Jenkins Pipeline 一起使用。
可以在本地Jenkins的插件管理 ,安装路径:Jenkins -- 系统管理 -- 插件管理 ,搜索 HTMLPublisher 直接安装。
1、新建job,这里取名ios_unit_test,注意这个job的名字不要重复。
2、在源码管理中配置 gitlab 的地址和代码分支。
3、增加构建步骤,选择 Execute shell 脚本
配置脚本如下:
#!/usr/bin/env bash
source ~/.bash_profile
#pod可能失败的全局参数设置
export LANG=en_US.UTF-8
export LANGUAGE=en_US.UTF-8
export LC_ALL=en_US.UTF-8
pod install
xcodebuild test -workspace xxxx.xcworkspace -scheme xxxxiOSTests -destination 'platform=iOS Simulator,name=iPhone 11 Pro' -enableCodeCoverage YES 2>&1 | ocunit2junit
# 清除上次运行生成的文件
rm -rf html
# 可视化查看覆盖率
# --html:创建 html 静态页面,并默认创建 html 文件夹;可以通过 --output-directory 指定存放路径
# --show:打开浏览器展示 html 的内容
# 创建 xml 报告,默认 xml 报告保存在当前目录 test-reports 文件夹
slather coverage --scheme xxxxiOSTests --workspace GaiaXiOS.xcworkspace xxxxiOS.xcodeproj
# 创建 html 报告,默认 html 报告保存路径为前目录 html 文件夹
slather coverage --html --scheme xxxxiOSTests --workspace xxxxiOS.xcworkspace xxxxiOS.xcodeproj
项目包含 xcworkspace 要指定 -workspace UnitTest.xcworkspace。 -scheme 为当前测试的 scheme,如果不知道,可以在xcworkspace 目录下执行命令 xcodebuild -list ,可以看到所有的 scheme。
slather 默认生成为 xml 报告,在当前目录的 test-reports 文件夹中。slather 添加了 --html 后会生成 html 报告,在当前目录的 html 文件夹中。
4、配置构建后操作
在构建后操作的的地方配置测试报告展示,可以通过 Jenkins 地址看到覆盖率报告结果。
HTML directory to archive是测试报告存储的文件路径,Index page 是测试报告名称。
执行完成后,点击 HTMLReport 查看测试报告。
如下单次执行的覆盖率报告。
以上就是动态模板自动化测试探索是实践心得,可以看出在新技术及新框架诞生以后,都是对测试工程师的一次质量保障挑战。
如何让测试效率更高效、测试质量更可靠,这是对测试工程师的职责所在。可以在项目中适度引入自动化手段,它可以提高测试效率、减少测试成本、增强测试可靠性和一致性。
当然,自动化测试不是万能的。它不适用于所有测试场景。有些测试任务需要手动测试,因为需要人的判断和感性经验。
自动化测试需要投入一定的时间金,包括测试工具购买和培训、测试脚本编写和维护以及测试执行和监控。但是,投资在自动化测试上是值得的,因为它会为项目带来优势和回报。
作者:信希
出处:https://zhuanlan.zhihu.com/p/612566879
在学习前端开发的过程中,创建一个简单的HTML页面是迈出的第一步。在这篇文章中,我们将指导你如何创建一个基本的HTML页面,并将其保存为.html文件。
HTML(HyperText Markup Language)是一种用于创建网页的标记语言。它通过定义一系列的元素(elements),告诉浏览器如何展示网页的内容。每个HTML元素都由开始标签、内容和结束标签组成。例如,一个简单的段落可以使用<p>标签来定义:
<p>这是一个段落。</p>
创建一个HTML页面非常简单。你需要做的是编写HTML代码,并将其保存为.html文件。以下是一个简单的HTML页面的例子:
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的HTML页面。</p>
</body>
</html>
将上述代码复制到一个文本编辑器(如Notepad、Visual Studio Code等)中,然后将其保存为.html文件。例如,你可以将文件命名为my-first-html-page.html。
保存文件后,你可以使用任何现代浏览器(如Chrome、Firefox、Safari等)来打开这个.html文件。浏览器将自动解析HTML代码,并将其渲染为网页。
通过这篇文章,你学会了如何创建一个基本的HTML页面,并将其保存为.html文件。这只是前端开发旅程的起点。在接下来的文章中,我们将探索CSS和JavaScript,这些技术将使你的网页更加生动和互动。如果你对HTML有任何疑问,或者在前端学习的道路上遇到任何难题,欢迎在评论区留言,我们一起讨论和进步。
HTML简介
HTML是用来描述网页的一种语言,它是一种超文本标记语言,由一套标记标签组成,在制作网页时,HTML使用标记标签来描述网页。
发展史
HTML:Hyper Text Markup Language超文本标记语言
超文本标记语言—在1993年6月互联网工程工作小组工作案发布(并非标准)
HTML2.0—1995年11月作为RFC1866发布,在RFC2854于2000年6月发布之后被宣布过时。
HTML3.2—1996年1月14日,W3C推荐标准
HTML4.0—1997年12月18日,W3C推荐标准
HTML4.01(微小改进)—1999年12月24日,W3C推荐标准,2000年5月15日发布基本严格的HTML4.01语法,是国标标准化组织和国际电工委员会的标准
XHTML1.0—发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布
XHTML1.1—2001年5月31日发布
XHTML2.0是W3C的工作草案,由于改动过大,学习这个新技术的成本过高而最终胎死腹中,因此,现在最常用的还是XHTML1.0标准。
目前最新的版本为HTML5,它是2004年被提出,2007年被W3C接纳并成立新的HTML工作团队,
2008年1月22日公布HTML5第一份正式草案,
2012年12月17日HTML5规范正式定稿,
2013年5月6日,HTML5.1正式草案公布。
HTML 5作为最新版本,提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立,提供了许多新的网页功能,如使用网页实现动态渲染图形、图表、图像和动画,以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度
HTML的优势
h1~h6
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题标签</title> </head> <body> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> <h7>这是七级标题</h7>效果怎么显示不出来呢??? <h1>这是一级标题</h1> </body> </html> |
浏览器预览效果
p标签为段落标签,br标签为换行标签
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落和换行标签</title> </head> <body> <h1>北京欢迎你</h1> <p>北京欢迎你,<br>为你开天辟地</p> <p>北京欢迎你,<br/>有有勇气就会有奇迹</p> </body> </html> |
浏览器预览效果图
hr标签为水平线标签
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平线标签</title> </head> <body> <h1>漂洋过海来看你</h1> <hr> <p>为你我用了半年的积蓄,<br>漂洋过海来看你</p> <hr/> </body> </html> |
浏览器预览效果图
em为斜体标签,strong为字体加粗标签
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体样式标签</title> </head> <body> <h1>漂洋过海来看你</h1> <hr> <p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>,<br> <em><strong>漂洋过海</strong></em>来看你 </p> <hr/> </body> </html> |
浏览器预览效果图
注释使用:<!--被注释的内容-->
大于号:> great than的缩写
小于号:< less than的缩写
双引号:""
版权符号:©
空格:
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注释和特殊符号</title> </head> <body> <pre> 注释使用:<!--被注释的内容--> 大于号:> great than的缩写 小于号:< less than的缩写 双引号:"" 版权符号:© 空格: </pre> <!-- 我是被注释的内容,我只留给你们看,不会在页面上显示 --> 5<10>6 <br> "我是被双引号引起来的内容"<br> ©自由职业开发者公司<br> 我是 测试 空 格的 </body> </html> |
浏览器预览效果图
以上就是HTML的简单入门,后续带大家更深入的了解HTML
*请认真填写需求信息,我们会在24小时内与您取得联系。