初识HTML构成

　　　双标签  <a>文本</a> 、<span>文本</sapn>

　　　内嵌标签  <div>    <input  >  </div>

属性：存在标签里面，比如 id，name，class

text文本：只有双标签内才有文本，单标签没有文本

　　<div>
        <input type="text" name="username" placeholder="请输入昵称">
　　　　 <input type="password" name="password" placeholder="请输入密码">
        <h3 class="title_author">问卷调查</h3>        
        1-选择你最喜欢的编程语言
        <input type="radio" name="faver language" value="java">java
        <input type="radio" name="faver language" value="python">python
        <input type="radio" name="faver language" value="c++">c++
        <input type="radio" name="faver language" value="php">php
        <a href="https://i.cnblogs.com/posts?cateId=1964726" class="title_author" target="_parent">
             <img src="http://www.fulan.com.cn/img/icons/home-sols-3.png"> [接口自动化测试]
        </a>
    </div>    

 

总结：一般input标签都有name属性，name属性作为传送到后端接口数据的key

元素定位的原则：

• 确保元素唯一
• 找到两个元素：加索引，或者使用复合条件
• 不要去定位会动态变化的元素：属性当中包含了数字或者特殊字符串，一般就会动态变化

web页面元素定位方法

• id : 通过id属性定位，一般id为唯一
• name ： 通过name属性定位
• class name ：定位class属性中间不能有空格
• tag name
• link text
• partail link text
• xpath
• css_selector

常用定位方式举例：

driver.find_element("id","kw")
driver.find_element("name","wd")
driver.find_element("class name","s_ipt")
driver.find_element("xpath","//input[@id='kw']")
driver.find_element("xpath","//input[@name='wd']")
driver.find_element("css_selector","#kw")
driver.find_element("css_selector",[id="kw"])

xpath用法：百度页面元素为例

• 两种写法：1，绝对路径/../../..    2,相对路径 //标签[@属性=" "] 
• and 组合条件：//input[@id="kw" and @name="wd"]
• 索引：(//input[@name='wd])[1]                                                   注意：前面加括号，索引从1开始
• 通过爸爸找儿子：//sapn[@name=" "]/input[@name=" "]
• 通过祖先找后代：//span//input
• 通过儿子找父亲：//input[@name="wd"]/..
• 使用通配符*：//*[@name="wd"]
• 通过文本查找元素：//div[@id="s-top-left"]/a[text()=" 视频 "]       注意：如果文本有空格，定位时也要加空格，或者用包含
• 通过包含文本查找：//div[@id="s-top-left"]/a[contains(text(),"视频")]
• 轴运算：
  • 找爸爸：//input[@name='wd]//parent::span
  • 找爷爷：//input[@name='wd]//ancestor::form
  • 找同级哥哥：//input[@name='wd]//preceding-sibling::*
  • 找同级弟弟：//input[@name='wd]//following-sibling::span

css selector用法：

• # 查找id属性: #kw   或者 [id="kw"]
• . 查找class属性: .s_ipt  或者 [class="s_ipt"]

xpath 和 css selector的区别:

• css选择器表达更加简洁。查找效率更高，但是功能没有xpath多，css不能上下查找，不能用text.
• xpath查找效率更低，但是功能更加强大，可以找上下级元素，可以用text文本查找。