折腾:
【已解决】Mac中用Selenium自动操作浏览器实现百度搜索
和:
【未解决】Mac中用puppeteer自动操作浏览器实现百度搜索
期间,都涉及到:
用Chrome(和Chromium)去查看元素。
整理到此处,供参考。
注:
后续发现:
Playwright的Chromium中,虽然能打开 开发者工具 但是,右键无法复制copy元素的html
右键的copy是空
![](https://www.crifan.com/files/pic/uploads/2021/04/76ffd0592f90408b8cf77f36dd54e709.jpg)
此处先去确认页面title标题:
![](https://www.crifan.com/files/pic/uploads/2021/04/2fcd1a7c0907440bb71caecfff54cdaf.jpg)
即:百度一下,你就知道
此处通过Chrome的 开发者工具 去 右键找到输入框对应的元素:
可以右键 输入框 检查
![](https://www.crifan.com/files/pic/uploads/2021/04/c4dd22f0aab9448483a5bd65d9314fd1.jpg)
打开 Chrome的 开发者工具
![](https://www.crifan.com/files/pic/uploads/2021/04/e8972bd0528048a0b28a5aa14ddb78c0.jpg)
可以看到对应的html
![](https://www.crifan.com/files/pic/uploads/2021/04/d66b238e218240d9af2f5c86955d0777.jpg)
另外 Playwright调用的Chromium中效果是:
![](https://www.crifan.com/files/pic/uploads/2021/04/3a1b1eba0e0e4a2ca376266cc5a64f43.jpg)
拷贝出来是:
<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:
![](https://www.crifan.com/files/pic/uploads/2021/04/9414cee823264614b87dc3f4ef876288.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/04/4fa1d32f918349c196710b1b3be34eeb.jpg)
证明对于:
id="kw"
是唯一的
对于找 百度一下 按钮,和之前类似,去 右键检查
![](https://www.crifan.com/files/pic/uploads/2021/04/969db55f4f934d058ca840f8ccb69a7f.jpg)
看到html是:
<input type="submit" id="su" value="百度一下" class="bg s_btn">
且搜了下,确保只有一个:
"su"
![](https://www.crifan.com/files/pic/uploads/2021/04/821e6638530a47e0b65fed9f71803f39.jpg)
找百度搜索后,确保会出现的内容:
找到这个:
百度为您找到相关结果约xxx个
![](https://www.crifan.com/files/pic/uploads/2021/04/b742d9c794d74a5f8f152e9c53740a83.jpg)
因为,故意找不到,也会出现这个:
![](https://www.crifan.com/files/pic/uploads/2021/04/3e8729b93b1f4a5a86ffe0201f9be879.jpg)
去看看其html:
<span class="nums_text">百度为您找到相关结果约2,370,000个</span>
![](https://www.crifan.com/files/pic/uploads/2021/04/0f2ff822d8b44d649f31e5f3b7482563.jpg)
去搞清楚,本身此处的每条搜索结果的内容的html是什么
右键 检查:
![](https://www.crifan.com/files/pic/uploads/2021/04/41953b063e6943249c237d773f579fd9.jpg)
找到是:
<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>
![](https://www.crifan.com/files/pic/uploads/2021/04/9ea1ef31456e494ebdf2cbc7e52bdc03.jpg)
多看看几个结果,是否都是同样格式:
![](https://www.crifan.com/files/pic/uploads/2021/04/39bd37663a024e2e91dd0f6be3a94770.jpg)
这个稍微复杂点:
<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>
![](https://www.crifan.com/files/pic/uploads/2021/04/5df45df9062144ad89595a139a1168fa.jpg)