Appium自动化测试--使用Chrome调试模式获取App混合应用H5界面元素

Learning Hybird App Test–Appium Java(Lyndon)

浏览器的远程调试工具,使得我们可以通过PC上开启的控制台,调试手机浏览器中正在运行的代码。运行于 Android 4+系统的Chrome for Android 同样也可以配合ADB(Android Debug Bridge)实现桌面远程调试。桌面版Chrome32+已经支持免安装ADB即可实现远程调试移动设备页面/WebView 。

Android远程调试目前支持所有操作系统,并且支持以下:
● 调试站点的页面
● 调试安卓原生App中的WebView
● 实时将安卓设备的屏幕图像同步显示到开发机器。
● 通过端口转发(port forwarding)与虚拟主机映射(virtual host mapping)实现安卓移动设备与开发服务器进行交互调试。

而在最新的Android 4.4 Kitkat版本中,原本基于Android WebKit的WebView实现被换成基于Chromium的WebView实现。

移动端设置

  1. 在eclipse中配置AndroidSDK环境(Android6.0、ADT23.0)
  2. 将手机与PC通过USB连接,开启USB调试模式;
  3. 使用360手机助手或在dos窗口输入adb devices查看手机驱动连接是否成功;

PC端设置

  1. 在Chrome浏览器地址栏输入chrome://inspect,进入调试模式;
  2. 此时页面显示了手机型号、驱动名称、APP要调试的WebView名称;
  3. 点击inspect,若成功加载与APP端相同界面的调试页面,则配置成功;
  4. 若获取不到WebView或者调试页面预览框显示空白,则需要进行VPN破解–安装翻墙软件(由于默认的DevTools使用的是appspot服务器,这在国内是需要翻越GWF)

翻墙插件

这里写图片描述

chromedriver

Appium通过 chromedriver-port 9515端口进行通信,驱动安卓手机上的WebView;

查看手机系统应用Android System WebView显示的Chrome版本,下载与之对应的chromedriver并添加到Appium安装目录下的chromedriver目录,保证驱动程序版本对应,Appium后台启动时会自动加载chromedriver;若版本不一致则服务端会出现等待chromedriver加载;

端口被占用解决方案:http://jingyan.baidu.com/article/a501d80c26cd90ec620f5e5e.html

杀掉chromedriver进程

杀掉chromedriver进程时,驱动卡住不执行时先把它拉起来,先切换到NATIVE_APP(包括微信端)。

public static void RestartChromedriver() throws Exception{
    Runtime.getRuntime().exec("taskkill /F /im chromedriver.exe");
    System.setProperty("webdriver.chrome.driver", "D:\\Appium\\node_modules\\appium\\node_modules\\appium-chromedriver\\chromedriver\\win\\chromedriver.exe");
}

Appium Context切换Native、Webview

import java.util.Set;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.WebElement;
import com.tms.app.itms.logs.Log;
import io.appium.java_client.android.AndroidDriver;

public class ITMS_GetElement{
	public static void getContextHandle(AndroidDriver<WebElement> driver) {
		Set<String> context = null ;
		for(int i=1;i<=20;i++){
			context = driver.getContextHandles();
			for(String contextName : context) {
				System.out.println(contextName);//打印当前上下文
				if(contextName!=null && contextName.contains("WEBVIEW_com.quantum.Tmsp7")||contextName.contains("WEBVIEW_com.tencent.mm:tools")){
					switchTo_WEBVIEW(driver);
					driver.getPageSource();
					return;
				}
				if(i==20) assert false;
			}
			Log.goSleep(1);
		}
	}
	
	public static void switchTo_WEBVIEW(AndroidDriver<WebElement> driver) {
		String str = driver.currentActivity();//检查当前APP
		
		for(int k=0;k<30;k++){
			try {
				if(str.equals(".MainActivity")){
					driver.context("WEBVIEW_com.quantum.Tmsp7");
					return;
				}else if(str.equals(".plugin.webview.ui.tools.WebViewUI")){
					driver.context("WEBVIEW_com.tencent.mm:tools");
					return;
				}
			} catch (Exception e) {
				if(k<10){
					Log.info("switch...");
				}if(k==30){
					Log.fatal(driver, "switch fail!", e);
				}
			} finally{
				driver.manage().timeouts().implicitlyWait(1, TimeUnit.SECONDS);
			}
		}
	}
}

