Chrome浏览器获取元素定位及判断

测试开发
1

Window对应chrome driver全局变量配置

配置层级到Application即可，不需要到.exe下

image
image1729×892 247 KB

全局变量配置成功后，对应项目中浏览器无法正常启动

遇到这种报错：

image
image1944×774 149 KB

可以在代码层级解决，在声明Chrome driver对象前，赋值chrome.driver的全局变量

System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");

官方参考文档：
chromedriver-getting-started

image

获取Chrome对应元素定位

1. 打开Chrome浏览器的开发者工具；

  • 快捷键：fn+F12
  • 浏览器右上角的菜单按钮，选择更多工具>开发者工具
    image
    进入开发者工具页面后选择Elements
    image
    image1183×1055 285 KB

2. 获取元素定位

选择最左边的箭头，选中后进入打开的页面对想选中的元素进行点击，对应开发者工具页面选中对应元素，右击，选中列表下copy，进行对应xpth定位选择
image
CSS选择器通常语法比较简洁,运行速度更快

3. 验证元素定位

Chrome的console可以用来验证XPath和CSS。

在Console内进行对应元素定位的验证

image
image1044×812 162 KB

验证css

Console输入：
$(“your_css_selector”)
$$(“your_css_selector”)

验证xpath

Console输入：

$x(“your_xpath_selector”)

举例：
打开社区 对应页面，点击登录按钮

css定位：
「由于注册和登录使用的class是同一个，查找出来是一个数组，需要findElements后找第二个元素」
$$(".d-button-label")
$(".d-button-label")
「或者直接定位」
$(".d-button-label:nth-child(2)")
$$(".d-button-label:nth-child(2)")


xpath定位：
$x("//span[contains(text(),'登录')]")

注意:warning:：

  1. 语法中括号里需要通过双引号 括起来，如果Xpath语句中有双引号，要改成单引号，不然只能解析到第一对双引号的内容；
    image