Appium上下文和H5測試(一)

清菡發表於2020-11-25
APPH5

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

作者：清菡
部落格：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 自動化中用到了什麼環境啊？

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

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

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

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 可見：

連結：https://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看到的是非常像的。

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

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

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

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

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

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

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

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

只擷取了 Web View 的部分，沒有擷取原生控制元件的。

只取了 Html 這塊：

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

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

跟我們之前使用谷歌 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('http://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+原創文章，歡迎關注、交流，禁止第三方擅自轉載。

相關文章