『壹』 web前端三大主流框架是什麼 都有哪些功能
web前端三大主流框架是Angular、React、Vue，框架可以幫助省略掉一些基本的相同底層代碼的反復書喊念寫，只需調用框架的方法就可以實現你想要的功能。
web前端的主流框架
1、Angular：Angular是一款優秀的前端JS框架，Angular有著諸多特性，最為核心的是MVW（Model-View-Whatever）、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。Angular是一個比較完善的前端框架鄭納困，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能，在自茄晌定義指令後可以在項目中多次使用。
2、React：React可以非常輕松地創建用戶交互界面。為你應用的每一個狀態設計簡潔的視圖，在數據改變時React也可以高效地更新渲染界面。React為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
3、Vue：近幾年最火的前端框架當屬Vue.js了，Vue.js是一個構建數據驅動的Web界面的漸進式框架。Vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。Vue對模塊很友好，可以通過NPM、Bower或Duo安裝，不強迫你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
web前端的其他框架
1、Bootstrap：Bootstrap是讓你的頁面更簡潔、直觀、強悍、移動設備優先的前端開發框架,讓Web開發更迅速、更簡單。它還提供了更優雅的HTML和CSS規范，它是由動態CSS語言Less寫成。有著豐富的網格布局系統以及豐富的可重用組件，還有強大的支持的JavaScript、jQuery插件以及組件定製等。
2、Backbone：Backbone是一種幫助開發重量級的javascript應用的框架，其文件本身很小，壓縮後只有5.3KB，主要提供了models(模型)、collections(集合)、views(視圖)三種結構，其中模型用於綁定鍵值數據和自定義事件，集合附有可枚舉函數的豐富API，視圖可以聲明事件處理函數，並通過RESRfulJSON介面連接到應用程序。Backbone依賴於underscore.js，其中包含很多工具方法、集合操作、js模板等。
『貳』 web自動化測試框架有哪些
Web自動化測試在測試領域裡面用得比較多的工具或者框架有Selenium, robotframework, Cucumber等。
Selenium是一個開源的Web自動化測試框架，ujiuye主要用於做HTML頁面的UI自動化測試。
RobotFramework是一個基於Python語言的，可擴展的關鍵字驅動的自動化測試框架，使自動化測試腳本編寫變得更簡單
Cucumber是BDD(Behavior-driven development，行為驅動開發)的一個自動化測試的副產品。它使用自然語言來描述測試，使得非程序員可以理解他們。
『叄』 web前端開發框架有哪些
常見的web前端開發框架如下：
1、Bootstrap：
主流框架之一，Bootstrap 是基於 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。
2、html5-boilerplate：
該框架可以快速構建健壯，且適應力強的web app或網站。
3、Meteor：
Meteor是新一代的開發即時web應用的開源框架，它能在較短時間內完成開發。
4、Materialize：
基於材料設計的現代化響應式前端框架。可提供默認的樣式，自定義組件。此外，Materialize還改進動畫和過渡，為開發人員提供流暢的體驗。
5、Amaze UI：
國內首個開源HTML5跨屏前端框架產品系列，中文排版支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架Amaze UI Touch以及針對跨屏HTML5網頁開發的Amaze UI Web。
(3)webui自動化框架擴展閱讀：
web框架程序的作用：
Web框架使得在進行Web應用開發的時候，減少了工作量。Web框架主要用於動態網路開發，動態網路主要是指現在的主要的頁面，可以實現數據的交互和業務功能的完善。
使用Web框架進行Web開發的時候，在進行數據緩存、資料庫訪問、數據安全校驗等方面，不需要自己再重新實現，而是將業務邏輯相關的代碼寫入框架就可以。也就是說，通過對Web框架進行主觀上的「縫縫補補」，就可以實現自己進行Web開發的需求了。
以PHP為例，PHP可以在apache伺服器上進行Web開發，而不必使用框架。使用PHP進行開的時候，在不適用框架的情況下，資料庫連接就需要自己來實現，頁面的生成和顯示也是一樣。比如框架的話可以完成避免sql注入的工作，而使用PHP在不用框架的情況下，這部分要自己做。
參考資料來源：網路-前端開發
『肆』 用的最多的前端框架
如今的前端已經不再像以前一樣就是簡單的寫寫頁面和調調樣式而已，現在的前端越來越復雜，知識點越來越豐富。
要做WEB前端，就需要知道前端到底是什麼，需要學習那些知識；前端至少要懂的三個部分：HTML，CSS，JavaScript（簡稱JS），那首先先明確這三個概念：
HTML負責結構，網頁想要表達的內容由html書寫。
CSS負責樣式，網頁的美與丑由它來控制
JS負責交互，用戶和網頁產生的互動由它來控制。
web前端發展至今，演變出了無數的庫和框架；說到庫第一時間想到的是不是jquery？在小編剛接觸庫的時候也是從jQuery開始的；今天我們就來說說前端發展到現在都有哪些好用的庫框架；
1.Bootstrap中文網
近幾年最火的前端框架當屬Vue.js了，Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。很多使用過vue的程序員這樣評價它，「vue.js兼具angular.js和react.js的優點，並剔除了它們的缺點」。
『伍』 前端UI自動化puppeteer實踐
背景
在表單（web頁面）測試過程中，要經常對表單基本功能進行回歸，曾經考慮過使用webUI自動化工具，減少重復性的操作，但是因為之前用過appium，對UI自動化的體驗不是很好，所以有些糾結，但是，再仔細想一下，有可能存在比較好用又確實能提升效率的工具，也不妨去嘗試一下。
上網查詢了一下，puppeteer具有可以使用錄制腳本的工具puppeteer-recorder、截圖等功能，找了個demo開始試了一下，發現坑較少，安裝方便，使用比較流暢。
puppeteer介紹
Puppeteer 是一個Node庫， 它提供高級API，通過DevTools Protocol 來控制Chrome 或 Chromium。 Puppeteer 默認運行為headless ，但是可以配置為運行為non-headless。詳見文末參考鏈接。
效果展示
目錄結構
cases：用例腳本
config：配置文件，可區分測試、線上環境
screenshot_outputs：輸出的截圖文件
utils：用到的通用方法
測試思路
1、在腳本中寫入測試執行步驟
2、運行腳本
3、查看執行結果（截圖），查看是否符合預期。
這樣操作會使簡單很測試很多。就拿表單人工審核為例，全部人工操作的話，需要填寫並提交表單，登錄表單運營後台，找到對應的目錄及表單，對表單進行審核，再重新打開表單並進行查看，而自動化的話，在寫好腳本（在腳本中可進行介面請求）之後，就可以直接運行腳本，查看結果。
環境搭建
1、安裝puppeteer：npm install puppeteer（前提是安裝了node、npm）
2、安裝chrome插件puppeteer-recorder（可自行網路，比較簡單）
3、npm init，初始化一個項目
腳本編寫
遇到問題
1、puppeteer-recorder只能錄制獲取元素、點擊元素操作，沒有獲取到填寫文本的操作，需要修改或添加已錄制好的腳本
2、有些地方例如截圖前，介面請求結束後，需要使用等待方法。await page.waitFor(3000)
3、使用await進行介面請求，不然會出現同步非同步問題，後面的語句開始執行（但是要用到的參數還沒有獲取到）
參考：
https://zhuanlan.hu.com/p/76237595
https://www.jianshu.com/p/679f07ba474b
『陸』 web前端主流框架有哪些
bootstrap框架，這個應該是所有前端開發都知道並用過的一個框架了，應為這個是目前最流行的框架，使用最廣，網上文檔資料模板最多最容易查找的了。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件，簡潔、直觀、強悍，讓web開發更迅速、簡單。
Foundation 是一個易用、強大而且靈活的響應式前端框架，用於構建基於任何設備上的響應式網站、 Web應用和電子郵件。結構語義化、移動設備優先、完全可定製。
Semantic UI 經過多年的努力、致力於可以用更語義化的方式構建網站、原生語言規則讓代碼更易讀易懂。
Amaze UI | 中國首個開源 HTML5 跨屏前端框架。Amaze UI 以移動優先（Mobile first）為理念，組件豐富，模塊化；本地化支持，關注中文排版；輕量級，高性能。官網提供有豐富的模板下載。織夢系統wap手機模塊就是用的就是這個。
SUI 是一套基於bootstrap開發的前端組件庫，同時她也是一套設計規范。通過SUI，可以非常方便的設計和實現精美的頁面。
SUI Mobile 是一套基於Framework7開發的UI庫。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，並且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開發跨平台Web App。
『柒』 python webUI自動化依賴用例如何銜接
s='{"mobilephone":"${admin_user}","pwd":"${admin_pwd}"}'
admin_user="13707796666"
admin_pwd="123456"
方式一：引入Json模塊，把字元串轉換成字典，根據Key去取值判斷
import json
dict_1=json.loads(s)
if dict_1["mobilephone"]=="${admin_user}":
dict_1["mobilephone"]=admin_user
if dict_1["pwd"]=="${admin_pwd}":
dict_1["pwd"]=admin_pwd
print(dict_1)
方式二：利用python內置函數find()函數和replace()函數進行查找和替換;
字元串存在，find()函數就返回索引位置，字元串不存在，find()函數就返回-1
if s.find("${admin_user}")> -1:
s=s.replace("${admin_user}",admin_user)#字元串是不能做修改的，要重新賦值才能顯示最新
if s.find("${admin_pwd}")>-1:
s=s.replace("${admin_pwd}",admin_pwd)
print(s)
{'pwd': '123456', 'mobilephone': '13707796666'}
{"mobilephone":"13707796666","pwd":"123456"}
『捌』 WebUI 自動化測試的經典設計模式：PO
先來看下未使用 PO(PageObject) 設計模式下的代碼，以網頁版網路登錄為例來說明。
非 PO(PageObject) 模式下的代碼如下，所有內容全部寫在一個方法里。
存在的問題：
PO(PageObject) 模式優化後的代碼
1、WebUI 自動化需要的 driver 基礎操作
2、登錄頁面元素獲取
3、登錄邏輯業務的封裝
4、登錄測試用例將使用以上3個頁面對象
可以發現，使用 PO(PageObject) 模式優化後的代碼，有以下明顯優勢：
1)、將以下3個模塊進行了單獨封裝 【降低了模塊之間的耦合度，使層次更加清晰合理，便於後期維護與復用】：
2)、如果前端頁面有 定位元素的 type 或 value 發生變化時，只需要修改 elements.py 文件中元素信息即可 ，不需要在測試業務模塊中進行修改。