测试脚本(继承Selenium)

这里写图片描述

//loginSubmit
ITMS_GetElement.getContextHandle(driver);
driver.findElementById("username").sendKeys("15029200344");
driver.findElementById("password").sendKeys("111111");
driver.findElementByCssSelector("#loginSubmit").click();
// switchTo_NATIVE 获取当前地理位置——检查[允许]按钮
ITMS_GetElement.getAlertTitleNewThread(driver);//小米、华为
Thread.sleep(3000);
ITMS_GetElement.switchTo_WEBVIEW(driver);
driver.quit();

其他

从Android 4.4+,Webkit是支持远程调试的,如果Appium中读取不到WebView,需要将app的debug模式打开,在app中配置如下代码(在WebView类中调用静态方法setWebContentsDebuggingEnabled): 
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {  
     WebView.setWebContentsDebuggingEnabled(true);
}

由于大部分App的debug模式是关闭的,即便是内部App,比如QQ/微信,要去找一个开启了debug模式的版本还是比较麻烦的。因此需要使用借助第三方工具来强制开启任何App的Android webview debug模式,使之可以使用 chrome inspect。

参考资料

移动端Web开发调试之Chrome远程调试(Remote Debugging)
http://blog.youkuaiyun.com/freshlover/article/details/42528643

Appium 微信 webview 的自动化技术
https://testerhome.com/topics/6954

HTML5, WebKit, Chromium
http://blog.youkuaiyun.com/milado_nju
理解WebKit和Chromium: WebKit, WebKit2, Chromium和Chrome介绍
http://blog.youkuaiyun.com/milado_nju/article/details/7292164

如何在Android App中建立WebView
http://blog.youkuaiyun.com/tangcheng_ok/article/details/6951113

Selenium Webdriver元素定位的八种常用方式
http://www.cnblogs.com/qingchunjun/p/4208159.html

在选择定位方式的时候应该怎么选择:

  1. 当页面元素有id属性时,最好尽量用id来定位。但由于现实项目中很多程序员其实写的代码并不规范,会缺少很多标准属性,这时就只有选择其他定位方法。
  2. xpath很强悍,但定位性能不是很好,所以还是尽量少用。如果确实少数元素不好定位,可以选择xpath或cssSelector。
  3. 当要定位一组元素相同元素时,可以考虑用tagName或name。
  4. 当有链接需要定位时,可以考虑linkText或partialLinkText方式。
