F2etest环境搭建

前言：项目需要做浏览器的兼容性测试，无论是通过安装大量的浏览器，或者使用IE Tester等模拟软件，都会有各自的缺陷。如：低效率、整体资源消耗高。恰好在一个测试交流群中，看到有人提出该问题，得到利用F2etest这个答案。遂开始了解F2etest，并进行F2etest的环境搭建。当你看完文章后，你应该了解什么是F2etest？如何进行F2etest-web部署？如何进行浏览器云部署？如何进行多浏览器部署？

什么是F2etest？

F2etest 是一个面向前端、测试、产品等岗位的多浏览器兼容性测试整体解决方案，优势是：

10 倍以上硬件利用率，降低企业运营成本；
提供非常棒的桌面用户体验，极大的提高测试效率；
浏览器云提供真实浏览器环境，还原真实测试场景；
WebDriver 云快速稳定的支撑自动化测试脚本运行。

如何进行F2etest-web部署？

搭建F2etest环境，需要准备CentOS 7虚拟机或物理机。本文以虚拟机搭建方式为例，进行描述。

部署环境

操作系统	IP	内存	软件
本机：Windows 10 专业版	192.168.X.1	16G	VMware® Workstation 15 Pro 15.0.2
虚拟机：CentOS Linux release 7.4.1708 (Core)	192.168.X.2	4G	Docker 19.03.1，MySQL Ver 14.14 Distrib 5.6.43
虚拟机：Windows Server 2008 R2 Standard	192.168.X.3	2G	ie8，Chrome 76.0.8809.100，Firefox 68.0.2，360浏览器 10.0.1977.0，360极速浏览器 11.0.2179.0
虚拟机：Windows Server 2008 R2 Standard	192.168.X.4	2G	ie9，QQ浏览器 10.4.2，搜狗高速浏览器 8.5.10.31270
虚拟机：Windows Server 2008 R2 Standard	192.168.X.5	2G	ie10

部署步骤

请先再本机上安装VMware软件，下载CentOS镜像，启动CentOS虚拟机，在CentOS机器上安装最新版的Docker，如已安装请忽略，安装教程：https://www.yuque.com/grasilife/docker/install-centos

# 获取 `f2etest-web` 镜像
[root@localhost ~]# docker pull registry.cn-hangzhou.aliyuncs.com/f2etest/f2etest-web# 启动容器
# 映射本地端口，这里已 80 为例，请确保此端口未被占用
# 如果 80 被占用，请修改为其它可用端口，例如 8080 端口：-p 8080:80
[root@localhost ~]# docker run -dit --privileged -p 80:80 --name f2etest registry.cn-hangzhou.aliyuncs.com/f2etest/f2etest-web# 进入容器
[root@localhost ~]# docker exec -it f2etest bash# 初始化数据库表并启动 Web
[root@e40349b09133 f2etest-web]# source setup.sh

修改配置

# 修改site.json[root@e40349b09133 f2etest-web]# vi /home/f2etest-web/conf/site.json
# 第11行 修改 guacamoleApi 字段，IP 地址改为 CentOS 机器 IP 地址，端口号改为运行容器时映射的本地端口号，80 端口可忽略。建议使用 80 端口。
"guacamoleApi": "http://192.168.X.2:80/guacamole/client.xhtml"# 修改server.json
[root@e40349b09133 f2etest-web]# vi /home/f2etest-web/conf/server.json
# 第4行 修改ip地址为Windows Server 的 IP 地址
"ip": "192.168.X.3",# 重启 web
[root@e40349b09133 f2etest-web]# pm2 restart f2etest-web# 修改noauth-config.xml
[root@e40349b09133 f2etest-web]# vi /etc/guacamole/noauth-config.xml
# 第3行 value的值为Windows Server 的 IP 地址<param name="hostname" value="192.168.X.3" /># 重启 tomcat8
service tomcat8 restart

如何进行浏览器云部署？

在 Windows Server上搭建 IE8 浏览器与 hostShare 应用供 F2etest-web 使用。

部署步骤：

请先再本机上安装VMware软件，下载Windows Server 2008 R2 Standard镜像，启动Windows Server 2008 R2 Standard虚拟机.

取消登陆密码复杂性 - F2etest 的登陆

