selenium来测试手机浏览器H5页面的方法

前言

手机浏览器本身是一个 webview，webview 本身是移动端开发中的一个控件，主要是提供一个 webkit 内核的浏览器方便在 app 中添加一些页面，这样来看手机自带浏览器本身就是一个 webview。

实际项目的建议

实际项目中很多 app 拥有 webview 组件，所以这里我建议大家使用 appium 框架来做 webview 测试（其实 selenium 和 appium 框架可以合在一起），有的项目可能只有一个手机浏览器版本的 H5 页面，没有什么 app，那么这里我建议可以使用 selenium 来做手机浏览器 H5 页面的测试，因为 PC 浏览器毕竟比手机浏览器好调试些而且还稳定一些！

谷歌如何调试手机浏览器 H5 页面

我们直接看谷歌浏览器如下：
可以发现左下角红框支持设置成手机查看，上方红框甚至支持设置不同的机型！这里允许我们进行 xpath 的抓取

我看了一下，最新版本使用了 chrome 内核的 edge 还有火狐浏览器也都是支持此功能的

如何增加修改代码

如果只检测手机模拟器可以给 ChromeOptions 设置一下手机模拟器选项 mobileEmulation，下面以 chrome 浏览器举例

ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.addArguments("--no-sandbox");
chromeOptions.addArguments("--disable-dev-shm-usage");

// 如果只测试手机端浏览器 h5 页面需要加上下面三行
Map<String, String> mobileEmulationMap = new HashMap<>();
mobileEmulationMap.put("deviceName", "Galaxy S5");     
chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulationMap);

driver = new ChromeDriver(chromeOptions);