Selenium系列教程- 04经常使用的元素定位方法

时间 2019-11-17

原文原文链接

系列资源：javascript

主要内容

经过css查找元素
经过link_text查找元素
经过partialLinkText查找元素
经过tagName查找元素

经过css属性查找元素

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。在定位web元素的时候咱们可使用css selector来定位元素。关于css的具体教程，能够参考http://www.w3school.com.cn/cssref/css_selectors.asp。这里给你们介绍一种使用CSS快速定位的方法：打开Chrome开发者工具，定位到百度输入框。在元素上右键--Copy--Copy XPath,以下图：css

对应代码：html

require('chromedriver')

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

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

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

// 使用css路径选择器查找元素

driver.findElement({css:'#kw'}).sendKeys('CukeTest')
复制代码

经过link_Text定位元素

selenium-webdriver提供经过匹配超连接文本的方式来定位元素，例如，百度首页能够跳转到新闻 hao123 地图等页面。咱们能够经过连接文本值来定位元素位置。java

例如，咱们要点击新闻跳转到新闻页面。代码能够以下：node

require('chromedriver')

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

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

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

// 使用linkText查找元素

driver.findElement({linkText:'新闻'}).click()
复制代码

经过使用partialLinkText来定位元素

经过linkText的方式咱们能够定位有超连接的元素。partialLinkText提供模式匹配，好比我要在百度首页点击新闻超连接，使用LinkText定位的时候，须要所有匹配。而使用partialLinkText方式的时候，只须要匹配其中的一个字符就能够，能够简单理解为SQL中的模糊查询。以百度首页为例，我如今要点击新闻连接，就能够这样来写代码：git

require('chromedriver')

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

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

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

// 使用partialLinkText查找元素

driver.findElement({partialLinkText :'闻'}).click()
复制代码

经过TagName的方式来定位元素

tagName为html中每一个元素标签名。如下图为例：github

咱们看到每一个元素都是由特定的标签组成，可是通常在web设计中每种标签均可以出现好屡次，因此在selenium自动化代码中，几乎不会用到tagName这个方式去定位元素。同时，selenium-webdriver官方API中也不鼓励你们使用这种方式定位元素。能够参考 APIweb

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