Angular/Ionic+Capacitor安卓WebView应用自动化测试及元素定位问题

我有一个基于Angular和Ionic开发、通过Capacitor编译为Android的应用，想要对安卓构建版本做自动化测试。试过Appium和Selenium，但只能识别原生Android元素，而我要操作的控件都在WebView里。请问怎么用Selenium或其他自动化测试工具点击WebView内ID为login_button的按钮？

我的测试类代码 #

package com.kodekonveyor.integrationtests;

import io.appium.java_client.android.AndroidDriver;

import static org.junit.Assert.assertTrue;

import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

import org.junit.jupiter.api.AfterAll;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.support.ui.WebDriverWait;

public class FirstAndroidTest {
    public static AndroidDriver driver;
    public static WebDriverWait wait;
    
    @BeforeAll
    public static void setup() throws MalformedURLException {
        DesiredCapabilities caps = new DesiredCapabilities();
        caps.setCapability("platformName", "Android");
        caps.setCapability("app", "target/app-debug.apk");
        caps.setCapability("appPackage", "com.kodekonveyor.angulartest");
        caps.setCapability("appActivity", "com.kodekonveyor.angulartest.MainActivity");
        
        driver = new AndroidDriver(new URL("http://127.0.0.1:4723/wd/hub"), caps);
        wait = new WebDriverWait(driver, IntegrationtestsConstants.WAIT_TIME);
    }
    
    @Test
    public void basicTest() throws InterruptedException {
        //Click and pass Splash
        List<WebElement> elements = driver.findElements(By.xpath("//*"));
        List<String> result = new ArrayList<String>();
        result.add("-------------------------------&gt;");
        elements.forEach(
                (WebElement foo) -> {
                    result.add("tagname:"+foo.getTagName());
                    result.add("class:"+foo.getAttribute("class"));
                    result.add("contentDescription:"+foo.getAttribute("contentDescription"));
                    }
                );
        result.add("-------------------------------&lt;");
        result.forEach(
                (String line) ->
                {
                    System.out.println(line);
                });
    }
    
    @AfterAll
    public static void teardown() {
        driver.quit();
    }
}

输出结果 #

------------------------------->
tagname:null
class:android.widget.FrameLayout
contentDescription:null
tagname:null
class:android.widget.LinearLayout
contentDescription:null
tagname:null
class:android.widget.FrameLayout
contentDescription:null
tagname:null
class:android.widget.LinearLayout
contentDescription:null
tagname:null
class:android.widget.FrameLayout
contentDescription:null
tagname:null
class:android.view.ViewGroup
contentDescription:null
tagname:null
class:android.webkit.WebView
contentDescription:null
-------------------------------<

解决方案 #

要操作WebView内的元素，核心是切换到WebView的上下文，Appium支持在原生上下文和Web上下文之间切换，具体步骤如下：

1. 补充Desired Capabilities配置 #

在setup方法里添加两个关键配置，确保Appium能识别并接入WebView：

// 自动切换到WebView上下文，省略手动切换步骤
caps.setCapability("autoWebview", true);
// 指定ChromeDriver路径，版本需与设备WebView内核匹配
caps.setCapability("chromedriverExecutable", "/your/local/path/to/chromedriver");

提示：如果不想手动管理ChromeDriver版本，可以添加caps.setCapability("chromedriverAutodownload", true);，让Appium自动下载匹配的ChromeDriver。

2. 手动切换WebView上下文（可选） #

如果未开启autoWebview，可以手动获取所有上下文并切换：

// 获取当前所有可用上下文
Set<String> contexts = driver.getContextHandles();
// 遍历切换到带WEBVIEW前缀的上下文
for (String context : contexts) {
    if (context.contains("WEBVIEW")) {
        driver.context(context);
        break;
    }
}

3. 等待并操作WebView内元素 #

切换上下文后，使用WebDriverWait等待目标按钮加载完成，再执行点击操作：

// 导入ExpectedConditions类
import org.openqa.selenium.support.ui.ExpectedConditions;

// 等待login_button元素可点击
WebElement loginBtn = wait.until(ExpectedConditions.elementToBeClickable(By.id("login_button")));
// 点击按钮
loginBtn.click();

4. 修改后的完整测试方法示例 #

@Test
public void basicTest() throws InterruptedException {
    // 手动切换到WebView上下文（若未开启autoWebview）
    Set<String> contexts = driver.getContextHandles();
    for (String context : contexts) {
        if (context.contains("WEBVIEW")) {
            driver.context(context);
            break;
        }
    }

    // 等待并点击login_button
    WebElement loginBtn = wait.until(ExpectedConditions.elementToBeClickable(By.id("login_button")));
    loginBtn.click();

    // 可添加验证逻辑，比如检查跳转后的元素
    // assertTrue(driver.findElement(By.id("home_page_element")).isDisplayed());
}

关键注意事项 #

• 确保应用WebView开启调试模式：在Android项目的MainActivity中，给Capacitor WebView添加调试配置：

  import com.getcapacitor.BridgeWebView;
  // ...
  BridgeWebView webView = getBridge().getWebView();
  webView.setWebContentsDebuggingEnabled(true);
  

• ChromeDriver版本必须与设备/模拟器上的WebView内核版本一致，可通过设备浏览器访问chrome://version查看内核版本。

内容的提问来源于stack exchange，提问作者Árpád Magosányi