Html5如何實(shí)現(xiàn)webview元素定位工具

這篇文章將為大家詳細(xì)講解有關(guān)Html5如何實(shí)現(xiàn)webview元素定位工具，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、工具選擇

webview元素定位有三種方式：

• 使用driver.page_source方法，將獲取到的頁(yè)面內(nèi)容寫(xiě)入到一個(gè)html文件中，然后使用瀏覽器打開(kāi)html文件，使用F12調(diào)試用具進(jìn)行元素定位

• chrome瀏覽器自帶的調(diào)試工具 Developer Tools，在chrome瀏覽器中輸入：chrome://inspect#devices，該工具需要訪問(wèn)國(guó)外的網(wǎng)站，因此需要翻墻

• 使用UC開(kāi)發(fā)者調(diào)試工具，需要提前安裝，無(wú)需翻墻

綜上，推薦使用UC開(kāi)發(fā)者調(diào)試工具

二、UC-devtools安裝

1.百度搜索“uc-devtools”

2.點(diǎn)擊進(jìn)入安裝包下載頁(yè)面

3.下載Windows安裝包進(jìn)行安裝

解壓后雙擊安裝，根據(jù)提示安裝，建議更改安裝路徑，安裝完成后，在安裝目錄下啟動(dòng)應(yīng)用程序

4.啟動(dòng)前準(zhǔn)備

啟動(dòng)之前，依然要打開(kāi)app的debug調(diào)試模式，手機(jī)需要打開(kāi)“USB調(diào)試模式”，啟動(dòng)后的界面如下：

5.設(shè)置為本地 Devtools Inspector UI 資源

三、UC-開(kāi)發(fā)者調(diào)試工具的使用

開(kāi)啟了UC-開(kāi)發(fā)者調(diào)試工具后，手機(jī)開(kāi)啟app到webview頁(yè)面，就會(huì)自動(dòng)顯示webview相關(guān)信息

點(diǎn)開(kāi)inspect，就會(huì)彈出html的頁(yè)面

這個(gè)結(jié)構(gòu)就跟web的html頁(yè)面元素基本一致，我們可以通過(guò)該工具使用selenium的一些元素定位方法進(jìn)行定位即可

四、匹配webview的chromedriver版本

我們從第三項(xiàng)關(guān)注到UC-開(kāi)發(fā)者調(diào)試工具首頁(yè)顯示了chrome版本信息，當(dāng)然該webview也需要有對(duì)應(yīng)版本的chromedriver驅(qū)動(dòng)去跟瀏覽器版本匹配，我們之前都是將chromedriver驅(qū)動(dòng)文件放在了python的安裝目錄下，但是在這里因?yàn)槊總€(gè)webview都會(huì)涉及到不同的驅(qū)動(dòng)版本，這時(shí)我們?cè)撊绾喂芾砟?？具體步驟如下：

下載對(duì)應(yīng)chrome瀏覽器版本的chromedriver驅(qū)動(dòng)

創(chuàng)建一個(gè)chromedriver驅(qū)動(dòng)的不同版本管理目錄

將對(duì)應(yīng)版本的chromedriver驅(qū)動(dòng)放在對(duì)應(yīng)的管理目錄下

指定chromedriver驅(qū)動(dòng)，通過(guò)啟動(dòng)參數(shù)chromedriverExecutable指定路徑

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

關(guān)于“Html5如何實(shí)現(xiàn)webview元素定位工具”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。