Appium上下文和H5測試(一)

堅持原創輸出，點擊藍字關注我吧

作者：清菡
部落格：oschina、雲+社區、知乎等各大平台都有。

目錄

  • 一、混合應用-H5
    • 1.混合應用是什麼？
    • 2.怎麼樣分辨一個 App 頁面究竟是原生的還是 Web 的？
    • 3.如果 App 是 Web 的介面，那介面不會有布局邊界顯示，如有則說明是原生的介面。
  • 二、想要操作這個 Html 頁面
    • 1.想通過程式碼點擊立即購買，那 Web 自動化中用到了什麼環境啊？
    • 2.寫程式碼點擊全程班，進入全程班後該怎麼辦？
    • 3.要求
    • 4.Debug 模式怎麼來呢？
  • 三、元素定位的 4 種方式及操作
    • 1.chrome://inspect，需要 fanqiang。
    • 2.使用 driver.page_source 獲取 Html 頁面。
    • 3.找開發人員要源程式碼文件。
    • 4.uc-devtools 不需要 FQ。
    • 5.想定位一個元素怎麼操作？
  • 四、程式碼

一、混合應用-H5

微信小程式的前提都是基於 H5，沒有 H5 的情況下來操作微信小程式您可能不太明白。H5 是混合應用，有原生應用和混合應用。

1.混合應用是什麼？

是在一個裡面有 Html 頁面，又有原生控制項的標籤等等。

2.怎麼樣分辨一個 App 頁面究竟是原生的還是 Web 的？

1）在手機/模擬器中點擊關於手機中的版本號 5 下，出來開發者選項。

2）在開發者選項中勾選上顯示布局邊界，再返回到 App 介面。

華為榮耀 p30:設置-系統和更新-開發人員選項-顯示布局邊界（開啟）。

開啟顯示布局邊界，你看到的每一個元素，它都把它框起來了。一個框代表一個原生控制項中的一個元素（原生控制項中的一個控制項或者一個布局）。

整屏能操作的地方都被這樣框起來了，證明所有的都是原生控制項啊，也就是UiAutomator Viewer可以識別的。

但是，你看這一整塊就是一整個框啊。包括立即購買、下載、打開這樣的東西都沒有。而是作為中間整屏放在一起的。

從圖片中可以看出，上面是原生控制項，下面是 Html 頁面。所以，這個就是混合應用。

3.如果 App 是 Web 的介面，那介面不會有布局邊界顯示，如有則說明是原生的介面。

有時候，肉眼上的識別不是很信任，那麼就打開截屏工具：

如果看到這個地方是個 Web View，那麼絕對是個 Html 頁面。

UiAutomator Viewer不能識別 Html 頁面的。到了這個 Web View 就卡住了。它裡面的 Html 是跟它沒有關係的。

二、想要操作這個 Html 頁面

得像 Web 自動化一樣，先在這個介面找到立即購買的鏈接（也就是整個 Html 頁面）找到了之後才能去點擊。

1.想通過程式碼點擊立即購買，那 Web 自動化中用到了什麼環境啊？

  • 我想驅動網頁去做點事，就必須要把環境搭建好才可以。Android手機的很多 Api 都是Google開發的，所以基本上只能用Google Web View 了。也得安裝 Chrome driver，得有驅動程式還得跟瀏覽器版本匹配。

  • 從外面點擊進來的時候，外面是一個原生控制項，從一個原生控制項點擊之後，切換到一個 Html 頁面中操作，它們倆很顯然是不一樣的東西。一個是 Html，一個是Android控制項。所以要點擊立即購買，還要必須進行切換操作。

  • 現在雖然識別了，但是不知道怎樣操作它。

2.寫程式碼點擊全程班，進入全程班後該怎麼辦？

混合應用自動化方案

基於 UiAutomator+Chrome driver

原生控制項部分則 Uiautomator，Web View 的部分走 Chrome driver，二者結合。

3.要求：

  • Android 4.4+
  • Web View 必須為 Debug 版本。

要從原生控制項中切換到手機的 Html 頁面中，切換操作的前提是得知道切換的是誰，得知道切換到哪去，所以這裡也是一樣的。首先必須能夠識別到 Web View。

識別到 Web View 的前提是：下載知乎或者豆瓣，去獲取所有當前可以操作的上下文，會發現沒有 web view。也就是關閉了 Web View 的顯示。

Windows 切換必須獲取 Windows 的句柄，有才能切換。既然把 Web View 的識別給關閉了，就沒辦法切換到 Web View 這個元素。

所以這裡有個硬性條件，Web View 必須為 Debug 版本。

瀏覽器除外，瀏覽器本身就是可以識別的，本質上就是網頁性質的訪問。手機上的瀏覽器也是一樣的。

4.Debug 模式怎麼來呢？

解決方法：

1、App 打包的時候需要開啟 Web View 的 Debug 屬性setWebContentDebuggingEnabled(true)

這個直接讓開發加上就好，再去打包就可以了；（測試階段讓他加上，一般上了應用商城中的，都是把它關閉的）。

2、開啟後，有些真機可能依然沒有辦法獲取到 Web View（模擬器的 contexts 中有 Web View，但有些手機沒有。）

