Espresso如何断言校验WebView元素的内容样式属性

核心结论 #

Espresso 官方提供的espresso-web组件中，onWebView().withElement()链路下的预置API不支持直接获取或断言CSS样式属性，无法仅靠原生预置方法完成背景色、文字颜色、字号这类样式值的校验。

具体说明 #

webMatches()方法的第一个入参必须是框架预定义的Atom<ElementReference>类型取值器，这类预置Atom是Espresso Web封装好的、可直接从匹配到的DOM元素上提取目标值的执行单元。目前官方内置的Atom仅覆盖以下DOM元素校验维度，没有提供任何和计算样式读取相关的实现：

• 元素文本内容：对应getText()
• 元素标签名：对应getTagName()
• 元素标签上直接声明的原生属性：对应getAttribute("属性名")，注意该方法无法读取页面渲染后生成的计算样式
• 元素基础交互状态：对应isSelected()、isEnabled()、isDisplayed()

你在示例代码中预留的样式属性取值位置，没有任何官方预置的Atom可以直接传入填充：

Web.onWebView(withId(R.id.my_btn_id))
    .withElement(findElement(Locator.ID,"_the_id_of_a_button"))
    // 无原生内置的文字颜色取值Atom可传入
    .check(webMatches({how to reference button text color}, "#0102333"));

Web.onWebView(withId(R.id.my_btn_id))
    .withElement(findElement(Locator.ID,"_the_id_of_a_button"))
    // 无原生内置的背景色取值Atom可传入
    .check(webMatches({how to reference background color}, "#0302223"));

Web.onWebView(withId(R.id.my_btn_id))
    .withElement(findElement(Locator.ID,"_the_id_of_a_button"))
    // 无原生内置的文字字号取值Atom可传入
    .check(webMatches({how to reference text size}, "12px"));

补充说明：Espresso Web所有内置DOM操作Atom底层确实是通过注入JS执行实现，但官方没有对外暴露读取CSS样式的预置封装，如果你明确排除所有JS注入类方案（包括直接调用evaluateJavascript、自定义Atom扩展），仅使用官方开箱提供的API方法，完全无法获取到元素的样式属性值，也无法完成对应断言。

内容的提问来源于stack exchange，提问作者Floam