Appium之H5页面元素定位（一）环境搭建

之前我们说过三种APP的形式，原生、混合开发、web版APP，除了原生其他的形式都会有内嵌的H5页面，我们前边学的Appium的元素定位方式都是针对Android原生的形式，那么当遇到内嵌H5页面的情况我们该怎样定位元素呢，这就是我们今天要说的内容。

基于Android原生定位的话主要是基于Android原生控件进行元素定位，而web网页是单独的B/S架构，两者的运行环境不同，因此需要进行上下文（context）的切换，然后对H5页面元素进行定位。我们下边需要了解几个概念。

Context

可以翻译为“上下文”，但是在程序中我们可以理解为当前对象在程序中所处的一个环境。Android应用模型是基于组件的应用设计模式，组件的运行要有一个完整的Android工程环境。在这个环境下，Activity、Services等系统组件才能正常工作，而这些组件不能采用普通的Java对象创建方式，new一下是不能创建实例的，而是要有他们各自的上下文环境，也就是context，所以，context是维持Android各组件能够正常工作的一个核心功能类。

Webview

Webview是Android系统提供的能显示网页的系统控件，他是一个特殊的view，同时他也是一个viewgroup，可以有很多其他的子view，它使用的内核是webkit引擎，4.4版本之后直接使用Chrome作为内置网页浏览器。他的作用是显示和渲染网页，并且可与页面JavaScript交互，实现混合开发。

H5元素定位环境搭建

软件准备

Chrome PC版

这个相对简单，直接官网下载就行，https://www.google.cn/chrome/

Chrome 手机版

直接在软件商店下载，下载完成后会提示安装谷歌服务框架，点击确定进行安装。

Chrome driver

我在讲解selenium的时候有写过关于Chromedriver的下载，详细可参考
selenium（番外篇）之无法启动浏览器

在下载的时候需要注意，要下载他支持的版本，我们要先确定Chrome PC和手机端的版本类型，然后去下载相应的Chrome driver。我这里是90版本，所以需要下载相应的驱动。

在我提供的下载地址中找到90版本的Chromedriver并查看notes.txt文档确实是否支持已安装的浏览器版本，确定后进行下载。

下载完成后，将Chrome driver放在指定的路径下C:\Users\XXXX\AppData\Roaming\npm\node_modules\_appium-chromedriver@4.27.1@appium-chromedriver\chromedriver\win

操作步骤

1、手机连接电脑，开启USB调试模式，并且adb devices可以查看当前连接的设备

2、电脑端、移动端必选安装chrome浏览器，尽可能保持版本一致。PC端根据chrome浏览器的版本安装对应的chrome driver。

3、APP Webview开启debug模式。

开启方式（需要APP开发人员配置）

一般在Webview类中调用静态方法setWebContentsDebugingEnabled设置为true。

检查是否开启

A、打开app对应的H5页面，在chrome浏览器地址栏中输入chrome://inspect/#devices，检查是否显示对应的webview，如果没有则说明未开启debug模式。

B、在自动化脚本中，进入到对用的H5页面，打印输出当前context，如果一直显示为Native APP，则webview未开启。

4、在电脑端chrome浏览器地址栏输入chrome://inspect/#devices，进入调试模式。

5、执行脚本。