css表达式-下篇

选择语法联合使用


点击这里,边看视频讲解,边学习以下内容


CSS selector的另一个强大之处在于: 选择语法 可以 联合使用

打开这个网址 http://f.python3.vip/webauto/sample1.html

比如, 我们要选择 网页 html 中的元素 <span class='copyright'>版权</span>

<div id='bottom'>
    <div class='footer1'>
        <span class='copyright'>版权</span>
        <span class='date'>发布日期:2018-03-03</span>
    </div>
    <div class='footer2'>
        <span>备案号
            <a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>
        </span>
    </div>        
</div>         

CSS selector 表达式 可以这样写:

div.footer1 > span.copyright

就是 选择 一个class 属性值为 copyright 的 span 节点, 并且要求其 必须是 class 属性值为 footer1 的 div节点 的子节点


也可以更简单:

.footer1 > .copyright

就是 选择 一个class 属性值为copyright 的节点(不限类型), 并且要求其 必须是 class 属性值为 footer1 的节点的 子节点


当然 这样也是可以的:

.footer1  .copyright

因为子元素同时也是后代元素


组选择


点击这里,边看视频讲解,边学习以下内容


如果我们要 同时选择所有class 为 plant class 为 animal 的元素。怎么办?

这种情况,css选择器可以 使用 逗号 ,称之为 组选择 ,像这样

.plant , .animal


再比如,我们要同时选择所有tag名为div的元素 id为BYHY的元素,就可以像这样写

div,#BYHY

对应的selenium代码如下

elements = wd.find_elements_by_css_selector('div,#BYHY')
for element in elements:
    print(element.text)


我们再看一个例子

打开这个网址 http://f.python3.vip/webauto/sample1a.html

我们要选择所有 唐诗里面的作者和诗名, 也就是选择所有 id 为 t1 里面的 span 和 p 元素

我们是不是应该这样写呢?

#t1 > span,p

不行哦,这样写的意思是 选择所有 id 为 t1 里面的 span所有的 p 元素

只能这样写

#t1 > span , #t1 > p

按次序选择子节点


点击这里,边看视频讲解,边学习以下内容

我们打开这个网址 http://f.python3.vip/webauto/sample1b.html

对应的html如下,关键信息如下

    <body>  
       <div id='t1'>
           <h3> 唐诗 </h3>
           <span>李白</span>
           <p>静夜思</p>
           <span>杜甫</span>
           <p>春夜喜雨</p>              
       </div>      
        
       <div id='t2'>
           <h3> 宋词 </h3>
           <span>苏轼</span>
           <p>赤壁怀古</p>
           <p>明月几时有</p>
           <p>江城子·乙卯正月二十日夜记梦</p>
           <p>蝶恋花·春景</p>
           <span>辛弃疾</span>
           <p>京口北固亭怀古</p>
           <p>青玉案·元夕</p>
           <p>西江月·夜行黄沙道中</p>
       </div>             

    </body>

父元素的第n个子节点

我们可以指定选择的元素 是父元素的第几个子节点

使用 nth-child

比如,

我们要选择 唐诗 和宋词 的第一个 作者,

也就是说 选择的是 第2个子元素,并且是span类型

所以这样可以这样写 span:nth-child(2)


如果你不加节点类型限制,直接这样写 :nth-child(2)

就是选择所有位置为第2个的所有元素,不管是什么类型

父元素的倒数第n个子节点

也可以反过来, 选择的是父元素的 倒数第几个子节点 ,使用 nth-last-child

比如:

p:nth-last-child(1)

就是选择第倒数第1个子元素,并且是p元素

父元素的第几个某类型的子节点

我们可以指定选择的元素 是父元素的第几个 某类型的 子节点

使用 nth-of-type

比如,

我们要选择 唐诗 和宋词 的第一个 作者,

可以像上面那样思考:选择的是 第2个子元素,并且是span类型

所以这样可以这样写 span:nth-child(2)


还可以这样思考,选择的是 第1个span类型 的子元素

所以也可以这样写 span:nth-of-type(1)

父元素的倒数第几个某类型的子节点

当然也可以反过来, 选择父元素的 倒数第几个某类型 的子节点

使用 nth-last-of-type

像这样

p:nth-last-of-type(2)

奇数节点和偶数节点

如果要选择的是父元素的 偶数节点,使用 nth-child(even)

比如

p:nth-child(even)

如果要选择的是父元素的 奇数节点,使用 nth-child(odd)

p:nth-child(odd)


如果要选择的是父元素的 某类型偶数节点,使用 nth-of-type(even)

如果要选择的是父元素的 某类型奇数节点,使用 nth-of-type(odd)

兄弟节点选择


点击这里,边看视频讲解,边学习以下内容

相邻兄弟节点选择

上面的例子里面,我们要选择 唐诗 和宋词 的第一个 作者

还有一种思考方法,就是选择 h3 后面紧跟着的兄弟节点 span。

这就是一种 相邻兄弟 关系,可以这样写 h3 + span

表示元素 紧跟关系的 是 加号

后续所有兄弟节点选择

如果要选择是 选择 h3 后面所有的兄弟节点 span,可以这样写 h3 ~ span



更多CSS选择器的介绍,可以参考CSS 选择器参考手册


扫码分享给朋友,一起学更有动力哦




课后练习

题目1

点击这里下载 白月SMS系统的测试用例文档,白月SMS系统的 安装步骤 可以参考 课程1的课后练习

完成用例 UI-0105 的自动化



参考答案

  • 库代码文件 lib.py
# 将用例检查点封装为函数
def CHECK_POINT(desc, conditionRet):
    print(f'\n** 检查点 **  {desc} ')

    if conditionRet:
        print('---->  通过')
    else:
        print('---->   !! 不通过!!')
        exit(1)


  • 用例代码文件 ui0105.py
from selenium import webdriver
from time import sleep


from lib import CHECK_POINT


wd = webdriver.Chrome()
wd.implicitly_wait(5)

wd.get('http://127.0.0.1/mgr/sign.html')

# 根据 ID 选择元素,并且输入字符串
wd.find_element_by_id('username').send_keys('byhy')
wd.find_element_by_id('password').send_keys('88888888')

# 点击登录
wd.find_element_by_tag_name('button').click()

# 直接按次序找到要点击的菜单元素
wd.find_element_by_css_selector('.sidebar-menu li:nth-of-type(3)').click()


# 点击添加药品按钮
wd.find_element_by_class_name('glyphicon-plus').click()

# form-contorl 对应3个输入框
inputs = wd.find_elements_by_css_selector('.add-one-area .form-control')

# 输入 药品名称
inputs[0].send_keys('青霉素盒装1')
# 输入 编号
inputs[1].send_keys('YP-32342349')
# 输入 描述
inputs[2].send_keys('青霉素注射液,每支15ml,20支装')

# 第1个 btn-xs 就是创建按钮, 点击创建按钮
wd.find_element_by_css_selector('.add-one-area .btn-xs').click()

# 等待1秒
sleep(1)


# 找到 列表最上面的药品信息
items = wd.find_elements_by_css_selector(
    'div.search-result-item span')[:6]

texts = [item.text for item in items]
print(texts)

# 预期内容为
expected = [
'药品:',
'青霉素盒装1',
'编号:',
'YP-32342349',
'描述:',
'青霉素注射液,每支15ml,20支装'
]

CHECK_POINT('药品信息和添加内容一致', texts == expected)

wd.quit()

补充练习

VIP学员请联系老师获取补充练习题