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

已于 2023-07-27 17:08:58 修改
阅读量2.3k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： # Selenium 文章标签： webview H5 selenium java appium
于 2020-07-24 18:38:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/abcnull/article/details/107567150
本文介绍了如何使用selenium测试手机浏览器的H5页面，建议在有webview组件的项目中结合appium进行测试。谷歌浏览器提供了模拟手机查看和不同机型设置的功能，便于xpath抓取。同时，通过ChromeOptions的mobileEmulation选项，可以在Chrome模拟器中进行测试。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

前言

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

实际项目的建议

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

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

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

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

如何增加修改代码

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

了解本专栏 订阅专栏 解锁全文 超级会员免费看
4行代码，让app自动化框架支持 webview 混合应用操作
m0_67419887的博客
05-06 1070
什么是混合应用 　　移动端应用有两种典型的开发方式，一种是原生的 nativeapp，一种是基于网页开发技术的webapp。 原生应用的体验感更好，但是如果想同时开发安卓应用和 ios 应用，需要不同的原生开发技术。 web 应用可以非常轻松的做到安卓和 ios 的跨平台开发，它的体验感要稍微差一些，不像原生应用那么流畅。 　　Hybrid App（混合模式移动应用）是介于 web app和native app之间的开发方式，可以在原生界面中嵌套网页，因而可以同时具备体验感和跨平台能力。 　　目...
selenium+Chrome模拟H5页面
xiaoxiao.yun的博客
07-16 3871
在做移动端页面测试时可以利用Chrome mobile emulation 辅助完成页面的适配问题，但是目前手机市场上的型号居多我们也没有办法通过人工的模式一一的去适配，所以这里考虑到通过自动化的模式来模拟，下面介绍两种方式通过selenium调用Chrome mobile emulation来完成自动化测试。(电脑浏览器伪装成手机浏览器) 1.通过device name模拟的手机型号，示例代码...
selenium模拟手机打开H5网页
jiaweide123的博客
09-29 1547
遵循CC 4.0 BY-SA版权协议，此文章转载于：https://blog.youkuaiyun.com/yxxxiao/article/details/96156908 1.通过device name模拟的手机型号，示例代码如下 import time from selenium import webdriver mobileEmulation = {'deviceName': 'iPhone 6'} options = webdriver.ChromeOptions() options.add_e...
Selenium移动端测试：Appium整合实战
最新发布
软件工程实践的博客
06-12 1096
你有没有遇到过这样的困扰？用Selenium把Web端的自动化测试写得溜熟，可一到移动端（比如测淘宝App的登录功能）就抓瞎——手机屏幕小、元素定位难、不同型号设备适配麻烦……别慌！Appium就是专门解决这些问题的“移动端自动化神器”。本文将教你如何用Selenium的思路（比如元素定位、断言机制），结合Appium的移动端特性（比如手势操作、多设备管理），快速搭建移动端自动化测试体系。本文会先通过“快递员送外卖”的故事引出核心概念，再用“点奶茶”的例子解释Selenium与Appium的关系；
selenium操作H5页面，自定义Chrome的Mobile emulation。
q_syh的博客
11-16 617
selelnium操作H5页面，有时候需要宽屏模式的页面，可以使用 deviceMetrics 参数来自定义H5页面宽高。
python怎么调试网页h5页面_Selenium如何在谷歌浏览器模拟H5页面
weixin_39679468的博客
12-04 434
1. 第一种方法第一种方法是通过device name来确定我们要模拟的手机样式，示例代码如下：# -*- coding: utf-8 -*-from selenium import webdriverfrom time import sleepmobileEmulation = {'deviceName': 'Apple iPhone 4'}options = webdriver.ChromeO...
pytest-selenium模拟H5
cxm19830125的专栏
06-21 275
#模拟H5 @pytest.fixture def chrome_options(chrome_options): WIDTH = 320 HEIGHT = 640 PIXEL_RATIO = 3.0 UA = 'Mozilla/5.0 (Linux; Android 4.1.1; GT-N7100 Build/JRO03C) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/35.0.1916.138 Mob...
Selenium使用Chrome模拟手机浏览器方法解析
01-20
测试H5页面在不同分辨率设备上的显示情况是否正常爬取数据（一般网站对移动设备浏览的反爬教弱）使用指定设备 操作方法非常简单，在ChromeOptions()浏览器选项，添加实验选项，mobileEmulation选项中通过devicename...
【appium+poco+airtest+python】微信内置浏览器h5与小程序的自动化测试
mz1528的博客
03-07 4814
H5自动化 一、环境安装 1.安装安卓sdk 2.安装appium 3.安装airtest ide 4.安装python3.7（3.7版本敲重点，后面会解释） 二、实现思路 就我个人的经验而言，做自动化就两方面。一个是元素定位，一个是操作元素。那么首先要进行对于h5页面的定位，只要定位到元素了，操作元素就是c+v了。 三、h5元素定位 1.adb连接手机/模拟器，具体连接步骤不做描述 2.打开微信，在文件传输助手中输入网址并进入 http://debugtbs.qq.com 如果这个页面打不开就先打开这个链
轻松自动化---selenium-webdriver(python) (五)
weixin_34055787的博客
07-16 221
 http://www.testclass.net/  测试教程网，专业的selenium 学习网站。 本节要解决的问题： 层级定位   场景： 　　假如两个控件，他们长的一模样，还都叫“张三”，唯一的不同是一个在北京，一个在上海，那我们就可以通过，他们的城市，区，街道，来找到他们。   　　在实际的测试中也经常会遇到这种问题：页面上有很多个属性基本相同的元素，现在需要具体定...