<think>嗯,用户问的是H5页面怎么实现自动化测试。首先,我需要回忆一下H5页面和自动化测试的相关知识。H5通常指的是基于HTML5的网页,可能在移动端或PC端运行。自动化测试的话,常见的有单元测试、集成测试、端到端测试等。用户可能想知道具体的方法和工具,以及步骤。 首先,我应该考虑用户的使用场景。用户可能是前端开发人员或者测试工程师,负责H5页面的质量保障。他们可能希望提高测试效率,减少重复的手动测试工作。需要明确自动化测试的流程,选择合适的工具,比如Selenium、Cypress、Puppeteer这些常用的前端测试框架。 然后,用户的真实需求可能不仅仅是工具推荐,还包括如何搭建测试环境,编写测试用例,处理H5特有的问题,比如移动端适配、触摸事件、动态内容加载等。此外,可能还需要考虑持续集成(CI/CD)中的集成方法,比如Jenkins、GitHub Actions等。 接下来,我应该分步骤来回答。首先介绍常用的工具,比如Selenium适用于跨浏览器测试,Cypress和Puppeteer更适合现代Web应用,尤其是Puppeteer作为Headless Chrome的工具,适合做自动化操作和截图测试。如果是移动端H5,可能需要结合Appium来进行测试,因为它支持混合应用的自动化。 然后需要讲测试用例的编写,比如如何定位元素,处理异步加载,模拟用户操作(点击、滑动、输入等)。可能还需要提到等待机制,确保元素加载完成后再进行操作,避免测试失败。 另外,H5页面可能有不同的设备适配,所以测试时要考虑不同屏幕尺寸和浏览器环境。可能需要使用响应式设计测试工具,或者通过设置不同的用户代理(User Agent)和视口大小来模拟不同设备。 还有,断言和结果验证是关键步骤,需要确保操作后的页面状态符合预期,比如元素存在、内容正确、样式正确等。可能需要使用断言库,比如Chai.js,或者框架自带的断言方法。 持续集成方面,需要将自动化测试脚本集成到CI/CD流程中,确保每次代码提交后自动运行测试,及时发现问题。可能需要配置相应的YAML文件或Jenkins任务。 此外,H5页面可能涉及与Native的交互,比如通过JS Bridge调用原生功能,这部分测试可能需要Mock相关接口,或者使用真实设备进行测试。 总结下来,回答的结构应该是:工具选型、环境搭建、编写用例(元素定位、操作模拟、等待机制、断言验证)、处理H5特性(移动端适配、动态内容、Native交互)、集成CI/CD,最后注意事项(数据隔离、测试报告、维护成本)。需要确保步骤清晰,结合实际例子,帮助用户理解如何具体实施。</think>H5页面自动化测试的实现可分为以下步骤,结合工具选型和技术细节展开: 一、工具选型 1. **跨浏览器测试** - 推荐工具:Selenium WebDriver(支持Java/Python/JS) - 示例代码(Python): ```python from selenium import webdriver driver = webdriver.Chrome() driver.get("https://your-h5-page.com") ``` 2. **现代Web应用测试** - Cypress:$$ npm install cypress --save-dev $$ - Puppeteer:$$ npm install puppeteer $$ 3. **移动端H5测试** - Appium(需配合Android SDK/Xcode) - 设备模拟代码: ```javascript const options = { platformName: 'Android', 'appium:deviceName': 'Pixel_5' } ``` 二、核心实现步骤 1. **元素定位策略** - CSS选择器:`$('.btn-submit')` - XPath:`//div[@id='container']/button[1]` - 处理动态ID:`[data-testid="submit-button"]` 2. **异步加载处理** ```javascript // Cypress示例 cy.get('.loading-spinner', { timeout: 10000 }).should('not.exist') ``` 3. **移动端特性测试 - 触屏事件模拟(Puppeteer): ```javascript await page.touchscreen.tap(100, 200) ``` - 设备旋转检测: ```javascript const isPortrait = window.matchMedia("(orientation: portrait)").matches ``` 三、专项测试方案 1. **性能测试 ```javascript // 使用Lighthouse const report = await lighthouse(url, { output: 'html', port: 9222 }) ``` 2. **可视化测试 - 使用`jest-image-snapshot`: ```javascript expect(screenshot).toMatchImageSnapshot({ failureThreshold: 0.01, failureThresholdType: 'percent' }) ``` 四、CI/CD集成 GitHub Actions配置示例: ```yaml jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - run: npm install - run: npm test - name: Upload report uses: actions/upload-artifact@v2 with: name: test-results path: cypress/reports ``` 五、最佳实践 1. **测试数据隔离** - 使用Mock Service Worker(MSW)拦截API请求 ```javascript worker.use( rest.get('/api/data', (req, res, ctx) => { return res(ctx.json({ value: 'mock_data' })) }) ) ``` 2. **测试报告优化** - Allure报告集成: ```bash # 安装依赖 npm install @shelex/cypress-allure-plugin ``` 3. **容器化执行 ```dockerfile FROM cypress/included:12.0.0 COPY . /app WORKDIR /app CMD ["npm", "run", "test:ci"] ``` 注意事项: 1. 移动端真机测试需配置`desiredCapabilities` 2. 处理WebView需使用`context`切换 3. 视频录制功能建议保留失败用例记录 通过上述方案,可建立覆盖功能、性能、兼容性的自动化测试体系。建议从关键路径用例开始,逐步扩展覆盖范围,同时建立基线数据机制应对UI频繁变更。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值