appium如何测试app中webview的详细过程

àì夳堔傛蜴生んèń 2023-03-01 12:46 13阅读 0赞

### 文章目录 ###

*  写在前面
 *  环境准备
 *  操作步骤
 *   *  工具层面的使用
     *  代码层面的修改
 *  最后总结

# 写在前面 #

app 我们通常使用 appium 这个工具来做自动化测试，通过 appium inspector 来抓取元素或者直接使用 sdk 自带的 uiautomatorviewer 来抓取，但是很多 app 中存在 webview 控件，那这个 webview 的页面我们该如何去测试呢？

首先我们要知道什么是 webview，他是移动设备提供的一个调用 webkit 内核的内置浏览器，其 class 为 android.webkit.WebView，webview 中加载出来的是网页内容。

其实对于 webview 的界面我们使用 appium 原生 uiautomatorviewer 也是可以定位到的，但是定位的效果有限（需要多次刷新 uiautomatorviewer，其会很智能的解析），使用 chrome 自带的 DevTools 工具专门定位 webview 的方式也是可以的，要好定位一些

# 环境准备 #

*  直接 npm 安装好的 appium sever 或者使用集成的 appium-desktop
 *  jdk 和 sdk
 *  已经配置好的一个模拟器，并且可以成功启动
 *  chrome 内核的浏览器，比如 chrome（需要可以魔法上网）或者最新版使用 chrome 内核的 edge。我们主要是想要使用其中自带的 DevTools 这样一个模拟器调试工具

# 操作步骤 #

## 工具层面的使用 ##

我们先启动模拟器，启动好之后打开手机浏览器，然后我们打开支持 chrome 内核的 pc 浏览器，输入如下网址

chrome://inspect/@devices

过几秒之后我们可以看见浏览器显示了连接的模拟器信息（原理大致是 DevTools 这个工具去搜索本地环境变量的 adb 连接了哪些设备，然后把这些设备的机型信息和这些设备的 webview 页面显示出来）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FiY251bGw_size_16_color_FFFFFF_t_70_pic_center]

注意到上面红框中的设备，第二个红框中的 inspect，我们一点击它就会出现一个弹框来监视模拟器的页面了，并且我们还可以注意到的 chrome 版本是 74 的，那么你本地 pc 浏览器 chrome 版本需要高于 74 的才行，这样才可以找到这个 webview

真机上默认是不开启 app 的 webview 调试的，想要真机支持，需要开发使用以下代码代开开关，可以与研发商议在测试环境中使用

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        
        WebView.setWebContentsDebuggingEnabled(true);
    }

## 代码层面的修改 ##

基本代码和 appium 做 app 自动化无差异，但需要增加一些东西

**增加 capability**

DesiredCapabilities capabilities = new DesiredCapabilities();
    capabilities.setCapability("chromedriverExecutable", "这里写 chromedriver 的绝对路径！");

值得注意的是这个 chromedriver 需要写绝对路径！官网文档也是这么写明的，但当我尝试使用相对路径的时候会报找不到 chromedriver 的错误！

并且我们一定要注意这个指定的 chromedriver 路径下的驱动，其版本要小于等于 DevTools 上的 chrome 版本，也就是说要小于等于 webview 所使用的驱动版本，这里 webview 使用的是 74 版本，我的 chromedriver.exe 使用 72 的就行

**context 进入 webview 页面**

driver.getContextHandles().forEach((context) -> {
        
        if (context.toString().contains("WEBVIEW")) {
        
            driver.context(context.toString());
        }
    });

app 中会有多个上下文，一般是 native 和 webview

*  NATIVE\_APP
 *  WEBVIEW\_com.example.testap

**webview 中常常需要切换窗口**

// 用来调试定位所需要点击的控件在 webview 的哪一个窗口中
    driver.getWindowHandles().forEach((window) -> {
        
        driver.switchTo().window(window);
        System.out.println("==标题==");
        System.out.println(driver.getTitle());
        System.out.println("==全文==");
        System.out.println(driver.getPageSource());
    });
    
    // 切换窗口（经测试发现在第一个窗口中）
    Set<String> set = driver.getWindowHandles();
    Object[] arr = set.toArray();
    driver.switchTo().window(arr[0].toString());

我们需要注意的是 webview 中往往不止一个窗口，所以在点击控件的时候我们需要先切换窗口才行，至于怎么找到需要的窗口我们可以通过 getTitle 和 getPageSource 这两个方法在控制台输出文本，然后我们可以搜索控制台关键信息即可

**如何退出 webview**

退出 webview 实际就是进入 NATIVE\_APP，所以和进入 webview 操作一致

driver.getContextHandles().forEach((context) -> {
        
        if (context.toString().contains("NATIVE_APP")) {
        
            driver.context(context.toString());
        }
    });

# 最后总结 #

其实很多 app 都会有 webview 控件，其本质是 app 中内置了一个 webkit 内核的浏览器网页，针对于它我们使用 uiautomatorviewer 是可以去抓取元素的，但要注意刷新两遍 uiautomatorviewer 才行，但是这种方法抓取元素不是很好，因为会不稳定

所以我们建议对于 app 中有 webview 的可以使用 chrome 自带的 DevTools 工具来进行 app 中 webview 的抓取

DevTools 的大致原理是通过环境变量中的 adb 查看设备连接情况，然后找到哪些设备中存在 webview 的情况。我们通过 DevTools 中的 inspect 按钮点击进去就可以进行 webview 中按钮的抓取了，抓取的方法和抓取 selenium 中的 xpath 是一样的。代码层面的改动有，增加了一个 capability 它指定 chromedriver 的本机绝对路径，相对路径是不可行的，并且此 chromedriver 一定要小于等于 DevTools 上面指明的 webview 中使用的 chrome 版本，否则会有问题，然后我们进入 webview 页面需要通过 getContextHandles 来找到有哪些上下文，然后直接通过 context 方法进入到 webview 中，由于上下文一般就是 NATIVE\_APP 和 WEBVIEW\_com.example.testap 所以出 webview 也很简单，就是通过 context 直接进入 NATIVE\_APP 即可，webview 中常常有多个窗口，我们可以打印窗口中文本然后决定 switch 进哪一个窗口来操作

最后总结一下关键词：使用 pc 浏览器抓 webview 按钮，使用 context 进入 webview，使用 switchTo 切换指定窗口

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FiY251bGw_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/ff166ed36e4a4b2bbc8ec1413d8eff0f.png