‘壹’ 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 文件中元素信息即可 ，不需要在测试业务模块中进行修改。