景

什么是動態化 ?

動態化，是指跨平臺的動態模板引擎技術方案，雙端可使用同一套模板渲染 UI，實現業務需求。

動態模板引擎 (后面統稱GaiaX) 是阿里巴巴優酷技術團隊研發的一套輕量級的純 Native 動態化卡片跨端解決方案。

GaiaX 是為了解決多端卡片化UI組件的研發效能瓶頸問題孵化而來的 GaiaX官方介紹。

模板，是指頁面 UI 的抽象，最終落地為模板文件，包含布局、樣式、數據、事件。當任一客戶端完整實現了對這個模板文件的解析與渲染，便可完成 UI 的繪制工作，從而實現跨端。示例:

動態化方案特點?

• 可視化工具模板搭建：
• 提供Sketch插件、模板可視化搭建Studio兩個配套研發工具，通過可視化的方案快速完成模板導出、搭建、編輯等工作，同時配合掃碼預覽工具快速完成模板預演，以及視覺驗收等工作。
• FlexBox布局：
• 基于StretchKit實現FlexBox來作為引擎的布局方式，底層采用rust語言保證了整體方案的高性能和跨平臺特性。
• 跨端解決方案：
• 保證多端技術體驗一致性，實現一套模板、多端渲染，全面提升研發效能 。
• 純Native渲染，保證客戶端體驗：
• 保證客戶端渲染成功率，通過視圖拍平等優化提升頁面的滾動幀率 。

為什么需要動態化?

• 開發環節降本增效，理想情況雙端工作可由單端開發實現，提高需求吞吐率。
• 低代碼開發平臺，可支持產品或者運營,在一定指導下完成輕量級需求的開發上線。
• 上線環節節奏靈活，理想情況無需跟隨客戶端發版，可快速上線，降低試錯成本。
• 保證雙端一致的產品體驗和技術實現。
• 純 Native 渲染，保證客戶端體驗。
• 線上 UI 問題可動態修復，及時上線，降低影響范圍。

動態化應用場景?

動態化比較合適卡片化UI組件的場景，在知乎客戶端中有很多卡片形式的場景，比如: 熱榜、想法、短容器。

當然，在業務使用層面還在不斷的探索和挖掘。

動態化技術體系

動態模板技術體系以跨端動態化SDK為中心，通過在設計階段、研發階段、聯調階段降低對接、開發、調試等核心工作的技術成本，從而真正實現研發提效。

目前整個技術方案包括畫眉跨平臺動效解決方案、智能化設計平臺 GaiaSketch、跨端模板動態化方案GaiaX、動態模板可視化少代碼搭建平臺 GaiaStudio 、輔助調試工具快速預覽 FastPreview。

動態模板技術方案將客戶端研發鏈路實現了串聯，通過完備的工具化支撐體系，讓開發者可以高效完成組件由原始設計稿到可運行代碼的最短通路。

如下圖，動態化分層設計架構:

動態化基礎能力是 動態化中間層 + SDK能力層 + 模版管理提供的通用能力，包含功能: 下載模版、加載模版、渲染模版。

動態化提供底層基礎能力 → 業務方開發業務模版 → 通過模版管理平臺上傳和下發模版。

如下圖，動態化分層設計架構:

質量保障方案

首先從項目測試流程中，我們期望是可以有一個完備、明確的流程，需要同產品、研發達成共識。

整體測試流程包含:

備注: 標紅處需要特別關注

• 申請測試資源
• 涉及到 動態化底層能力改動 的需求務必項目啟動前周知 QA ，需要走走產研需求。
• 需求KO：
• 如果是是純技術改動，可把需求KO和技術KO合二為一，務必技術文檔寫的清晰易懂。
• 邀請評審：
• 邀請相關 QA 參加需求評審和所有技術 RFC 評審，涉及改動的范圍: 務必具體詳細到頁面功能頁面基本和功能入口等，避免無效全量回歸測試。
• 制定計劃：
• 制定測試計劃，明確排期、測試范圍、測試數據、測試環境、測試方法等。測試范圍劃分依據各業務模塊職責。
• 設計用例：
• 整體負責測試用例設計和評審，協調各 QA 團隊完成各自模塊的用例設計和評審，輸出冒煙測試用例交付給研發團隊，需要研發提測前完成自測用例，如果冒煙不通過則打會需求。
• 同步進度：
• 定期和相關 QA 同步開發進度，若提測有延期風險，需要及時反饋給相關事業部的 QA Leader，并重新確定排期。
• 反饋問題：
• 測試過程中任何資源短缺問題，及時找業務線 QA 負責人溝通，如無法解決，及時與自己的 QA Leader 反饋，需要研發老師在提出問題后盡快修復。
• 發布報告：
• 測試完成后，匯總測試數據并發布測試報告。
• 總結復盤：
• 推動各業務團隊總結復盤。
• 整理用例：
• 整理回歸測試用例，并明確后續版本負責回歸相應功能的 QA 團隊。

自動化測試方案

