1105Selenium web自动化测试经验分享-CSS定位总结

最近重拾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
欢迎关注 微信公众号：紫云小站