移动端的自动化测试之旅

自动化测试

目前Puppeteer已经可以完美实现桌面chromium内核的自动化测试，但是Puppeteer官方对于移动端的自动化测试却是一片空白。如何利用Puppeteer调试移动端的网页？这是一个很重要的问题！

Puppeteer的原理就是对chrome devtool协议进行一个高级的封装；所以，理论上，只要是chrome内核的浏览器，不管移动端还是桌面端，只要支持该协议，puppeteer就可以调用。

如何连接移动端的调试呢？
这篇文章给了一个很好的答案： https://github.com/cyrus-and/chrome-remote-interface。

一、开启Chrome远程调试

参考文章：https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
要调试移动端网页，有几个坑要踩：

1. 保证手机使用USB连接电脑；
2. 开启移动端的USB调试；
3. 安装手机驱动（可以下载该版本手机的手机助手）
4. 您应使用您的一个 Google 帐户登录到 Chrome（官方文档要求）
5. 打开chrome://inspect/#devices页面，就可以移动端应用了

二、安装ADB连接安卓手机

adb全名Andorid Debug Bridge. 顾名思义, 这是一个Debug工具.
参考文章：https://www.jianshu.com/p/5980c8c282ef

1. 下载ADB文件，https://adbadb.com/
2. chrome的调试非常方便，直接运行：adb forward tcp:9222 localabstract:chrome_devtools_remote，在浏览器中打开localhost:9222就可以出来了，还可以在puppeteer中直接运行；
3. APP的里面内嵌的网页就非常麻烦了，先通过 adb shell ps或adb shell ps|grep com.xxx命令找到需要调试的应用的PID，然后，使用adb forward tcp:9222 localabstract:webview_devtools_remote_<pid>

悲催的是，一般安卓应用内置的chrome内核都是非常低的版本，对devtool的支持非常弱，更别提运行puppeteer了。不过，对于大公司的APP，是不会直接使用安卓内核的，一般都会用腾讯的TBS内核；

TBS是当前非常流行的浏览器内核：https://x5.tencent.com/tbs/index.html，在安卓端，它的内核也是基于chromium。

三、连接TBS浏览器内核

1. 要开始TBS内核的调试，可以进入http://debugx5.qq.com页面，进入信息页TAB，打开TBS内核的Inspector调试功能
2. 进入chrome://inspect/#devices页便可以调试网页了，
3. 也可以下载腾讯提供的TBS Studio，https://x5.tencent.com/tbs/guide/debug.html，方法大同小异。

如何在唯品会APP和金融APP中打开debugx5页面：
a) 唯品会APP：打开https://mxfd.vip.com/publicity?backId=wbswxtest20180607，点击debugx5 商城APP按钮；
b) 金融APP：点击 打开当前页 商城APP按钮， 再在唯品会APP中点击debugx5 金融APP按钮

四、最后的问题

目前TBS内核使用的chrome版本是53，这个版本的浏览器对于puppeteer所需要的devtool协议是远远不够的，而且，桌面端和手机端的连接也不是特别稳定。
同样，IOS端的调试更具有挑战。