從動態化的架構分層，主要可以分為三層:

• 業務層: 比如: 短容器。
• 中間層: 給業務層提供模版，和模塊服務交互模塊數據。
• 模塊管理: 下載、加載模版。

在實際工作中，在動態化中間層和底層SDK如果有升級或者代碼變更，需要在 業務層看測試效果，比如: 短容器和熱榜，但是這樣測試在實際中有幾點問題:

• 底層能力升級需要遍歷所有的業務場景測試
• 業務場景需要配置白名單及需要了解業務
• 大量的功能回歸測試
• 后端服務改動無法被測試到
• 模版層表達式如何測試

基于上面的測試痛點，我們希望在動態化業務中引入自動化測試手段，可以主要劃分為三種自動化測試手段:

• 服務層: 通過接口自動化測試，可以保障接口層流程、字段的正確性。
• 中間層: 通過Debug UI 實現 UI層自動化測試，保障中間層UI布局、標題、文案的效果質量。
• 模版層: 通過單元測試的方法，保障表達式測試質量。

UI自動化測試

目的是對于中間層和底層SDK可以進行基于Debug UI頁面進行定向測試，對于Debug UI的目的是:

在動態化落地不同業務場景的過程中，研發和測試同學對于開發和測試動態化模板基礎能力的要求越來越強烈，

為了完善客戶端動態化項目的生態建設，所以提出本次需求，后續給研發和測試提供便捷的 debug 頁面方便開發和測試模板。

• 對外：支持業務方動態化能力需求落地，降低業務方研發成本，減少動態化落地阻力。
• 對內：完善動態化能力生態，降低研發和測試同學的使用成本，不依賴業務場景能夠進行動態化基礎能力的開發和測試。

Debug UI是實現效果如下: 可以使用MR包和集成包跳轉到調試中心查看。

單條頁面的展示效果如下，這個頁面是基于熱榜渲染的卡片，如果卡片渲染成功(圖片、文字、布局等)，說明動態化底層渲染能力正常。

測試方法 & 方案設計

單條數據測試重點

• 卡片正常加載
• 卡片可點擊跳轉

多條數據測試重點

• 卡片正常加載
• 列表卡片可滑動
• 卡片可點擊跳轉

測試流程如下:

上述方案會基于UI自動化腳本實現，并把每次執行的測試結果上傳的測試平臺中存檔，包含: 測試步驟、測試截圖、圖片對比截圖

圖片Diff(相似度)測試

1)、相關概念:

圖片diff主要解決本次測試的圖片和基線測試圖片的相似度，如果下發數據一樣的話，兩者的相似度應該在100%

圖片相似度對比有兩種方式：

1、第一種: 直觀的像素差異比對

就是對兩個圖片進行灰度差值，這種比較適用于兩個圖片很接近，甚至源自同一張圖片，只是做了部分修整的情況，這樣可以比較出具體修改了哪部分。

2、第二種: 使用專業算法來評估兩個圖片的相似度

這種經常應用于各大網站進行圖片搜索等功能，個人直接接觸這類算法的機會較少，而且如果只是計算出兩個圖片的相似度值，對普通用戶應用場景有限。

專業算法原理包括兩種：

一部分算法是定義一個相似性評估指標，該值計算出來的大小代表了相似度的大小。過程大致包括：尺寸處理、灰度化處理、計算像素均值、哈希值計算、距離計算/結構相似性計算。

還有一類是基于神經網絡算法的計算方法，需要訓練樣本來進行學習，模擬人類在學習識別物體的過程，經過不斷的學習、反饋，最終形成對特定圖片相似度識別的網絡。

如何對比圖片的相似度

對比選用和 基線圖片 對比的方式，因為每個機器的屏幕尺寸不太一樣會有影響因素，可以在項目工程中內置每個設備的 基線圖片。

執行策略

在 jenkins 創建任務定時任務，每周集成測試階段執行。

點擊 Alluer Report 可以查看報告報告中包含本次執行截圖和基線圖表，測試結果會發送到企業微信。

表達式自動化測試

Android 端的單測僅僅針對表達式解析邏輯，不會涉及到 ZHGaiaX SDK 其他的邏輯。Android 端單測基于 AndroidTest 環境，依賴 Android 平臺，目前測試用例使用 Kotlin 編寫。

iOS 端的單測覆蓋面比較廣一些，不僅有僅僅測試表達式解析邏輯的單測，也有 ZHGaiaX SDK 其他邏輯的測試，比如模版加載、解析、view 創建等等。

iOS單元測試流程:

• 使用 Xcode 打開 GaiaX/GaiaXiOS/GaiaXiOS.xcworkspace 工程
• 選擇 Scheme：GaiaXiOSTests，然后長按運行按鈕選擇 「Test」，單測就可以跑起來

• 修改或增加測試用例：修在 GaiaX/GaiaXiOS/GaiaXiOSTests/TestCase 下的文件
• 表達式解析的測試：GXExpressionTest.mm
• 加載模版的測試：GXTemplateTest.mm
• 渲染引擎相關接口的測試：GXEgnineTest.mm
• 查看單測覆蓋率
• 配置選項

