zoukankan      html  css  js  c++  java
  • python+selenium之元素的八大定位方法

    以百度搜索框为例,先打开百度网页

        1.点右上角爬虫按钮

        2.点左下角箭头

        3.讲箭头移动到百度搜索输入框上,输入框高亮状态

        4.下方红色区域就是单位到输入框的属性:

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

     



    元素定位:find_element_by_id()

        1.从上面定位到的元素属性中,可以看到有个id属性:id="kw",这里可以通过它的id属性单位到这个元素。

        2.定位到搜索框后,用send_keys()方法


    元素定位:find_element_by_name()

        1.从上面定位到的元素属性中,可以看到有个name属性:name="wd",这里可以通过它的name属性单位到这个元素。

        说明:这里运行后会报错,说明这个搜索框的name属性不是唯一的,无法通过name属性直接定位到输入框


    元素定位:find_element_by_class_name()

        1.从上面定位到的元素属性中,可以看到有个class属性:class="s_ipt",这里可以通过它的class属性定位到这个元素。


    元素定位:find_element_by_tag_name()

        1.从上面定位到的元素属性中,可以看到每个元素都有tag(标签)属性,如搜索框的标签属性,就是最前面的input

        2.很明显,在一个页面中,相同的标签有很多,所以一般不用标签来定位。以下例子,仅供参考和理解,运行肯定报错

     
    元素定位:find_element_by_link_text()

        1.定位百度页面上"hao123"这个按钮

    查看页面元素:

    <a class="mnav" target="_blank" href="http://www.hao123.com">hao123</a>

        2.从元素属性可以分析出,有个href = "http://www.hao123.com

    说明它是个超链接,对于这种元素,可以用driver.find_element_by_link_text("hao123")

     
    元素定位:find_element_by_partial_link_text()

        1.有时候一个超链接它的字符串可能比较长,如果输入全称的话,会显示很长,这时候可以用一模糊匹配方式,截取其中一部分字符串就可以了

        2.如“hao123”,只需输入“ao123”也可以定位到

    元素定位:find_element_by_xpath()

    XPath是一种XML文档中定位元素的语言。该定位方式也是比较常用的定位方式。

     

    使用:find_element_by_xpath("XPath")

    实例:

    1通过属性定位元素

    find_element_by_xpath("//标签名[@属性='属性值']")

    id属性:

    find_element_by_xpath("//input[@id='kw']")

    class属性:

    find_element_by_xpath("//input[@class='s_ipt']")

    name属性:

    find_element_by_xpath("//input[@name='wd']")

    maxlength属性:

    find_element_by_xpath("//input[@maxlength='255']")

    2通过标签名定位元素

    指所有input标签元素

    find_element_by_xpath("//input")

    3父子定位元素

    查找有父亲元素的标签名为span,它的所有标签名叫input的子元素

    find_element_by_xpath("//span/input") 

    4根据元素内容定位元素(非常实用)

    find_element_by_xpath("//p[contains(text(),'京公网')]") 

    <p id="jgwab">

    <i class="c-icon-jgwablogo"></i>

    京公网安备11000002000001号

    </p>

    注:contains的另一种用法

    //input[contains(@class,'s')]

    说明class属性包含s的元素。

    5组合定位元素

    //父元素标签名/标签名的属性值:指的是span下的input标签下class属性为s_ipt的元素

    find_element_by_xpath("//span/input[@class='s_ipt']")

    多个属性组合定位(挺常用的)

    指的是input标签下id属性为kw且name属性为wd的元素

    find_element_by_xpath("//input[@class='s_ipt' and @name='wd']")

    指的是p标签下内容包含“京公网”且id属性为jgwab的元素

    find_element_by_xpath("//p[contains(text(),'京公网') and @id='jgwab']")  

    元素定位:find_element_by_css_selector()

    CSS(Cascading Style Sheets)是一种语言,它用来描述HTML和XML文档的表现。CSS可以较为灵活的选择控件的任意属性,一般情况下会比XPath快。且语法也比较简洁。

    不过CSS对于初学者而言比较复杂。

     

    使用:find_element_by_css_selector("CSS")

    实例:

    1通过id属性定位元素

    #号表示通过id属性来定位元素

    find_element_by_css_selector("#kw")

    2通过class属性定位元素

    .号表示通过class属性来定位元素

    find_element_by_css_selector(".s_ipt")

    3通过标签名定位元素

    find_element_by_css_selector("input")

    4通过属性定位元素(挺常用的)

    find_element_by_css_selector("[name='wd']")

    find_element_by_css_selector("[maxlength='255']")

    属性值包含某个值

    属性值包含wd:适用于由空格分隔的属性值。

    find_element_by_css_selector("[name~='wd']")

    5父子定位元素

    查找有父亲元素的标签名为span,它的所有标签名叫input的子元素

    find_element_by_css_selector("span>input")

    6组合定位元素

    标签名#id属性值:指的是该input标签下id属性为kw的元素

    find_element_by_css_selector("input#kw")

    标签名.class属性值:指的是该input标签下class属性为s_ipt的元素

    find_element_by_css_selector("input.s_ipt")

    标签名[属性=’属性值‘]:指的是该input标签下name属性为wd的元素

    find_element_by_css_selector("input[name='wd']")

    父元素标签名>标签名.class属性值:指的是span下的input标签下class属性为s_ipt的元素

    find_element_by_css_selector("span>input.s_ipt")

    多个属性组合定位元素(挺常用的)

    指的是input标签下class属性为s_ipt且name属性为wd的元素

    find_element_by_css_selector("input.s_ipt[name='wd']")

    指的是input标签下name属性为wd且maxlength为255的元素

    find_element_by_css_selector("input[name='wd'][maxlength='255']")

  • 相关阅读:
    php 基础------数组过滤
    js或者jq 使用cookie 时在谷歌浏览器不好使
    css3 -阻止元素成为鼠标事件目标 pointer-events
    CSS3-----transform 转换
    css3---过渡
    css3动画----animation
    移动端尺寸适配--媒体查询
    工作一年总结
    关于Jquery.Data()和HTML标签的data-*属性
    android shape
  • 原文地址:https://www.cnblogs.com/fanqian0330/p/10723170.html
Copyright © 2011-2022 走看看