zoukankan      html  css  js  c++  java
  • selenium css定位元素

    CSS 选择器:

    常见符号:

    #表示 id选择器

    .表示 class选择器

    >表示子元素,层级

    一个空格也表示子元素,但是是所有的后代子元素,相当于 xpath 中的相对路径

    一、css:属性定位

    1.css可以通过元素的id、class、标签这三个常规属性直接定位到

    2.如下是百度输入框的的html代码:

    <input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

    3.css用#号表示id属性,如:#kw

    4.css用.表示class属性,如:.s_ipt

    5.css直接用标签名称,无任何标示符,如:input

    二、css:其它属性

    1.css除了可以通过标签、class、id这三个常规属性定位外,也可以通过其它属性定位

    2.以下是定位其它属性的格式

    [name=wd] [autocomplete='off'][maxlength='255']

    三、css:标签

    css页可以通过标签与属性的组合来定位元素

    input.s_ipt input#kw input[id='kw']

    四、css:层级关系

    //form的id属性

    form#form>span>input

    //form的class属性 

    form.fm>span>input

    五、css:索引

    css也可以通过索引nth-child(1)来定位子元素,直接翻译过来就是第几个小孩

    总结:选择标签后,找第几个小孩即可

    Select控件第三个Opel

    #select>select>option:nth-child(3)

    CheckBox第一个Volvo

    #checkbox>input:nth-child(1)

    CheckBox第二个Saab

    #checkbox>input:nth-child(4)

    RadioBox第二个Saab

    #radio>input:nth-child(4)

    通过索引nth-of-type(2)来定位子元素,按照分类指定

    选择select的saab

    #select>select>option:nth-of-type(2);

     选择 id 为 radio 的 div 下的第 1 个子节点

    div#radio>input:nth-of-type(4)+label

     选择id 为radio 的div 下的第4 个input 节点之后挨着的 label

    节点

    div#radio>input:nth-of-type(4)~label

    六、css:逻辑运算

    css同样也可以实现逻辑运算,同时匹配两个属性,这里跟xpath不一样,无需写and关键字

    [type='checkbox'][name='checkbox1']

  • 相关阅读:
    第八章 多线程编程
    Linked List Cycle II
    Swap Nodes in Pairs
    Container With Most Water
    Best Time to Buy and Sell Stock III
    Best Time to Buy and Sell Stock II
    Linked List Cycle
    4Sum
    3Sum
    Integer to Roman
  • 原文地址:https://www.cnblogs.com/pipile/p/12713370.html
Copyright © 2011-2022 走看看