第三章 元素定位练习题
2.29 练习题1:去掉页面动态窗
我们在浏览网页时经常会碰到各种花样的弹窗，在做UI自动化测试的时候势必要处理这些弹窗，这里就介绍一下目前前端界两种弹窗的处理方法。
一、alert弹窗
这种弹窗是最简单的一种，Selenium里有自带的方法来处理它，用switch_to.alert先定位到弹窗，然后使用一系列方法来操作：
accept - 点击【确认】按钮
dismiss - 点击【取消】按钮（如有按钮）
send_keys - 输入内容（如有输入框）
这里举一个菜鸟教程上的一个例子：
http://www.runoob.com/try/try.php?filename=tryjs_alert，
在页面左边点击【显示警告框】就会弹出一个alert弹窗：
我们用以下代码就能实现切换至弹窗并点击【确定】按钮的效果：
al = driver.switch_to_alert() al.accept()
这里这个switch_to_alert()其实是旧写法，照理应该是用switch_to.alert()，但是新写法却会报错，目前猜测是版本问题，可能不支持新写法，这里就先用旧写法。
以下是完整代码，为了运行的时候看得清楚，我加了两处等待：
# encoding:utf-8
from selenium import webdriver
import time
driver = webdriver.Firefox()
driver.get("http://www.runoob.com/try/try.php?filename=tryjs_alert")
driver.switch_to.frame("iframeResult")
driver.find_element_by_xpath("html/body/input").click()
time.sleep(1) al = driver.switch_to_alert()
time.sleep(1) al.accept()
二、自定义弹窗
由于alert弹窗不美观，现在大多数网站都会使用自定义弹窗，使用Selenium自带的方法就驾驭不了了，此时就要搬出JS大法。这里举一个新世界教育官网首页的例子(http://sh.xsjedu.org)：
大家能看到，图中的这种弹窗就是现在主流的表现形式，处理这种弹窗可以利用HTML DOM Style 对象，有一个display属性，可以设置元素如何被显示，
详细解释可以参考http://www.w3school.com.cn/jsref/prop_style_display.asp。将display的值设置成none就可以去除这个弹窗了：
js = 'document.getElementById("doyoo_monitor").style.display="none";'
完整代码如下：
# encoding:utf-8
from selenium import webdriver
import time
driver = webdriver.Firefox()
driver.get("http://sh.xsjedu.org/")
time.sleep(1)
js='document.getElementById("doyoo_monitor").style.display="none";'
driver.execute_script(js)
是不是既简单又高效？
2.30 练习题2:定位百度-更多产品
练习题2：定位百度首页上更多产品里面的‘全部产品’
参考代码
# coding:utf-8
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
import time
driver = webdriver.Firefox()
url = "https://www.baidu.com"
driver.get(url)
driver.maximize_window()
time.sleep(2)
e = driver.find_element_by_link_text("更多产品")
ActionChains(driver).move_to_element(e).perform()
time.sleep(1)
# ele = driver.find_element_by_name("tj_more")
# 经确认，是可以定位到元素的
# print ele.text
# 这一步点击失效了
# ele.click()
# js大法好，完美解决ckick失效问题
js = "document.getElementsByName('tj_more')[0].click()"
driver.execute_script(js)
2.31 练习题3:获取百度联系词
前言
最近有小伙伴问百度输入后，输入框下方的联想词如何定位到，这个其实难度不大，用前面所讲的元素定位完全可以定位到的。
本篇以百度输入框输入关键字匹配后，打印出联想词汇。
一、定位输入框联想词
1.首先在百度输入框输入关键词，如：博客，然后输入框下方会自动匹配出关键词。
2.这时候可以用firebug工具定位到联想出来的词，可以看到下方匹配出来的词都有共同的class属性，这时候就可以全部定位到了。
二、打印全部匹配出来的词
1.通过get_attribute()方法获取到文本信息
三、点击其中一个
1.点击其中的一个联想词，如：第二个
2.这里可以先加一个判断，如果获取到了就点击，没获取到就不点击了，以免抛异常。
（如果想依次点击，用for循环就可以了）
三、参考代码
# coding:utf-8
from selenium import webdriver
import time
driver = webdriver.Firefox()
driver.implicitly_wait(10)
driver.get("http://www.baidu.com")
time.sleep(1)
driver.find_element_by_id("kw").send_keys(u"博客")
# 获取百度输入框的
time.sleep(1)
bd = driver.find_elements_by_class_name("bdsug-overflow")
for i in bd:
print i.get_attribute("data-key")
# 点击其中的一个，如：第二个
if len(bd) > 1:
bd[1].click()
# 打印当前页面url
print driver.current_url
else:
print "未获取到匹配的词"
2.32 js几种定位方法总结
前言
本篇总结了几种js常用的定位元素方法，并用js点击按钮，对input输入框输入文本
一、以下总结了5种js定位的方法
除了id是定位到的是单个element元素对象，其它的都是elements返回的是list对象
1.通过id获取
document.getElementById(“id”)
2.通过name获取
document.getElementsByName(“Name”)
返回的是list
3.通过标签名选取元素
document.getElementsByTagName(“tag”)
4.通过CLASS类选取元素
document.getElementsByClassName(“class”)
兼容性：IE8及其以下版本的浏览器未实现getElementsByClassName方法
5.通过CSS选择器选取元素
document.querySelectorAll(“css selector")
兼容性：IE8及其以下版本的浏览器只支持CSS2标准的选择器语法
二、id定位
1.定位博客首页的管理按钮：id="blog_nav_contact"
2.js的定位语法里面id定位获取的是单个元素对象，可以直接用click（）方法点击元素
三、class定位
1.js里面class定位获取到是是一个list列表对象
2.操作元素的话通过下标取对应的第几个值，如果只用一个那就取下标[0]
3.定位到输入框，可以直接用value="xxx"方法输入内容
4.ByName和ByTagName跟上面class一样，都是定位的一组元素
四、CSS选择器
1.css选择器定位到的也是一组元素，语法跟前面学到的css语法是一样的
五、参考代码：
# coding: utf-8
from selenium import Webdriver
import time
driver = webdriver.Firefox()
driver.get("http://cnblogs.com/yoyoketang")
#定位首页管理按钮：id=blog_nav_contact
js1 = 'document.getElementById("blog_nav_contact")'.click;'
driver.execute_script(js1)
#输入账号
js2 = 'document.getElementsByClassName("input-text")[0].value="悠悠";'
driver.execute_script(js2)
#输入密码
js3 = 'document.getElementsByClassName("input-text")[1].value="xxx";'
driver.execute_script(js3)
#勾选记住密码
js4 = 'document.getElementsByName("remember_me")[0].click();'
driver.execute_script(js4)
#点击登录按钮
js5 = 'document.querySelectorAll(#signin)[0].click();'
driver.execute_script(js5)
2.33 定位的坑：class属性有空格
前言
有些class属性中间有空格，如果直接复制过来定位是会报错的InvalidSelectorException: Message:
The given selector u-label f-dn is either invalid or does not result in a WebElement. The following error occurred:
InvalidSelectorError: Compound class names not permitted
这个报错意思是说定位语法错了。
一、定位带空格的class属性
1.以126邮箱为例：http://mail.126.com/，定位账号输入框
2.如果直接复制过来用class属性定位是会报错的
二、class属性科普
1.class属性中间的空格并不是空字符串，那是间隔符号，表示的是一个元素有多个class的属性名称，在整个HTML文档，使用CSS中的同一个class类可能是一个或多个！
(class属性是比较特殊的一个，除了这个有多个属性外，其它的像name,id是没多个属性的)
2.想补习html基础知识的可以参考菜鸟教程：http://www.runoob.com/html/html-attributes.html
三、class定位
1.既然知道class属性有空格是多个属性了，那定位的时候取其中的一个就行（并且要唯一），也就是说class="j-inputtext dlemail"，取j-inputtext 和dlemail都是可以的，这样这个class属性在页面上唯一就行
2.那么问题来了：如何才知道这个元素的某个属性是不是在页面上是唯一的呢？
四、判断元素唯一性
1.F12切换到HTML界面，在搜索框输入关键字搜索，如：j-inputtext，然后按回车搜索，看页面上有几个class属性中有j-inputtext这个属性的，就知道是不是唯一的了。
五、class属性不唯一怎么办
1.如果这个class的多个属性都不是唯一的咋办呢，元素不唯一也不用怕，可以用复数定位，把所有的相同元素定位出来，按下标取第几个就行。
六、css定位
1.css来定位class属性的元素前面加个点（.）就行,然后空格变成点（.）就能定位了
2.当然css也可以取class属性的其中一个属性（页面上唯一的）来定位，定位方法是灵活多变的
七、参考代码
# coding:utf-8
from selenium import webdriver
driver = webdriver.Firefox()
driver.get("http://mail.126.com/")
driver.implicitly_wait(20)
driver.switch_to.frame("x-URS-iframe")
# 方法一：取单个class属性
driver.find_element_by_class_name("dlemail").send_keys("yoyo")
driver.find_element_by_class_name("dlpwd").send_keys("12333")
# 方法二：定位一组取下标定位（乃下策）
# driver.find_elements_by_class_name("j-inputtext")[0].send_keys("yoyo")
# driver.find_elements_by_class_name("j-inputtext")[1].send_keys("12333")
# 方法三：css定位
# driver.find_element_by_css_selector(".j-inputtext.dlemail").send_keys("yoyo")
# driver.find_element_by_css_selector(".j-inputtext.dlpwd").send_keys("123")
# 方法四：取单个class属性也是可以的
# driver.find_element_by_css_selector(".dlemail").send_keys("yoyo")
# driver.find_element_by_css_selector(".dlpwd").send_keys("123")
2.34 jquery定位（简直逆天）
前言
元素定位可以说是学自动化的小伙伴遇到的一道门槛，学会了定位也就打通了任督二脉，前面分享过selenium的18般武艺，再加上五种js的定位大法。
这些还不够的话，今天再分享一个定位神器jquery，简直逆天了！
一、jquery搜索元素
1.按F12进控制台
2.点全部按钮
3.右侧如果没出现输入框，就点下小箭头按钮
4.输入框输入jquery定位语法，如：$("#input1")
5.点运行按钮
6.左边会出现定位到的元素，如果有多个会以list列表的形式展示出。
二、jquery定位语法
1.jquery语法可以学下w3school的教程：http://www.w3school.com.cn/jquery/jquery_syntax.asp
2.格式如下：
$(selector).action()
--selector:这里的定位语法和css的定位语法是一致的，如：id就是#，class就是点（.）,tag标签名前面就无符号
--action:这个是定位元素之后的操作行为事件，如click
三、jquery行为
1.发送文本语法：$(selector).val(输入文本的值)
2.清空文本语法：$(selector).val('') # 空字符串，两个单引号
3.点击按钮：$(selector).click()
四、参考脚本
# coding:utf-8
from selenium import webdriver
import time
driver = webdriver.Firefox()
driver.get("https://passport.cnblogs.com/user/signin")
driver.implicitly_wait(20)
# 输入账号
username = "$('#input1').val('上海-悠悠')"
driver.execute_script(username)
# 清空文本
# time.sleep(5)
# clear = "$('#input1').val('')"
# driver.execute_script(clear)
# 输入密码
psw = "$('#input2').val('yoyo')"
driver.execute_script(psw)
# 点击登录按钮
button = "$('#signin').click()"
driver.execute_script(button)
浙公网安备 33010602011771号