最近重拾web自动化测试的知识,打算写个QQ邮箱的脚本练练手,之后全心去搞Jmeter。今天先分享下自己整理的CSS定位的一些知识。
一)CSS定位
CSS(Cascading Style Sheets)是一种语言,它用来描述HTML和XML的元素显示样式;在CSS语言中有CSS选择器(不同的策略选择元素),在Selenium中也可以使用这种选择器。
提示:
1. 在selenium中推荐CSS定位,因为它比XPath定位速度要快
2. css选择器语法非常强大,又比较繁琐,所以需要多多练习
方法 driver.find_element_by_css_selector()
二)CSS定位总结
部分例子是用的百度-那个搜索框,方便操作和理解。
其中有一行注释 是我当时定位搜索框的属性。另外,为了调试时方便看到输入的结果,我在每个用例后面都增加了强制等待1秒。
1.CSS定位之 id属性
根据元素id属性来定位–#id
def test_24(self):
"""css 用#号来表示id属性"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
driver.find_element_by_css_selector('#kw').send_keys('python')
time.sleep(1)
driver.quit()
2.CSS定位之 class属性
根据元素class属性来选择–.class [可以记做:点class]
def test_25(self):
"""css 用.来表示class属性"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
driver.find_element_by_css_selector('.s_ipt').send_keys('python')
time.sleep(1)
driver.quit()
3.CSS定位之 元素的属性名和值
根据元素的属性名和值----[attribute=‘value’]
def test_27(self):
"""css 根据元素的属性名和值来选择 格式:[attribute=value]
如:[type="password"] <选择所有type属性值为password的元素>"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
driver.find_element_by_css_selector('[id="kw"]').send_keys('python')
driver.find_element_by_css_selector('[class="s_ipt"]').send_keys('python')
driver.find_element_by_css_selector('[autocomplete="off"]').send_keys('python')
driver.find_element_by_css_selector('[name="wd"]').send_keys('python')
time.sleep(1)
driver.quit()
4.CSS定位之 标签名+元素的属性名和值
标签名 与 属性名和值的 组合来定位----tag_name[attribute=‘value’]
但是id和class属性比较特殊,实际写法----tag_name#id、tag_name.class
def test_28(self):
"""css 用标签与 属性名和值 组合 来定位"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
driver.find_element_by_css_selector('input.s_ipt').send_keys('python')
driver.find_element_by_css_selector('input#kw').send_keys('python')
time.sleep(2)
driver.find_element_by_css_selector('input[autocomplete="off"]').clear()
time.sleep(1)
driver.find_element_by_css_selector('input[name="wd"]').send_keys('python')
driver.find_element_by_css_selector('input[id="kw"]').send_keys('python')
driver.find_element_by_css_selector('input[class="s_ipt"]').send_keys('python')
time.sleep(1)
driver.quit()
5.CSS定位之 层级关系
最好使用>代替空格 来代表层级关系----tag1>tag2
def test_29(self):
"""css 用层级关系 来定位"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off"> 子
# <span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap"> 父
# <form id="form" name="f" action="/s" class="fm"> 爷
# 爷爷定位孙子
driver.find_element_by_css_selector('form#form>span>input').send_keys('python')
driver.find_element_by_css_selector('form.fm>span>input').send_keys('python')
# 父定位子
driver.find_element_by_css_selector('span.quickdelete-wrap>input').send_keys('python')
driver.find_element_by_css_selector('span.s_ipt_wr>input').send_keys('python')
time.sleep(1)
driver.quit()
6.CSS定位之 逻辑运算
1.逻辑运算----无需写and关键字----tag_name[attribute1=‘value1’][attribute2=‘value2’]
2.逻辑运算----不见得 非加标签名----[attribute1=‘value1’][attribute2=‘value2’]
def test_30(self):
"""css 用逻辑运算来定位,同时匹配两个属性,这里跟xpath不一样,无需写and关键字[不见得 加标签名]"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
# 有tag_name
driver.find_element_by_css_selector('input[id="kw"][class="s_ipt"]').send_keys('python')
driver.find_element_by_css_selector('input[id="kw"][name="wd"]').send_keys('python')
driver.find_element_by_css_selector('input[autocomplete="off"][name="wd"]').send_keys('python')
time.sleep(2)
# 没有tag_name
driver.find_element_by_css_selector('[id="kw"][name="wd"]').clear()
time.sleep(1)
driver.find_element_by_css_selector('[id="kw"][class="s_ipt"]').send_keys('python')
driver.find_element_by_css_selector('[autocomplete="off"][name="wd"]').send_keys('python')
time.sleep(1)
driver.quit()
7.CSS定位之模糊定位
1.模糊匹配----tag[attribute^=“p”] 说明:attribute属性以p字母开头的元素.
----tag[attribute$=“p”] 说明:attribute属性以d字母结束的元素
----tag[attribute*=“p”] 说明:attribute属性包含w字母的元素
2.模糊匹配–[不加标签名]----[attribute^=‘v’]
[不加标签名]----[attribute$=‘v’]
[不加标签名]----[attribute*=‘v’]
def test_31(self):
"""css模糊匹配"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# 有tag_name
driver.find_element_by_css_selector('input[autocomplete^="of"]').send_keys('python')
driver.find_element_by_css_selector('input[autocomplete$="f"]').send_keys('python')
driver.find_element_by_css_selector('input[autocomplete*="o"]').send_keys('python')
time.sleep(2)
# 没有tag_name
driver.find_element_by_css_selector('[autocomplete^="of"]').clear()
time.sleep(1)
driver.find_element_by_css_selector('[autocomplete$="f"]').send_keys('python')
driver.find_element_by_css_selector('[autocomplete*="o"]').send_keys('python')
time.sleep(1)
driver.quit()
8.CSS定位之 索引定位
先定位父类再来定位子类,
tag1[attribute=“value”]>tag2:nth-child(1)、tag1[attribute=“value”]>tag2:nth-child(2)
请留意tag:nth-child()
nth-child() 是小括号
索引是从1开始,是当前tag在所有tag的顺序排的
def test_31b2(self):
"""css 层级关系、 索引"""
driver = webdriver.Chrome()
driver.implicitly_wait(10)
driver.get("https://passport.csdn.net/account/login")
driver.find_element_by_link_text('账号登录').click()
time.sleep(2)
# 用户名 父类form下的第2个
driver.find_element_by_css_selector('form[id="fm1"]>input:nth-child(2)').send_keys('python')
time.sleep(0.5)
driver.find_element_by_css_selector('form[method="post"]>*:nth-child(2)').clear()
# 兄弟节点定位--这里也是css selector的一个痛点,因为css的设计不允许有子元素能够获取父节点的办法(至少目前没有)
# 密码 父类form下的第4个
driver.find_element_by_css_selector('div[class="user-pass"]>form>input:nth-child(4)').send_keys('python')
time.sleep(0.5)
driver.find_element_by_css_selector('div[class="user-info"]>div[class="user-pass"]>form>*:nth-child(4)').clear()
# 登录按钮 父类form下的第12个
driver.find_element_by_css_selector('form[id="fm1"]>:nth-child(12)').click()
time.sleep(2)
driver.quit()
9.CSS定位之 其他
标签页定位
格式:tag_name 如:input <选择所有input元素> 极不推荐!!!
def test_26(self):
"""css 用标签名来定位,不推荐"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# input <选择所有input元素>
print(len(driver.find_elements_by_css_selector('input'))) # 打印input标签总数量
time.sleep(1)
driver.quit()
一点经验:
若某元素的class属性值如果有多个,可以使用driver.find_element_css_selector(’.class1.class2.class3’), 这是同时用到了.class和逻辑运算。
20181108第二次修改:补充了标签页定位、索引定位的代码,同时新掉进、爬出好几个坑。
CSS定位中 兄弟节点定位(子定位父) 没有实现!
索引定位的数字是全部tag里面的排序,非那类tag的排序。
交流技术 欢迎+QQ 153132336 zy
欢迎关注 微信公众号:紫云小站