根据元素标签名来选择元素:
7.1.3、选择元素方法三:通过WebElement对象选择元素
不仅WebDriver对象有选择元素的方法,WebElement对象也有选择元素的方法。
WebDriver对象选择元素的范围是整个Web页面,而WebElement对象选择元素的范围是该元素的内部。
WebElement对象也可以用find_element_by_XXX,find_elements_by_XXX之类的方法。
补充:等待界面元素出现
关于sleep等待时长的问题,Selenium有一个更好的方案:当发现元素没有找到的时候,并不立即返回找不到元素的错误。而是周期性(每隔半秒钟)重新寻找该元素,直到该元素找到,或者超出指定最大等待时长,这时才抛出异常(如果是find_elements 之类的方法,则是返回空列表)。Selenium的Webdriver对象有个方法叫 implicitly_wait,该方法接受一个参数,用来指定最大等待时长。
7.2、操控元素的基本方法
操控元素通常包括
1、点击元素:click()方法。
2、在元素中输入字符串,通常是对输入框这样的元素如send_keys()方法。
3、获取元素包含的信息,比如文本内容,元素的属性。
3.1、获取元素显示的文本内容
通过WebElement对象的 text 属性,可以获取元素展示在界面上的文本内容。但是有时候,元素的文本内容没有展示在界面上,或者没有完全完全展示在界面上。这时用WebElement对象的text属性获取文本内容,就会有问题。出现这种情况,可以用
element.get_attribute('innerText')
或者
element.get_attribute('textContent')
3.2、获取元素属性
每次程序运行打开窗口过多,为解决这一问题,可采用quit()方法。
3.3、获取整个元素对应的HTMl
要获取整个元素对应的HTML文本内容,可以使用
element.get_attribute('outerHTML')
只是想获取某个元素 内部 的HTML文本内容,可以使用
element.get_attribute('innerHTML')
3.4、获取输入框里面的文字
对于input输入框的元素,要获取里面的输入文本,用text属性是不行的,这时可以使用
element.get_attribute('value')
7.3、CSS表达式
通过CSS selector语法选择元素。
CSS必须告诉浏览器:要选择哪些元素,显示特定的风格。
通过CSS Selector选择单个元素的方法是:
find_element_by_css_selector(CSS Selector 参数)
选择所有元素的方法是
find_elements_by_css_selector(CSS Selector 参数)
CSS Selector同样可以根据tag名、id属性和class属性来选择元素,根据tag名选择元素的CSS Selector语法非常简单,直接写上tag名即可。比如要选择所有的tag名为div的元素,就可以是这样
elements=wd.find_elements_by_css_selector('div')
等价于
elements=wd.find_elements_by_tag_name('div')
前面不必加.,因为标签名不必,属性名要加‘.’
根据id属性选择元素的语法是在id号前面加上一个符号: #id值,中间不可以有空格。
选择前代元素和后代元素
Layer1和layer2是container的直接子元素。
id为 inner11 、inner12 、inner22 的元素是 container 的 后代元素。
如果 元素2 是 元素1 的直接子元素,CSS Selector选择子元素的语法是这样的:
元素1>元素2
中间用一个大于号(我们可以理解为箭头号)前面的元素1>的作用是:限制范围。
注意,最终选择的元素是元素2,并且要求这个元素2 是元素1 的直接子元素,
也支持更多层级的选择,比如
元素1>元素2>元素3>元素4
就是选择元素1里面的子元素元素2里面的子元素元素3里面的子元素元素4,最终选择的元素是元素4。如果元素2是元素1的后代元素,CSS Selector选择后代元素的语法是这样的:
元素1 元素2
中间是一个或者多个空格隔开,最终选择的元素是元素2 ,并且要求这个元素2是元素1的后代元素。也支持更多层级的选择,比如:
元素1 元素2 元素3 元素4
最终选择的元素是元素4
根据属性选择,css选择器支持通过任何属性来选择元素,语法是用一个方括号 [] 。
当然,前面可以加上标签名的限制,比如 div[class='SKnet'] 表示选择所有标签名为div,且class属性值为SKnet的元素。
plant[name=’sknet’]
表示寻找在plant属性下name值为sknet的元素。属性值用单引号,双引号都可以。
根据属性选择,还可以不指定属性值,比如 [href] ,表示选择所有具有属性名为href的元素,不管它们的值是什么。
CSS还可以选择属性值 包含 某个字符串的元素,比如,要选择a节点,里面的href属性包含了miitbeian字符串,就可以这样写
a[href*="miitbeian"]
还可以选择属性值以某个字符串 开头 的元素,比如,要选择a节点,里面的href属性以http开头,就可以这样写
a[href^="http"]
还可以选择属性值以某个字符串 结尾 的元素,比如,要选择a节点,里面的href属性以gov.cn结尾,就可以这样写
a[href$="gov.cn"]
如果一个元素具有多个属性
<div class="misc"ctype="gun">沙漠之鹰</div>
CSS选择器可以指定选择的元素要同时具有多个属性的限制,像这样
div[class=misc][ctype=gun]
7.4、验证CSS Selector
那么我们怎么验证CSSSelector的语法是否正确选择了我们要选择的元素呢?当然可以像下面这样,写出Python代码,运行看看,能否操作成功。
element=wd.find_element_by_css_selector('#searchtext')element.input('输入的文本')
如果成功,说明选择元素的语法是正确的。缺点:太麻烦了。当我们进行自动化开发的时候,有大量选择元素的语句,都要这样一个个的验证,就非常耗时间。由于CSS Selector是浏览器直接支持的,可以在浏览器开发者工具栏 中验证。比如我们使用Chrome浏览器打开http://f.python3.vip/webauto/sample1.html,按F12打开开发者工具栏,如果我们要验证下面的表达式
#bottom>.footer2a
能否选中这个元素
<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>
可以这样做:
点击Elements标签后,同时按Ctrl键和F键,就会出现下图箭头处的搜索框。
我们可以在里面输入任何CSS Selector表达式,如果能选择到元素,右边的的红色方框里面就会显示出类似 2of3 这样的内容。of后面的数字表示这样的表达式 总共选择到几个元素,of前面的数字表示当前黄色高亮显示的是 其中第几个元素。上图中的 1of1 就是指:CSS选择语法
#bottom>.footer2a
在当前网页上共选择到1个元素,目前高亮显示的是第1个。如果我们输入 .plant 就会发现,可以选择到3个元素。