使用chrome-devtools定位元素

2.1使用chrome-devtools

這是谷歌提供的一個移動端Web開發調試工具，通過它我們可以調試手機頁面。通過調試我們可以看到wap頁面的源碼，從而進行元素的定位。那么這個工具該如何使用呢？首先你要有一台PC，上面安裝了chrome瀏覽器；一台安卓手機，上面安裝了chrome移動版的瀏覽器。將你的手機通過USB數據線連接到你的PC機並開啟USB調試模式（由於每個機器不一樣，所以開啟USB模式的方式就不再詳細說明），然后在CMD中輸入adb devices看看設備是不是鏈接成功了：

接下來在PC機上打開chrome瀏覽器

然后在地址欄輸入：chrome://inspect/#devices

緊接着在你的Android手機上打開chrome瀏覽器並輸入百度首頁地址：

當你打開了百度首頁之后，我們在回到PC版的chrome瀏覽器上面的chrome://inspect/#devices頁面下觀察：

接下來點擊”inspect”，你會發現彈出一個新窗口，如圖：

通過此圖大家可以看到手機屏幕上的頁面已經PC機上顯示了，你可以看到手機wap頁面源碼以及UI界面。使用用DevTools特別重要的一點是：如果你點擊inspect打開的DevTools窗口一片空白，且刷新無效時，那極有可能是由於被牆的緣故。

在hosts文件最后追加以下內容：

64.233.162.83 chrome-devtools-frontend.appspot.com

保存之后，在CMD中輸入：ipconfig /flushdns

刷新DNS之后，打開的DevTools窗口就不會在是空白的了。

在DevTools窗口頂部有個“Select an element in the page to inspect it”按鈕，如下圖所示：

百度一下button的元素信息

通過id定位：

WebElement searchButton = driver.findElement(By.id(“index-bn”))；

百度搜索關鍵字的代碼：

public AndroidDriver<WebElement> driver;

@BeforeClass

public void startTest() throws MalformedURLException {

DesiredCapabilities capabilities = new DesiredCapabilities();

capabilities.setCapability("platformName","Android");

capabilities.setCapability("deviceName","MeiZu MX3");

capabilities.setCapability("platformVersion", "5.0.1");

capabilities.setCapability("browserName", "Chrome");

driver = new AndroidDriver<WebElement>(new URL("http://127.0.0.1:4723/wd/hub"), capabilities);

driver.manage().timeouts().implicitlyWait(6, TimeUnit.SECONDS);

}

@AfterClass

public void afterClass() {

driver.quit();

}

@Test

public void addContact() {

//打開百度首頁

driver.get("https://www.baidu.com");

//輸入框元素

WebElement inputBox = driver.findElement(By.id("index-kw"));

//輸入JAVA關鍵字

inputBox.sendKeys("JAVA");

//百度一下按鈕

WebElement searchButton = driver.findElement(By.id("index-bn"));

//點擊百度一下按鈕

earchButton.click();

try {

Thread.sleep(2000);

} catch (InterruptedException e) {

e.printStackTrace();

}

}

 

2.1chrome toggle device mode 模式

打開PC chrome瀏覽器，點擊F12

點擊toggle device mode,F5刷新就可以實現方式1的效果，而且比方式1簡單。

可以切換設備型號及屏幕的大小。