Android应用测试与调试实战第8章：使用selenium测试HTML5浏览器应用
松鼠麒麟的专栏
02-07 471
l
selenium+appium对H5界面的操作
08-22 407
# coding=utf-8from appium import webdriverimport timefrom selenium.webdriver.support.wait import WebDriverWait desired_caps = { 'platformName': 'Android', 'deviceName': 'TUKDU12122011111',...
使用selenium进行对手机知网的爬取
蜘蛛侠的博客
07-21 818
在留校期间，学习了selenium这个强大的python库，它的使用完全解决了对一些经过js渲染的网页的解析和爬取，它可以实现人对网页的基本操作，这样也网站上的反爬有了很有效的解决，虽然单体运行速度是慢了，但是在之后可以把它加入到Scrapy框架里面，然后实现分布式，提高爬去速度的，接下来我讲讲我是用它进行的一个对手机知网的文献标题和作者还有简介的爬取。 1.在大家使用selenium之前，要先下...
selenium模拟手机打开浏览器
wind12370的博客
01-16 1841
selenium模拟手机打开浏览器
selenium模拟登录爬取多页面vivio手机信息
liyunyang2000的博客
06-09 392
selenium模拟登录爬取多页面vivio手机信息,xpath进行数据解析，最终追加保存为csv形式
Selenium如何在谷歌浏览器模拟H5页面
qq_24960819的博客
09-26 855
一、基于java语言（转载：http://www.mamicode.com/info-detail-1972340.html） public class runtest { WebDriver driver; @BeforeClass public void beforeClass(){ System.setProperty("webdriver.c...
python之selenium设置浏览器为手机模式（开发者模式）
He的博客
03-09 8277
1. 启动手机模式浏览器， 手机型号只能选以下范围。 from selenium.webdriver.chrome.options import Options# 手机模式 # 设置手机型号，这设置为iPhone 6 mobile_emulation = {"deviceName": "iPhone 6"} options = Options() options.add_experimen...
appium ui自动化之：操作手机端H5
XiYang的博客
05-12 1333
在第一次使用该工具时，由于远程调试需向google的一个链接：https://chrome-devtools-frontend.appspot.com获取数据，不FQ打开后会是空白页面，需要VPN再次运行该工具即可正常使用。4、打开链接后，选中DiscoverUSBdevices（一般默认选中状态），可以看到监测到的设备，然后点击inspect，弹出页面后，就可以审查页面上的元素了。输入被测网站，将浏览器切换到手机模式，使用元素定位工具定位（和定位web网页的方式一样）
测试h5页面，自动化的方法
03-08
<think>好的，用户问的是如何测试H5页面的自动化方法。首先，我需要明确H5页面是什么。H5通常指的是基于HTML5开发的移动端网页，可能包含丰富的交互、动画和多媒体内容。测试这类页面需要考虑跨浏览器、跨设备的兼容性，以及触屏操作、响应式布局等功能。 用户可能是一名测试工程师或者开发人员，想要提高测试效率，减少重复劳动。他们的需求不仅仅是知道有哪些工具，可能更关注具体的实施步骤、工具选择以及常见问题的解决方案。此外，他们可能对持续集成（CI）集成自动化测试也有兴趣。 首先，我得列举常用的自动化测试工具，比如Selenium、Cypress、Puppeteer等。但H5页面可能在移动端表现更多，所以可能需要结合Appium进行移动端测试。不过，如果用户只是针对移动浏览器，可能不需要Appium，直接用支持移动端模拟的工具即可。 然后，需要分步骤讲解如何实施自动化测试，比如环境搭建、脚本编写、执行和报告生成。每个步骤要给出具体例子，比如用JavaScript或Python写一个简单的测试用例。同时，要提到如何定位H5中的元素，可能涉及CSS选择器、XPath，或者处理动态加载的内容。 兼容性测试是关键，需要覆盖不同浏览器（Chrome、Safari、Firefox）和不同设备尺寸。这时候可以用Selenium Grid或者云测试平台如BrowserStack。性能测试方面，Lighthouse和WebPageTest可能有用，但用户主要问的是自动化功能测试，所以这部分可以简要带过。 持续集成部分，需要说明如何将自动化测试集成到Jenkins、GitHub Actions等工具中，强调自动化测试在CI/CD中的重要性。此外，常见问题比如元素定位困难、等待机制、iframe处理等，需要给出解决方案，比如使用显式等待，或者切换frame。 可能用户在实际操作中会遇到动态元素ID、异步加载等问题，需要提供处理这些问题的技巧，比如使用其他属性定位，或者等待特定条件后再操作。另外，H5页面可能有较多的触摸事件，测试工具是否支持模拟滑动、长按等操作，这也是需要考虑的点。 最后，总结工具选择和最佳实践，帮助用户根据项目需求做出决策。需要确保回答结构清晰，步骤明确，示例具体，让用户能够按照指引开始实施自动化测试。</think>测试H5页面的自动化方法可以通过以下步骤实现（使用$$...$$格式的独立公式仅为排版演示，实际测试无需数学计算）： $$ \begin{aligned} \text{自动化测试} &= \text{工具选择} + \text{脚本设计} + \text{执行验证} \\ \text{覆盖率} &\geq 80\% \quad (\text{推荐目标}) \end{aligned} $$ 一、常用工具选择 1. **Selenium**：支持多语言（Python/Java/C#等），跨浏览器测试 ```python # Python示例：打开H5页面并验证标题 from selenium import webdriver driver = webdriver.Chrome() driver.get("https://your-h5-site.com") assert "首页" in driver.title ``` 2. **Cypress**：专为Web设计的测试框架，实时重载 ```javascript // 检测页面元素 cy.visit('https://your-h5-site.com') cy.get('.mobile-menu').should('be.visible') ``` 3. **Puppeteer**：通过Chromium控制浏览器 ```javascript // 截图测试 const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://your-h5-site.com'); await page.screenshot({path: 'h5_homepage.png'}); ``` 二、关键测试场景 1. **跨浏览器兼容性** - 使用Selenium Grid同时测试： $$ \text{Chrome} \cap \text{Safari} \cap \text{Firefox} $$ - 验证CSS3动画、Canvas渲染等H5特性 2. **响应式布局** ```python # 模拟移动端分辨率 mobile_emulation = {"deviceName": "iPhone X"} options = webdriver.ChromeOptions() options.add_experimental_option("mobileEmulation", mobile_emulation) ``` 3. **性能测试**（结合Lighthouse） ```bash lighthouse https://your-h5-site.com --view --preset=desktop ``` 三、实施流程 1. 元素定位策略 - 优先使用CSS Selector - 动态元素使用XPath函数： $$ \text{//button[contains(@class,'btn-loading')]} $$ 2. 异步处理 ```python # 显式等待（推荐） from selenium.webdriver.support.ui import WebDriverWait element = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "dynamicContent")) ) ``` 四、持续集成（CI）示例 ```yaml # GitHub Actions配置示例 name: H5 Auto Test on: [push] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Run Cypress Tests uses: cypress-io/github-action@v2 with: start: npm start wait-on: 'http://localhost:3000' ``` 五、常见问题解决方案 1. **混合内容检测**： ```javascript // 检测非HTTPS资源 const insecureContents = await page.$$eval('img', imgs => imgs.filter(img => !img.src.startsWith('https:')) ); ``` 2. **触摸事件模拟**： ```python action_chains = ActionChains(driver) action_chains.click_and_hold(element).move_by_offset(100, 0).release().perform() ``` 建议根据项目规模选择工具： $$ \text{小型项目} \rightarrow \text{Cypress} $$ $$ \text{大型复杂系统} \rightarrow \text{Selenium + Appium（混合应用）} $$ 最后推荐组合方案：使用Cypress做功能测试 + Lighthouse做性能审计 + Jenkins做持续集成，可覆盖90%以上的H5测试需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

abcnull

您的打赏是我创作的动力之一

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值