运行中输入 gpedit.msc 打开本地策略编辑器

修改账户策略 - 密码策略

禁用 IE ESC - 防止在浏览器操作时，按了 ESC 导致 IE 浏览器退出

进入服务器管理器

配置 IE ESC

安装远程桌面服务

服务器管理 - 角色 - 添加角色

角色服务，勾选远程桌面会话主机，远程桌面授权和远程桌面 Web 访问。

应用程序兼容性，下一步。

身份验证方法，选择不需要使用网络级别身份验证，下一步。

授权模式，选择每用户，下一步。

用户组，按照如下面所示，添加 Authenticated User，下一步。

客户端体验，默认，下一步。

RD 授权配置，默认，下一步。

角色服务，按照下图勾选，勾选应用程序开发和管理工具，下一步。

确认安装，安装完成后重启机器。

配置远程桌面服务

激活远程桌面服务,管理工具 - 远程桌面服务 - 远程桌面授权管理器。

右键，激活服务器。

激活向导，下一步。

公司，姓，名，可填任意值。

不填，下一步。

确保“立即启动许可证安装向导”勾选，下一步。

下一步。

示例，不管，下一步。

协议号码填入“6565792”，下一步。

选择每用户，下一步。

完成。

注：官方文档里的120天授权激活破解未进行。

部署 IIS 服务 - 提供新建用户服务脚本

先将f2etest-master.zip 下载完成，并传到Windows虚拟机中，下载地址

IIS 服务器主要是用来给 F2etest-web 调用创建 Windows 用户功能。

拷贝 F2etest 源代码里的 f2etest-client\f2etest-browsers\www 下的 setuser 文件到C:\inetpub\wwwroot 下并修改 apikey 为前面配置的 key。

编辑 setuser 文件，修改 apiKey。

进入 IIS 管理器。

选择身份验证。

右键匿名身份验证，编辑。

选择设置。

填入 administrator 的账户与密码。

访问 http://127.0.0.1/setuser.asp?username=test&password=hello123&key=f2etest，如果看到页面输出 ok，代表 IIS服务设置成功。

配置应用程序 - IE8 浏览器与 hostShare 应用

复制f2etest-client\f2etest-browsers\curl 中的所有文件到 c:\windows 下面。

把 f2etest-client\f2etest-browsers 下的 app 目录复制到 C 盘根目录，并重命名强制代理.bat 为 ie8.bat，禁用代理.bat为 hostsshare.bat。

然后修改两个 bat 中的 f2etestDomain 为 f2etest-web 的访问地址，其中 ie8.bat 中的 appid 请修改为 ie8 和f2etest-web 的 app.js 中配置的 id 保持一致。

把源码中的 hostsShare-client 下的 build 文件夹修改为 hostsShare 并拷贝到 C 盘根目录。

管理工具 - 远程桌面服务 - RemoteApp 管理器

按照下图顺序添加

点击 ie8.bat，选择属性，选择允许任何命令行参数。

如何进行多浏览器部署？

若你需要测试不同版本的IE 浏览器，那么需要进行部署同样数量的Windows服务器（因为在一台 Windows 服务器上只能安装一个 IE系浏览器）。若测试其它浏览器，则只需修改 app.json 文件和进行配置 RemoteApp 应用程序。

新增服务器

每新增一台 Windows 服务器，除了完成 Windows 上的浏览器云配置外，还需要在 f2etest-web 上完成其对应的配置，这样才能实现点击站点上的图标来打开对应服务器上的浏览器。例如：我们已配置了一台 IE8 的服务器，现在新增一台 IE9 的服务器。

Windows配置

远程连接到目标 Windows 服务器，按照如何进行浏览器云部署，完成基本环境的配置。可以不用部署 hostsShare 应用程序。

IE 系列浏览器

