Implementation of HTML5 WebView element location tool

Time:2020-11-28

1、 Tool selection

There are three ways to locate WebView elements:

  • use driver.page_ Source method: write the obtained page content into an HTML file, then open the HTML file with browser, and locate the element using F12 debugging tool
  • Developer tools, a debugging tool provided with the Chrome browser, can be input into the Chrome browser: chrome://inspect#devices The tool needs to visit foreign websites, so it needs to climb over the wall
  • Use UC developer debugging tools, need to install in advance, no need to climb over the wall

To sum up, it is recommended to use UC developer debugging tools

2、 UC devtools installation

1. Baidu search for “UC devtools”

2. Click to enter the installation package download page

3. Download the windows installation package for installation

Double click on the installation path, after the installation, change the installation path

4. Preparation before startup

Before starting, you still need to turn on the debug mode of the app. The mobile phone needs to turn on the “USB debugging mode”. The interface after startup is as follows:

5. Set as the local devtools inspector UI resource

3、 UC – the use of developer debugging tools

After the UC developer debugging tool is enabled, the mobile phone opens the app to the WebView page, and the WebView related information will be displayed automatically

Click inspect, and the HTML page will pop up

This structure is basically consistent with the HTML page elements of the web. We can use some element positioning methods of selenium to locate through the tool

4、 Matches the chrome River version of WebView

We pay attention to the third item that the homepage of UC developer debugging tool displays the chrome version information. Of course, the WebView also needs to have the corresponding version of the chromedriver driver to match the browser version. Previously, we put the chromedriver driver file in the python installation directory, but here, because each WebView involves different driver versions, we should How to manage it? The specific steps are as follows:

Download the chromedriver driver corresponding to the version of Chrome browser

Create a different version management directory for chrome driver

Put the corresponding version of chrome driver in the corresponding management directory

Specify the chromedriver driver and specify the path through the startup parameter chromedriverexecutable


desired_caps['chromedriverExecutable'] = r'G:\ChromeVersionManagement\chromedriver70\chromedriver.exe'

This article introduces the implementation of HTML5 WebView element positioning tool. For more related HTML5 WebView element positioning content, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!