• 運行測試并查看覆蓋率

接入自動化測試流程:

自動化測試的目的是能在代碼變更的時候自動化觸發測試，更早的發現問題。所以，我們把上面的人工測試進階成自動化測試。

自動化測試主要依托了Jenkins服務及第三方插件來完成全鏈路自動化測試。

Jenkins

• Jenkins 是開源 CI&CD 軟件領導者，提供超過1000個插件來支持構建、部署、自動化， 滿足任何項目的需要。
• Jenkins 支持各種運行方式，可通過系統包、Docker 或者通過一個獨立的 Java 程序。
• Jenkins 依賴 Java 環境，需要安裝 jdk 相關。

slather

slather是為 Xcode 項目生成測試覆蓋率報告并將其掛接到 CI的一個工具。

slather地址: https://github.com/SlatherOrg/slather

安裝方式:

sudo gem install slather

命令中使用方式:

slather coverage -s --scheme YourXcodeSchemeName path/to/project.xcodeproj

ocunit2junit

OCUnit2JUnit是將OCUnit或Kiwi的輸出轉換為JUnit使用的格式的腳本。主要目的是能夠解析基于Java的構建服務器（如Jenkins）上的Objective-C（OCUnit）測試用例的輸出。

github地址：https://github.com/ciryon/OCUnit2JUnit/

安裝方法：

sudo gem install ocunit2junit

HTML Publisher

HTML Publisher 插件可用于將構建生成的 HTML 報告發布到作業和構建頁面。它旨在與 Freestyle 項目以及 Jenkins Pipeline 一起使用。

可以在本地Jenkins的插件管理 ，安裝路徑：Jenkins -- 系統管理 -- 插件管理 ，搜索 HTMLPublisher 直接安裝。

集成到 Jenkins 中

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文件。

什么是HTML？

HTML（HyperText Markup Language）是一種用于創建網頁的標記語言。它通過定義一系列的元素（elements），告訴瀏覽器如何展示網頁的內容。每個HTML元素都由開始標簽、內容和結束標簽組成。例如，一個簡單的段落可以使用<p>標簽來定義：

<p>這是一個段落。</p>

如何創建一個HTML頁面？

創建一個HTML頁面非常簡單。你需要做的是編寫HTML代碼，并將其保存為.html文件。以下是一個簡單的HTML頁面的例子：

<!DOCTYPE html>

<html>

<head>

<title>我的第一個HTML頁面</title>


</head>


<body>

<h1>歡迎來到我的網站</h1>


<p>這是一個簡單的HTML頁面。</p>


</body>


</html>

文件結構

• <!DOCTYPE html>：聲明文檔類型，告訴瀏覽器這是一個HTML5文檔。
• <html>：根元素，所有的HTML元素都位于此標簽內。
• <head>：頭部元素，包含了文檔的元數據，如標題、樣式、腳本等。
• <title>：定義文檔的標題，顯示在瀏覽器的標題欄或頁面的標簽上。
• <body>：主體元素，包含了可見的頁面內容，如文本、圖片、視頻等。

如何保存為.html文件？

將上述代碼復制到一個文本編輯器（如Notepad、Visual Studio Code等）中，然后將其保存為.html文件。例如，你可以將文件命名為my-first-html-page.html。

打開HTML文件

保存文件后，你可以使用任何現代瀏覽器（如Chrome、Firefox、Safari等）來打開這個.html文件。瀏覽器將自動解析HTML代碼，并將其渲染為網頁。

結語

通過這篇文章，你學會了如何創建一個基本的HTML頁面，并將其保存為.html文件。這只是前端開發旅程的起點。在接下來的文章中，我們將探索CSS和JavaScript，這些技術將使你的網頁更加生動和互動。如果你對HTML有任何疑問，或者在前端學習的道路上遇到任何難題，歡迎在評論區留言，我們一起討論和進步。

、什么是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的優勢

• 各大瀏覽器廠商對H5的支持
• 市場的需求
• 跨平臺

二、HTML的基本結構

• <html>......</html> HTML文檔的開始和結束標記。
• <head>……</head> 頭控制標記，不在界面上進行展示，子標簽可設置SEO優化的一些內容以及設置網頁的編碼。
• <title>……</title>：設置瀏覽器的窗口上標題。
• <body>……</body>：頁面可見內容。

三、HTML的基本標簽

• 標題標簽

h1~h6

• 段落標簽和換行標簽

p標簽為段落標簽，br標簽為換行標簽

• 水平線標簽

hr標簽為水平線標簽

• 字體樣式標簽

em為斜體標簽，strong為字體加粗標簽

• 注釋和特殊符號

注釋使用：<!--被注釋的內容-->

大于號：> great than的縮寫

小于號：< less than的縮寫

雙引號：""

版權符號：©

空格：

以上就是HTML的簡單入門，后續帶大家更深入的了解HTML