# 容器内，修改server.json
[root@e40349b09133 f2etest-web]# vi /home/f2etest-web/conf/server.json
# 修改ip地址为Windows Server 的 IP 地址
[{"id": "f2etest-ie8","ip": "192.168.X.3","remoteApp": true},                                                                      {                                                                       "id": "f2etest-ie9",                                                "ip": "192.168.X.4",                                              "remoteApp": true                                                   },                                                                      {                                                                       "id": "f2etest-ie10",                                               "ip": "192.168.X.5",                                              "remoteApp": true}
]# 修改app.json
[root@e40349b09133 f2etest-web]# vi /etc/guacamole/noauth-config.xml[{"id": "hostsshare","name": "hosts","server": "f2etest-ie8","program": "c:\\app\\hostsshare.bat"},{"id": "ie8","name": "IE 8","server": "f2etest-ie8","program": "c:\\app\\ie8.bat"},{"id": "ie9","name": "IE 9","shortname": "UC","server": "f2etest-ie9","program": "c:\\app\\ie9.bat"},{"id": "ie10","name": "IE 10","server": "f2etest-ie10","program": "c:\\app\\ie10.bat"},{"id": "chrome","name": "Chrome","server": "f2etest-ie8","program": "c:\\app\\chrome.bat"},{"id": "firefox","name": "Firefox","server": "f2etest-ie8","program": "c:\\app\\firefox.bat"},{"id": "360se","name": "360浏览器","shortname": "360","server": "f2etest-ie8","program": "c:\\app\\360se.bat"},{"id": "qqbrowser","name": "QQ浏览器","shortname": "QQ","server": "f2etest-ie9","program": "c:\\app\\qqbrowser.bat"},{"id": "sogou","name": "搜狗浏览器","shortname": "搜狗","server": "f2etest-ie9","program": "c:\\app\\sogou.bat"},{"id": "360chrome","name": "360极速浏览器","shortname": "360极速","server": "f2etest-ie8","program": "c:\\app\\360chrome.bat"}
]# 修改noauth-config.xml
[root@e40349b09133 f2etest-web]# vi /etc/guacamole/noauth-config.xml
# value的值均修改为Windows Server 的 IP 地址<configs><config name="f2etest-ie8" protocol="rdp"><param name="hostname" value="192.168.X.3" /><param name="port" value="3389" /><param name="enable-drive" value="true" /><param name="drive-path" value="/home/guacdshare" /></config><config name="f2etest-ie9" protocol="rdp"><param name="hostname" value="192.168.X.4" /><param name="port" value="3389" /><param name="enable-drive" value="true" /><param name="drive-path" value="/home/guacdshare" /></config><config name="f2etest-ie10" protocol="rdp"><param name="hostname" value="192.168.X.5" /><param name="port" value="3389" /><param name="enable-drive" value="true" /><param name="drive-path" value="/home/guacdshare" /></config>
</configs># 重启 web
[root@e40349b09133 f2etest-web]# pm2 restart f2etest-web# 重启 tomcat8
service tomcat8 restart

同步用户信息

注意：f2etestDomain 为 f2etest-web 站点的访问地址。

调用 f2etest-web 的同步所有用户接口，本机浏览器访问 http://{f2etestDomain}/syncAllRemoteUsers

其它浏览器

其他浏览器主要包括：Chrome 浏览器，Firefox 浏览器，Opera 浏览器，QQ 浏览器，UC 浏览器，遨游浏览器，搜狗浏览器，2345 浏览器，猎豹浏览器，360 安全浏览器，360 极速浏览器。

由于这些浏览器的安装步骤基本一致，故下文进行统一介绍其安装部署流程。

下载对应的安装包，进行安装，安装时选择自定义安装，不要将程序安装到 Administrator 账户的路径下，可以安装到 Program Files 或者 C 盘根目录，有资源的情况下可以安装到其他盘符（如：D 盘）。
配置 RemoteApp 应用程序。部分批处理程序可以在 GitHub 源码 f2etest/f2etest-client/f2etest-browsers/app/特殊应用 中拷贝。

目前已知特殊浏览器处理方式：

360se、360chrome 需安装到其他盘符，并且由于会出现断连的情况，需在对应的批处理文件中加入下面这行：

mshta vbscript:msgbox("360安全浏览器，离开请点击确定。",0,"温馨提示")(window.close)

猎豹浏览器需要装到其他盘符。

小结

虽然搭建过程中遇到许多问题，但是在双龙的帮助下最终搭建成功。实现了多浏览器兼容测试的目的，十分感谢他。此外以下官方文档也写的很好，为作者点赞。

[1] F2etest-web 部署

[2] 浏览器云部署

[3] 多浏览器部署