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

太过爱你忘了你带给我的痛 2023-03-01 11:45 17阅读 0赞

### 文章目录 ###

*  前言
 *  谷歌如何调试手机浏览器 H5 页面
 *  如何增加修改代码

# 前言 #

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

**实际项目的建议**

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

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

我们直接看谷歌浏览器如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FiY251bGw_size_16_color_FFFFFF_t_70]可以发现左下角红框支持设置成手机查看，上方红框甚至支持设置不同的机型！这里允许我们进行 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);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FiY251bGw_size_16_color_FFFFFF_t_70]: /images/20230208/ffb334be444d4b85b081c7c7cdb65b24.png