Selenium系列教程-03使用开发者工具进行元素定位

时间 2019-11-17

标签 selenium 系列教程使用开发者工具进行元素定位栏目职业生涯繁體版

原文原文链接

系列资源：html

主要内容

经过id属性定位元素
经过name属性查找
经过class属性查找
经过xpath查找元素

经过id属性定位元素

id在html中规定了元素的惟一属性。若是元素有id属性的话，推荐使用id属性来定位元素。以百度搜索为例，以下图：node

经过元素定位器找到输入框的元素id为 kw ，因此在selenium代码中，咱们就能够写代码：

require('chromedriver')

const { Builder } = require('selenium-webdriver')

let driver = new Builder().forBrowser('chrome').build()

driver.get('http://www.baidu.com')

//使用id属性值定位元素
driver.findElement({id:'kw'}).sendKeys('CukeTest')
复制代码

经过name属性定位元素

html中咱们能够为元素添加name属性，使用name属性时，咱们要确保这个元素在整个页面中name属性值惟一。例如，在百度首页中，输入框name属性为 wd ，而且 wd 在整个页面中值为惟一。因此咱们代码能够这样：web

require('chromedriver')

const { Builder } = require('selenium-webdriver')

let driver = new Builder().forBrowser('chrome').build()

driver.get('http://www.baidu.com')

//使用name属性值来定位元素
driver.findElement({name:'wd'}).sendKeys('CukeTest')
复制代码

经过class属性定位元素

html 中咱们通为元素提供class属性来规定元素的CSS类名。大多数状况下，咱们使用class来定义网页元素的显示样式。若是一个页面中有多个元素使用同一个class，用class属性来定位元素时会找到第一个。为减小出错可能，请保证class名在当前页面中被惟一的地方使用。以百度首页为例，输入框的class属性值为s_ipt 而且这个值是惟一的。因此咱们能够这样写代码：chrome

require('chromedriver')

const { Builder } = require('selenium-webdriver')

let driver = new Builder().forBrowser('chrome').build()

driver.get('http://www.baidu.com')

//使用class属性值定位元素
driver.findElement({className:'s_ipt'}).sendKeys('CukeTest') 
复制代码

经过XPath定位元素

XPath 是一门在 XML 文档中查找信息的语言。它在 XML 文档中经过元素和属性进行导航。咱们也能够用XPath来定位html的页面元素。关于XPath的具体语法学习，你们能够参考http://www.w3school.com.cn/xpath/xpath_intro.asp学习，这里给你们介绍一种经过Chrome开发者工具自动生成XPath的方式。浏览器

1.打开百度首页，使用Chrome开发者工具定位到输入框
2.在元素上右键--Copy--Copy XPath 以下图：

对应代码：

require('chromedriver')

const { Builder } = require('selenium-webdriver')

let driver = new Builder().forBrowser('chrome').build()

driver.get('http://www.baidu.com')

// 使用xpath路径选择器查找元素
driver.findElement({xpath:'//*[@id="kw"]'}).sendKeys('CukeTest')
复制代码

以上为咱们经常使用的4种定位元素的方法，还有另外4种元素定位方法，会在下一篇文章中介绍。bash

此为Web UI自动化测试系列文章三，关注本系列分享，熟练掌握Web UI自动化测试。工具

获取更多资讯，能够关注公众号,也能够加QQ群：707467292 进行node.js自动化相关技术交流。 post