正文

python如何获取页面上某个元素指定区域的html源码？(代码片段)

虫无涯  虫无涯  2022-12-02  749

关键词：

Python如何获取页面上某个元素指定区域的html源码？

1 需求来源
2 测试对象
3 需求实现

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 源码

# -*- coding:utf-8 -*-
# 作者：NoamaNelson
# 日期：2022/10/13 
# 文件名称：test_selenium_otherHTML.py
# 作用：xxx
# 联系：VX(NoamaNelson)
# 博客：https://blog.csdn.net/NoamaNelson

from selenium import webdriver
import time


content_list = ["content_48_h", "content_10_d"]
el_xpath = ['//*[@id="side_right"]/div[3]',
            '//*[@id="side_right"]/div[4]']
content = []

driver = webdriver.Chrome()
driver.get("https://www.cnblogs.com/")
time.sleep(2)

for i in range(0, 2):
    content_list[i] = driver.find_element_by_xpath(el_xpath[i])
    content.append(content_list[i].get_attribute('outerHTML'))

print(f"48小时阅读排行为：content[0]",
      f"10天推荐排行为：content[1]")

time.sleep(2)
driver.quit()

3.2 使用requests + lxml.etree实现

3.2.1 实现过程

同样获取对应的元素的xapth：

# 48小时阅读排行
'//*[@id="side_right"]/div[3]'

# 10天推荐排行
'//*[@id="side_right"]/div[4]'

先使用requests的get方法进入网站：

res = requests.get('https://www.cnblogs.com/', 
			verify=False, 
			headers=headers)

使用etree方法解析：

tree = etree.HTML(res.content)

找到对应的xpath，对应的内容：

tree.xpath('//*[@id="side_right"]/div[3]')
tree.xpath('//*[@id="side_right"]/div[4]')

3.2.2 源码

from lxml import etree
import requests

content_list = ["content_48_h", "content_10_d"]
el_xpath = ['//*[@id="side_right"]/div[3]',
            '//*[@id="side_right"]/div[4]']
content = []

headers = 'Connection': 'close'

res = requests.get('https://www.cnblogs.com/', verify=False, headers=headers)
tree = etree.HTML(res.content)
for i in range(0, 2):
    content_list[i] = tree.xpath(el_xpath[i])
    print(content_list[i])
    content.append(etree.tostring(content_list[i][0], encoding='utf-8'))
print(f"48小时阅读排行为：content[0],",
      f"10天推荐排行为：content[1]")

运行以上代码后，发现报错了。。。

  File "F:\\python_study\\test_selenium_otherHTML.py", line 24, in <module>
    content.append(etree.tostring(content_list[i][0], encoding='utf-8'))
IndexError: list index out of range
[]

从结果看，发现找到的对应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）。如下：

# 48小时阅读排行
'/html/body/div[1]/ul',

# 10天推荐排行
'/html/body/div[2]/ul'

3.2.4 修正后的源码

from lxml import etree
import requests

content_list = ["content_48_h", "content_10_d"]
el_xpath = ['/html/body/div[1]/ul',
            '/html/body/div[2]/ul']
content = []

headers = 'Connection': 'close'

res = requests.get('https://www.cnblogs.com/aggsite/SideRight', verify=False, headers=headers)
tree = etree.HTML(res.content)
for i in range(0, 2):
    content_list[i] = tree.xpath(el_xpath[i])
    print(content_list[i])
    content.append(etree.tostring(content_list[i][0], encoding='utf-8'))
print(f"48小时阅读排行为：content[0],",
      f"10天推荐排行为：content[1]")

再次运行以上代码，OK了。

指定驱动和获取html页面元素

一、浏览器驱动1、将webdriver驱动放到python安装目录的根目录下，不需要指定驱动路径fromseleniumimportwebdriverdriver=webdriver.Chrome()#webdriver驱动放到python安装目录的根目录下就不需要指定驱动路径2、指定驱动路径fromseleniumimportwebdriver#... 查看详情

指定驱动和获取html页面元素

python怎么获取list的某个元素的位置

...位置列表元素位置查找最基础的方式就是全列表查询，在python中使用index可对列表进行对应的操作，指定查找的元素内容即可。但注意返回的是查找到的首个元素索引指令形式index=namelist.index(索引内容)请点击输入图片描述method2... 查看详情

python如何获取这个字典中指定列表和指定元素？

如图参考技术A定义这个字典为变量d那么拿到这个“klines”节点元素中列表的指定值就可以通过下标或是遍历通过特异性关键字获取。但是从你的截图上看，感觉d["klines"]不是一个标准的列表，里面的各个元素之间并没有... 查看详情

