動態化,是指跨平臺的動態模板引擎技術方案,雙端可使用同一套模板渲染 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小時內與您取得聯系。