Python 如何获取页面上某个元素指定区域的 html 源码？
1 需求来源
自动化测试中，有时候需要获取某个元素所在区域的页面源码，用于后续的对比分析或者他用；
另外在 pa chong 中可能需要获取某个元素所在区域的页面源码，然后原格式保存下来，比如保存为 html 或者 excel 格式数据等。
2 测试对象
获取博客园首页右侧的【48 小时阅读排行】词条；
获取博客园首页右侧的【10 天推荐排行】词条。
3 需求实现
3.1 使用 selenium 实现
3.1.1 实现过程
查看博客园首页右侧的【48 小时阅读排行】元素 xpath 属性；
复制其
xpath：'//*[@id="side_right"]/div[3]'；查看博客园首页右侧的【10 天推荐排行】元素 xpath 属性：
复制其
xpath：'//*[@id="side_right"]/div[4]'；使用 selenium 的
get_attribute('outerHTML')方法进行这两个元素的outerHTML获取：
3.1.2 源码
3.2 使用 requests + lxml.etree 实现
3.2.1 实现过程
同样获取对应的元素的 xapth：
先使用
requests的get方法进入网站：
使用
etree方法解析：
找到对应的 xpath，对应的内容：
3.2.2 源码
运行以上代码后，发现报错了。。。
从结果看，发现找到的对应
xpath页面的内容为空，那么可以猜测是因为这个https://www.cnblogs.com/下没有对应的'//*[@id="side_right"]/div[3]'或'//*[@id="side_right"]/div[4]'
3.2.3 问题排查
3.2.3.1 获取该网址下的源码
使用 fiddler 抓包
https://www.cnblogs.com/下的源码，进行查找我们的关键字【48 小时阅读排行】和【10 天推荐排行】：
复制返回的数据用 vscode 打开后查找以上关键字：
发现没有查找到结果，那么可以证实我们说的
https://www.cnblogs.com/下没有对应的'//*[@id="side_right"]/div[3]'或'//*[@id="side_right"]/div[4]'，换言之，我们需要的元素不在这个页面，虽然我们但从网页看是在同一页面，但可能是其他页面加载出来的。所以我们得找到这个原色所在的页面，重新进行定位。
3.2.3.2 使用 fiddler 找该元素所在网页和属性
打开 fiddler 后，我们继续访问
https://www.cnblogs.com/；往下看，找到接口
https://www.cnblogs.com/aggsite/SideRight后，发现返回值里边有我们需要的关键字，那么这个接口地址才是我们需要的，而不是https://www.cnblogs.com/；
我们复制接口
https://www.cnblogs.com/aggsite/SideRight的返回值到 vscode 中，并进行运行：
可以看到我们需要的关键字就在以上接口中，所以先确定好我们所需要的关键字的请求接口为：
https://www.cnblogs.com/aggsite/SideRight；然后我们从以上运行的页面中，获取真正的【48 小时阅读排行】和【10 天推荐排行】的元素的属性（
xpath）。如下：
3.2.4 修正后的源码
再次运行以上代码，OK 了。
版权声明: 本文为 InfoQ 作者【虫无涯】的原创文章。
原文链接:【http://xie.infoq.cn/article/96ca840e0e8eb48571d1d656d】。文章转载请联系作者。
专注测试领域各种技术研究、分享和交流~ 2019-12-11 加入
CSDN测试领域优质创作者 | CSDN博客专家 | 阿里云专家博主 | 华为云享专家 | 51CTO专家博主
评论