Appium automation (7): identification and operation of mobile phone H5 web page elements

H5 pages

H5 webpage refers to the fifth generation of HTML, and also refers to all digital products made in H5 language. HTML5 is designed to support multimedia on mobile devices. At present, many websites are self-adaptive, and different web page effects are presented through different terminals. Appium supports UI automation for web pages on the mobile phone.

Environment construction:

Appium automates the operation of H5 web pages on the mobile phone as follows:

Simulator operation:

1. The emulator needs to download Google Chrome that is compatible with the emulator

The following network disk link contains the chromeV8.0 version browser and the corresponding version of the webdriver driver:

Link: https://pan.baidu.com/s/1Uu7RM94bW5CvLQO32DhyEQ
Extraction code: ovqb

2. Install Google Chrome in the emulator, and check the version of Google Chrome (upper right corner – settings – about chrome)

3. Download the chromedriver program corresponding to the version of Google Chrome

4. Write code to test whether the environment is available

from appium import webdriver # import appium driver package

des = {
    'automationName': 'appium',
    'platformName': 'Android',
    'platformVersion':'6.0.1', # Fill in the system version number of the android virtual machine/real machine
    'deviceName':'MuMu', # Fill in the device name of the Android virtual machine/real machine
    'udid':'127.0.0.1:7555', # Fill in the udid viewed through the command line adb devices
    'browserName': 'chrome',
    'newCommandTimeout':30, # Disconnect if no new command is sent for 30 seconds
       }

driver = webdriver.Remote('http://127.0.0.1:4723/wd/hub',des)

driver.get('https://www.baidu.com')
time. sleep(5)

5. If step 4 runs successfully, it means that the environment is configured well, and step 3 is not needed;

If step 4 fails, there are two methods (the second method is recommended):

Method 1. Replace the chromedriver under the appium installation path with the file downloaded in step 3, first find the chromedriver driver under the appium installation package (the path of the window is in C:\Program Files\Appium\resources\app\
ode_modules\appium\
ode_modules \appium-chromedriver\chromedriver\win); the previous chromedriver driver needs to be backed up, you can put the previous chromedriver driver into the back folder, and then put the chromedriver driver downloaded in step 3 into the path win folder; as shown below :

Method 2. You can put the chromedriver driver downloaded in step 3 directly into the code level, and then add the ‘browserName’ and ‘chromedriverExecutable’ parameters when setting Desired Capabilities, and remove the app startup related parameters; as shown in the figure below

Real machine operation:

1. Install the google browser apk on the mobile phone

2. Check the google browser apk version number and download the chromedriver program corresponding to the version

3. Replace the downloaded chromedriver program with the appium default chromedriver program; There are two ways, for details, please refer to step 5 of the emulator operation

4. When setting Desired Capabilities, add the ‘browserName’ and ‘chromedriverExecutable’ parameters, and remove the app startup related parameters, as shown in the code below

Code example:

import time
from appium import webdriver # import appium driver package

des = {
    'automationName': 'appium',
    'platformName': 'Android',
    'platformVersion':'9.1.0', # Fill in the system version number of the android virtual machine/real machine
    'deviceName':'huawei', # Fill in the device name of the Android virtual machine/real machine
    'udid':'HBSBB18821510293', # Fill in the udid viewed through the command line adb devices
    'browserName':'chrome', # device name of the browser
    'newCommandTimeout':30, # Disconnect if no new command is sent for 30 seconds
    # The path of the chromedriver package corresponding to the chrome browser version
    'chromedriverExecutable': 'C:/Users/Jeff/PycharmProjects/APP_AUTO_DEMO/webdriver/chromeV78/chromedriver.exe'
       }

driver = webdriver.Remote('http://127.0.0.1:4723/wd/hub',des)

driver.get('https://www.baidu.com')
time. sleep(5)

As in the above code, after the mobile phone starts the chrome browser successfully, a pop-up box will appear — whether it is allowed to obtain location information (note: this pop-up box belongs to the original app information); as shown below

At this point, you can get native app elements and chrome elements by outputting driver.contexts through print;

Code example:

# Get native app elements and chrome elements
print(driver. contexts)

Output result:

First open a window for locating elements through the inspector tool, then manually click on the chrome browser on the real machine, and then locate the ‘allowed’ elements on the native app pop-up box; as shown below

Then write the code to switch to the pop-up box of the NATIVE_APP native app; and click the Allow button:

Sample code:

# Switch the focus to the pop-up box of the native app, click the allow button
driver.switch_to.context('NATIVE_APP')
driver.find_element(By.XPATH,'//android.widget.Button[@text="allow"]').click()

After the code runs through, another pop-up window will pop up, as shown below

Then use the inspector tool to locate the elements in the above picture, and then write the code. After clicking Always Allow, switch the focus to CHROMIUM

Code example:

# Click the button to always allow
driver.find_element(By.XPATH, '//android.widget.Button[@text="always allowed"]').click()
time. sleep(3)
# Switch to the CHROMIUM interface again
driver.switch_to.context('CHROMIUM')

H5 web page positioning tool:

For H5 web pages on the mobile phone, the previous uiautomatorviewer cannot be used, which is mainly aimed at the information positioning of android native application elements. The Inspector positioning tool can only view part of the element information. Generally, the following two methods are commonly used for element identification:

Method 1 (recommended): Use Google Chrome F12 developer tool, switch to mobile phone mode and then identify

1. Enter the website to be tested in the Google browser on the computer

2. Enter the menu – more tools – developer tools, click toggle device toolbar, switch to mobile phone mode

3. Refresh the website. At this time, it will switch to the mobile web page mode. Click the select element button in the upper left corner of the developer tool, and then click element identification in the web page to be tested.

Code example:

# //Web page identification //Tag name [attribute name="attribute value"]
driver.find_element(By.XPATH,'//input[@id="index-kw"]').send_keys('newdream') # Input value in Baidu input box
time. sleep(2)
driver.find_element(By.XPATH,'//button[@id="index-bn"]').click() # Click the Baidu button 

Method 2:

1. Install the Chrome browser on the mobile phone and turn on the USB debugging mode

2. On the mobile phone, use the installed Chrome browser to open the H5 page to be tested

3. Enter chrome://inspect in the Chrome browser on the computer

4. After opening the link, select DiscoverUSBdevices (generally selected by default), you can see the detected devices, then click inspect, and after the page pops up, you can inspect the elements on the page Remarks: When using this tool once, because remote debugging requires a link to google: https://chrome-devtools-frontend.appspot.com to obtain data, it will be a blank page after opening without overpassing the wall, requiring a VPN or reapplying after overturning the wall Run the tool to use it normally. Over the wall operation reference: https://www.cnblogs.com/YouJeffrey/p/15311131.html)

5. At this time, it can be similar to method 1, click the select element button to identify

The H5 webpage on the mobile phone is essentially a webpage. If selenium has been used before, its identification method is the same as that of selenium. The main targeting methods are as follows:

find_element_by_id: find by id

find_element_by_name: find by name

find_element_by_class_name: find by class

find_element_by_link_text: find by link name

find_element_by_partial_link_text: find by partial link name

find_element_by_css_selector: find by css

find_element_by_xpath: find by xpath

The above method will not be described in detail.

the