UI自动化之八大元素定位总结

元素定位：要确保元素的唯一性
查找定位元素方法：方法一： F12进入，选择Element, 点击Element左边的"箭头"按钮
                  方法二： F12进入，输入ctrl + f ,在输入框中输入元素相关的内容，进行查找

定位元素的作用： 主要是要操作元素
                 操作一(获取内容)： 元素.text
                 操作二(发送按键):  元素.send_keys()
                 操作三(点击按键)： 元素.click()
                 操作四(获取属性):  元素.getattribute()
                 操作五(查子元素):  元素.find_elements()

八大定位方法
   1.id定位：find_element_by_id(self, id)
   2.name定位：find_element_by_name(self, name)
   3.class定位：find_element_by_class_name(self, name)
   4.tag定位：find_element_by_tag_name(self, name)
   5.link定位：find_element_by_link_text(self, link_text)
   6.partial_link定位find_element_by_partial_link_text(self, link_text)
   7.xpath定位：find_element_by_xpath(self, xpath)
   8.css定位：find_element_by_css_selector(self, css_selector）



element和elements区别
   1.element方法定位到是是单数，是直接定位到元素
   2.elements方法是复数，这个学过英文的都知道，定位到的是一组元素，返回的是list队列
   3.可以用type()函数查看数据类型

1.通过id定位元素
  如果id不是动态的，一个页面的id是唯一的。最简单的定位方式。
  使用：find_element_by_id("id_vaule")
  实例：find_element_by_id("kw")
  注意点：有些id值是动态变化的，则不能使用该方法定位。如下：id就是动态的，每次进入页面，该id都会改变。
  <label style="display: block;" id="auto-id-1469758879170" class="u-label f-dn">邮箱帐号或手机号</label>

2. 通过class_name定位元素
  classname有可能重复。
  使用：find_element_by_class_name("class_name_vaule")
  实例：find_element_by_class_name("s_ipt")

3. 通过tag_name定位元素
  标签名字最容易重复，不过，当定位一组数据时，可使用。
  使用：find_element_by_tag_name("tag_name_vaule")
  实例：find_element_by_tag_name("input")
  注意点：当定位一组元素时：可勾选一组复选框。如下：
  find_element_by_tag_name("input")

4.通过name定位元素
  name有可能会重复。
  使用：find_element_by_name("name_vaule")
  实例：find_element_by_name("wd")

5.通过link文字精确定位元素
  <a onclick="return false;" class="lb" name="tj_login" href="https://passport.baidu.com/v2/?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2F">登录</a>
  使用：find_element_by_link_text("text_vaule")
  实例：find_element_by_link_text("登录")

6.通过link文字模糊定位元素
  使用：find_element_by_partial_link_text("部分text_vaule")
  实例：find_element_by_partial_link_text("登")

7.通过CSS定位元素
  CSS（Cascading Style Sheets）是一种语言，它用来描述HTML和XML文档的表现。CSS可以较为灵活的选择控件的任意属性，
  一般情况下会比XPath快。且语法也比较简洁。
  不过CSS对于初学者而言比较复杂。
  <span class="bg s_ipt_wr quickdelete-wrap">
     <span class="soutu-btn"></span>
     <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd>
     <a id="quickdelete" class="quickdelete" href="javascript::" title="清空" style="top:0px; right:0px; display:none;"></a》
  </span>
  <span class="bg s_btn_wr">
     <input id="su" class="bg s_btn" type="submit" value="百度一下">
  </span>
  实例：
  7.1通过id属性定位元素
     #号表示通过id属性来定位元素
     find_element_by_css_selector("#kw")
  7.2通过class属性定位元素
     .号表示通过class属性来定位元素
     find_element_by_css_selector(".s_ipt")
  7.3通过标签名定位元素
     find_element_by_css_selector("input")
  7.4通过属性定位元素（挺常用的）
     find_element_by_css_selector("[name='wd']")
     find_element_by_css_selector("[maxlength='255']")
     属性值包含某个值
     属性值包含wd：适用于由空格分隔的属性值。
     find_element_by_css_selector("[name~='wd']")
  7.5父子定位元素
     查找有父亲元素的标签名为span，它的所有标签名叫input的子元素
     find_element_by_css_selector("span>input")
  7.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标签下id属性为kw且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']")


8.通过XPath定位元素
  XPath是一种XML文档中定位元素的语言。该定位方式也是比较常用的定位方式。
  <span class="bg s_ipt_wr quickdelete-wrap">
     <span class="soutu-btn"></span>
     <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd>
     <a id="quickdelete" class="quickdelete" href="javascript::" title="清空" style="top:0px; right:0px; display:none;"></a》
  </span>
  <span class="bg s_btn_wr">
     <input id="su" class="bg s_btn" type="submit" value="百度一下">
  </span>
  使用：find_element_by_xpath("XPath")
  8.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']")
  8.2通过标签名定位元素
     指所有input标签元素
     find_element_by_xpath("//input")
  8.3父子定位元素
     查找有父亲元素的标签名为span，它的所有标签名叫input的子元素
     find_element_by_xpath("//span/input")
  8.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的元素。
   8.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']")


-- xpath  和  css 的区别？（面试题)
   -- xpath功能更强，对于复杂的元素定位,xpath优势很明显
   -- css的写法简洁，主要用来查找简单的元素，更简洁
   -- css无法进行text文件的定位
   -- 主流浏览器中，css的查找速度快（相对），在IE浏览器中，xpath是要快过于css中(国外有技术大神验证过)

=定位元素操作的重要说明=
当我们输出了错误的手机号，用户密码之后，界面上会弹出一个信息，这个信息出现的时间非常短，非常
不好定位。这里我们先F12，进入源码模式，选择"Sources"栏，选择右边栏，最左边的那个暂停键(这是js 写的代码，所以需要暂停调式的方式去操作)，这时再回去"Elements"栏去定位