UI自动化之：在Console中定位元素技巧

首先打开Chrome浏览器，打开需要定位的网站页面，按F12打开开发者工具，然后切换到Console页签。
可以点击这个按钮去定位元素：

点击辅助定位元素

1.结果中有function

表示支持类jQuery的选择器，用$加上css选择器来选择DOM节点，语法为：

 $('#ID选择器 .Class选择器')

在输入上述语法后回车，就会返回定位到的代码块，例如：

jQuery方法定位元素

代码中就可以直接这样写：

browser = webdriver.Chrome(executable_path='chrome_driver的位置')
browser.get('https://cn.bing.com/')
browser.find_element_by_id('#bLogo')

注：

Class属性用 . 来标示
ID属性用 # 来标示
标签有上下层关系时，上层与下层的标签要用空格隔开
如果一个class属性中有多个class时，中间不能有空格
执行的结果有多个时，可通过索引选择要用第几个结果，如

# 有父子关系
$('#ID选择器 .Class选择器')

# class属性中有多个class
$('.ID选择器.Class选择器')

# 通过索引选择
$('#ID选择器 .Class选择器')[index]

2.结果中没有function

表示不支持类jQuery的选择器，还能通过JS方法来定位元素，js提供了很多方法，如：

document.getElementById('ID选择器')
document.getElementsByClassName('Class选择器')
document.getElementsByName('标签的name名称')
document.getElementsByTagName('html标签名')

例如，在console输入document.getElementById('bLogo')，回车，就会返回定位到的代码块，如下：

js方法定位元素

在代码中通过webdriver的js方法来进行定位元素，类似如下代码（这个是定位页面中的复文本框并输入内容）：

def new_content_textfield(self,content):
     js ="document.getElementById('content_ifr').contentWindow.document.body.innerHTML = '%s'" %(content)
     self.js(js)