最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【整理】用Chrome或Chromium查看百度首页中各元素的html源码

chrome crifan 374浏览 0评论
折腾:
【已解决】Mac中用Selenium自动操作浏览器实现百度搜索
和:
【未解决】Mac中用puppeteer自动操作浏览器实现百度搜索
期间,都涉及到:
用Chrome(和Chromium)去查看元素。
整理到此处,供参考。
注:
后续发现:
Playwright的Chromium中,虽然能打开 开发者工具 但是,右键无法复制copy元素的html
右键的copy是空

此处先去确认页面title标题:
即:百度一下,你就知道

此处通过Chrome的 开发者工具 去 右键找到输入框对应的元素:
可以右键 输入框 检查
打开 Chrome的 开发者工具
可以看到对应的html
另外 Playwright调用的Chromium中效果是:
拷贝出来是
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
注意到:
Chromium中 调试工具已实时显示出 定位元素的Selector的,可以写成:
input#kw.s_ipt
其中:
  • input:tag元素名
  • kw:是id
  • s_ipt:是class
—》后续代码中定位元素的CSS的Selector,则可以借鉴,甚至直接用这个写法

以及,确认id是否唯一:
去搜一下此处的id:
证明对于:
id="kw"
是唯一的

对于找 百度一下 按钮,和之前类似,去 右键检查
看到html是:
<input type="submit" id="su" value="百度一下" class="bg s_btn">
且搜了下,确保只有一个:
"su"

找百度搜索后,确保会出现的内容:
找到这个:
百度为您找到相关结果约xxx个
因为,故意找不到,也会出现这个:
去看看其html:
<span class="nums_text">百度为您找到相关结果约2,370,000个</span>


去搞清楚,本身此处的每条搜索结果的内容的html是什么
右键 检查:
找到是:
<a data-click="{
            'F':'778317EA',
            'F1':'9D73F1E4',
            'F2':'4CA6DE6B',
            'F3':'54E5243F',
            'T':'1616767238',
                        'y':'9CFFFEF3'
                                                }" href="https://www.baidu.com/link?url=SoQWblP6nMGxZwlgF6tzp4x1GtMtpQbImjRwqok-NChASMg0A6SGCtwLeGYhE1Bg&wd=&eqid=919e8ff000236bc300000004605de906" target="_blank"><em>crifan</em> – 在路上</a>
上层父节点的元素是:
<h3 class="t"><a data-click="{
            'F':'778317EA',
            'F1':'9D73F1E4',
            'F2':'4CA6DE6B',
            'F3':'54E5243F',
            'T':'1616767238',
                        'y':'9CFFFEF3'
                                                }" href="https://www.baidu.com/link?url=SoQWblP6nMGxZwlgF6tzp4x1GtMtpQbImjRwqok-NChASMg0A6SGCtwLeGYhE1Bg&wd=&eqid=919e8ff000236bc300000004605de906" target="_blank"><em>crifan</em> – 在路上</a></h3>
多看看几个结果,是否都是同样格式:
这个稍微复杂点:
<h3 class="t c-title-en"><a data-click="{
            'F':'778317EA',
            'F1':'9D73F1E4',
            'F2':'4CA6DD6B',
            'F3':'54E5243F',
            'T':'1616767238',
                        'y':'E0FFFFD5'
                                                }" href="https://www.baidu.com/link?url=At4gIa9u4J7k8FEfq7sSEhpeHxhzyntQwEi8zTkeWpSbv_34ZNkD1N9UuQeOCWc4&wd=&eqid=919e8ff000236bc300000004605de906" target="_blank">GitHub - <em>crifan</em>/<em>crifan</em>Lib: <em>crifan</em>'s library</a></h3>
以及另外一个:
<h3 class="t"><a data-click="{
            'F':'778317EA',
            'F1':'9D73F1E4',
            'F2':'4CA6DE6B',
            'F3':'54E5243F',
            'T':'1616767238',
                        'y':'EFBCEFBE'
                                                }" href="https://www.baidu.com/link?url=nDSbU9I2MSInD6Tq7Je06wZD-CiTQ-ckokscP4kiXneJcS0UWUPIqWHMjLDyn5uW&wd=&eqid=919e8ff000236bc300000004605de906" target="_blank"><em>crifan</em> (<em>Crifan</em> Li) · GitHub</a></h3>

转载请注明:在路上 » 【整理】用Chrome或Chromium查看百度首页中各元素的html源码

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
86 queries in 0.102 seconds, using 20.69MB memory