doclist 阅读(56) 评论(0)

一、Chrome 开发者工具的使用

chrome开发者工具

简单介绍

Element:把Html文档以DOM(Document Object Model)树的形式呈现出来

 

Console:用来输入命令的控制台,例如用XPath的命令查找相关html的元素

Sources: 网页的目录结构(代码<css, html....>、资源文件等),可用于了解网页的代码设计的层次,及其使用css代码等。

 

    Other:https://www.cnblogs.com/Fang3s/p/3965231.html

 

二、XPath选择Html元素


 

1.路径表达式:

    

    

     在开发者工具中Console界面使用$x工具函数:

     

      使用Chrome获取Xpath表达式

 

    

2.常见函数、及其表达式:

条件表达式:元素[条件表达式]

id为home的div标签
div[@id = "home"]

text():获取文本信息的函数

获取id为firstHeading的h1标签下span中的text
//h1[@id="firstHeading"]/span/text()

多个相同元素的数组选择:img[]

选择class属性值为infobox的表格中的第一张图片的url
//table[@class="infobox"]//img[1]/@src

逻辑运算and 和 contains()函数

contains可用来对属性的选择(匹配)contains(@属性关键字,"属性值")
and就是与
获取class属性包含ltr和skin-vector的任意元素内所h1中的文本
//*[contains(@class,"ltr") and contains(@class, "skin-vector")]//h1//text()

 开头固定的字符串匹配:starts-with(relative, base)

选择class属性以reflist开头的div标签中所有的url
//div[starts-with(@class, "reflist")]//a/@href

获取页面中每张图片的URL

//img/@src

详细XPath内容可参见W3cschool:http://www.w3school.com.cn/xpath/index.asp

 

 3.XPath表达式使用的注意事项

  • 避免使用数组索引(数值)
    //*[@id="myid"]/div/div/div[1]/div[2]/div[1]/div[1]/a/img
    例如广告区域一旦在其增加一个div或减少一个div就可能照成上述表达式的数据索引不能匹配到
    理想的信息,应该尽可能的使用id号或者class等属性进行查找元素,提高代码的鲁棒性
    //div[@class="thumbnail"]/a/img    

     

  • 类并没有那么好用:布局类通常是通过css来改变页面的外观,一旦布局发生变化,可能class属性值就会发生变化
    //div[@class="thumbnail"]/a/img
    
    当页面布局发生变化时,信息就变为
    //div[@class = "priview green"]/a/img

     

  • 有意义的面向数据的类比具体面向布局的类更好:有意义的数据类的有效期相对较长且不会轻易改变
  • ID可靠性最佳

 

文章引用: