使用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简单。

可以切换设备型号及屏幕的大小。