使用chrome-devtools定位元素

时间:2022-10-27 14:10:58

2.1使用chrome-devtools

这是谷歌提供的一个移动端Web开发调试工具,通过它我们可以调试手机页面。通过调试我们可以看到wap页面的源码,从而进行元素的定位。那么这个工具该如何使用呢?首先你要有一台PC,上面安装了chrome浏览器;一台安卓手机,上面安装了chrome移动版的浏览器。将你的手机通过USB数据线连接到你的PC机并开启USB调试模式(由于每个机器不一样,所以开启USB模式的方式就不再详细说明),然后在CMD中输入adb devices看看设备是不是链接成功了:

使用chrome-devtools定位元素

接下来在PC机上打开chrome浏览器

然后在地址栏输入:chrome://inspect/#devices

使用chrome-devtools定位元素

紧接着在你的Android手机上打开chrome浏览器并输入百度首页地址:

当你打开了百度首页之后,我们在回到PC版的chrome浏览器上面的chrome://inspect/#devices页面下观察:

使用chrome-devtools定位元素

接下来点击”inspect”,你会发现弹出一个新窗口,如图:

使用chrome-devtools定位元素

通过此图大家可以看到手机屏幕上的页面已经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”按钮,如下图所示:

使用chrome-devtools定位元素

百度一下button的元素信息

使用chrome-devtools定位元素

通过id定位:

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

百度搜索关键字的代码:

使用chrome-devtools定位元素
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();

}

}
使用chrome-devtools定位元素

2.1chrome toggle device mode 模式

打开PC chrome浏览器,点击F12

使用chrome-devtools定位元素

点击toggle device mode,F5刷新就可以实现方式1的效果,而且比方式1简单。

使用chrome-devtools定位元素

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