页面滚动到指定元素区域(代码片段)

该代码段可将指定元素平滑滚动到浏览器窗口的可见区域。constsmoothScroll=element=>document.querySelector(element).scrollIntoView(behavior:‘smooth‘);smoothScroll(‘#fooBar‘);smoothScroll(‘.fooBar‘); 查看详情

c#改变数组中某个指定元素的值

...mbox的SelectedItem和arr中的name进行比较过了,就是关键不知道如何修改指定名字的数组中的第三个元素string[]lines=File.ReadAllLines(@"../../card.dat");foreach(stringlineinlines)string[]arr=line.Split('|')；stringname=arr[0];stringname=arr[0];//... 查看详情

c#改变数组中某个指定元素的值

jquery检查某个元素在页面上是否存在实例代码

用jQuery检查某个元素在网页上是否存在时，应该根据获取元素的长度来判断，代码如下：if($("#tt").length>0){ //元素存在时执行的代码} 不能使用以下代码：if($("#tt")){ //永远执行，不管元素是否存在}这就是为... 查看详情

如何使用js检测页面上一个元素是不是已经滚动到了屏幕的可视区域内

vartop=obj.getBoundingClientRect().top//元素顶端到可见区域顶端的距离varse=document.documentElement.clientHeight//浏览器可见区域高度。if(top<=se)//code参考技术A工具查看详情

用python脚本爬取和解析指定页面的数据

能简单实现就行（1）使用python脚本（提示：使用beautifulsoap，urllib库等）（2）样例输入：1http://baby.qq.com/a/20140830/013298.htm输出：包含字段有：文章来源：“妈妈网”；文章发表时间：“2014-08-3010:07”；摘要：“[摘要]盛夏已过，... 查看详情

jsrange使用整理

Range对象的概念Range对象代表页面上一段连续的区域，通过Range对象可以获取或者修改页面上任何区域的内容。也可以通过Range的方法进行复制和移动页面任何区域的元素，甚至可以通过Range对象获取并控制光标位置获取页面Range对... 查看详情

vue监听指定区域的滚动，以及设置滚动值

...ref和@scrollref加在普通的元素上，用this.$refs.（ref值）获取到的是dom元素@scroll可以监听滚动事件因为我绑定名字是Box，所以就用这个this.$refs.Box来指定dom进行操作，这里我让他滚回到了顶部。希望对你有所帮助！查看详情

如何获取页面上除div之外的所有元素[重复]

】如何获取页面上除div之外的所有元素[重复]【英文标题】：Howtogetallelementsonapageexceptdiv\'s[duplicate]【发布时间】：2021-09-1509:20:13【问题描述】：所以我试图将一些css应用到页面上的每个元素，但我不希望css应用到div。我目前正在... 查看详情

js与jq获取页面元素值的方法和差异对比

获取浏览器高度和宽度document.documentElement.clientWidth==>浏览器可见区域宽度 document.documentElement.clientHeight==>浏览器可见区域高度 $(document).width()==>浏览器可见区域宽度$(document).height()==>浏览器可见区域高度查看详情

基于python语言的opencv如何把图片中指定区域截取出来？

基于python语言的opencv如何把图片中指定区域截取出来？比如图片中有人脸，然后用矩形框爸人脸框出来了，那么怎么把框中的人脸截取出来现实或者保存？3-切割轮廓(这是我网站找的一篇blog，亲测有效)参考技术A读取一张原始图... 查看详情

selenium--断言和验证

验证页面上的UI元素，是你在自动化测试案例过程中最常用到的特性。Selenese通过各种方式验证UI元素。举例，你是否正在测试一下情况：（1）一个UI元素存在于页面上某个位置；（2）特定文本存在于页面上某个位置；（3）特定... 查看详情

如何获取页面上的所有的标签元素？排除重复的。

这个问题应该这样比较好：如何统计页面上用了多少HTML标签元素。这是我在知乎live上看到的问题，后来讨论了这个https://www.zhihu.com/question/53175578很多人给出了答案，but，我思来想去也觉得很简单啊，写代码的时候发现完全不知... 查看详情

如何转到页面上的特定元素？ [复制]

】如何转到页面上的特定元素？[复制]【英文标题】：Howtogotoaspecificelementonpage?[duplicate]【发布时间】：2011-06-1515:47:28【问题描述】：在我的HTML页面上，我希望能够“转到”/“滚动到”/“关注”页面上的某个元素。通常，我会使... 查看详情