官方給出的答案是：需要將手機 root，然後再去獲取。

目前很多廠商，它的許可權設置是不太一樣的。有的手機需要 root，有的手機不需要 root。

開啟 Web View 可見：

鏈接：//developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews

可以識別 Web View 了，切換進來後就必須做到元素定位了。

三、元素定位的 4 種方式及操作

1.chrome://inspect，需要 fanqiang。

瀏覽器中輸入網址：chrome://inspect/#devices

打開網址後，點擊介面中的 inspect，彈出一個介面可以看到完整的 Html 介面，但是大部分同學沒有 fq 的許可權。所以這種方式擱置。

2.使用 driver.page_source 獲取 Html 頁面。

driver 有個 page_source 選項，已經切換到 Html 頁面，怎麼切換的？

已經切換到 Html 頁面了，那我們頁面源碼就是完整的 Html。通過 driver.page_source 得到完整的 Html，然後將它保存在我本地的文件當中，再用瀏覽器去打開。這樣照樣可以做元素定位和元素識別。

之前寫文件操作了。知道如何獲取頁面源碼，如何獲取 Html，你只要將它保存文件即可。

第二種方式有點累贅。

3.找開發人員要源程式碼文件。

這個呢就要藉助開發的幫助，ta 要是不給你，你也沒辦法哦。

4.Uc-devtools 不需要 FQ。

Uc-devtools 這個工具非常好，它的效果和我們在chrome://inspect/#devices看到的是非常像的。

下載地址：//dev.ucweb.com/download/?spm=ucplus.11199946.0.0.53974692TtSluZ#DevTool

下載下來安裝的時候，直接下一步下一步就好了。

安裝完畢後，它是沒有桌面標識的，可以在開始-你的應用程式中找到它。

注意：這個工具只識別 Web View，如果手機打開的頁面中有 Web View 網頁，能識別到的情況下這裡才會顯示。如果沒有 Web View，那這裡就什麼都不顯示。

第一次使用的時候，可能介面顯示不全，可以設置成這樣：

這個是Android手機內置的 Web View 版本，也就是Android手機內置的瀏覽器版本。Web 自動化要下載瀏覽器驅動，那我們這個地方並沒有操作的是瀏覽器，操作的是網頁。

怎麼知道下載哪個驅動呢?

78.0.3904.108 代表瀏覽器的版本，實際上是手機中內置的 Web View 版本。Web View 就代表了瀏覽器，不需要您真的安裝它。下載個能支援 78.0.3904.108 的Google驅動。

只截取了 Web View 的部分，沒有截取原生控制項的。

只取了 Html 這塊：

這裡有個完整的 Html 頁面在這裡。

5.想定位一個元素怎麼操作？

跟我們之前使用Google F12 的套路是一樣的。

一個手機中除了這個 Web View 網頁，可能還有別的 Web View 網頁。如果是連續的操作，不需要回退到原生控制項中，可以在 Html 當中一直操作下去。Html 頁面，以前寫 Web 自動化的時候有寫過有 iframe 就切換，沒有 iframe 就不切換。都是一樣的道理。

這是 Web 自動化和 App 自動化混合使用版本。現在能夠找到元素也能夠識別到 Web View。怎麼切換？

四、程式碼

driver.find_element_by_android_uiautomator(loc).click()

這個步驟之後進入到了全程班的頁面，進入全程班的頁面也是需要時間的。Web View 這個元素當中放的才是 Html 頁面，是不是等到 Html 頁面載入出來之後再去獲取所有的相關內容這樣比較好。

萬一切過來的時候，Html 頁面還沒有去載入就馬上獲取當前所有可以操作的對象，這樣很容易丟失，所以一樣要有等待。

首先等到 Web View 這個元素的 class 控制項出現。


from appium import webdriver
import time
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from appium.webdriver.common.mobileby import MobileBy


desired_caps={}
# 平台類型
desired_caps["platformName"]="Android"
# 平台版本號
desired_caps["platformVersion"]="10"
# 設備名稱
desired_caps["deviceName"]="2NSDU20410017297"
# app 包名
desired_caps["appPackage"]="填appPackage"
# app 入口 acitivity
desired_caps["appActivity"]="填appActivity"


# 連接Appium server。前提：appium desktop要啟動。有監聽埠。
# 將desired_caps發送給appium server。打開app
driver = webdriver.Remote('//127.0.0.1:4723/wd/hub',desired_caps)

loc='new UiSelector().text("全程班")'
WebDriverWait(driver,20).until(EC.visibility_of_element_located((MobileBy.ANDROID_UIAUTOMATOR,locals())))
driver.find_element_by_android_uiautomator(loc).click()

# 等待Web View元素出現  -Web View裡面放的是Html
WebDriverWait(driver,20).until(EC.visibility_of_element_located(MobileBy.CLASS_NAME,'android.webkit.WebView'))
time.sleep(1)#稍微sleep 1秒，確保裡面的Html，所有的都能載入完成。

公眾號 「清菡軟體測試」 首發，更多原創文章：清菡軟體測試 96+原創文章，歡迎關注、交流，禁止第三方擅自轉載。

Tags:

VirMach 便宜 VPS

QNews

QNews