Chrome浏览器中利用console进行元素定位

一、console利用xpath定位元素

打开console控制台，很简单，只需要按F12键，然后再点击Console即可，如下图箭头所示：

console利用xpath定位元素命令格式：$x("xpath表达式")

$x("//input[not(@id='su')]")

比如，定位百度页面的“百度一下”按钮。如图：

按钮为input标签，id属性值为“su”

<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">

#定位不含id=su的元素
$x("//input[not(@id='su')]")

#定位子孙元素为input的元素
$x("//input")

#定位input标签，且其id属性值为su的元素
$x("//input[@id='su']")

更多的xpath方法请参考，后续的链接。

二、console利用css定位元素

console利用xpath定位元素命令格式：$("css表达式")

$("css表达式")

比如，定位百度页面的“百度一下”按钮。如图：

<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">

#根据id属性去定位，按钮的id值为：id="su" 
$("#su")

#根据class属性去定位，按钮的class属性值为class="btn self-btn bg s_btn"，取其中一段即可
$(".btn")

更多的css定位方法请参考，如下链接。

三、参考链接

1、xpath定位：https://www.w3school.com.cn/xpath/xpath_syntax.asp

2、css定位：https://www.w3school.com.cn/cssref/css_selectors.asp