折腾:
【已解决】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)
拷贝出来是:
1 | <input id = "kw" name= "wd" class= "s_ipt" value= "" maxlength= "255" autocomplete= "off" > |
注意到:
Chromium中 调试工具已实时显示出 定位元素的Selector的,可以写成:
1 | 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)
证明对于:
1 | id = "kw" |
是唯一的
对于找 百度一下 按钮,和之前类似,去 右键检查
![](https://www.crifan.com/files/pic/uploads/2021/04/969db55f4f934d058ca840f8ccb69a7f.jpg)
看到html是:
1 | <input type = "submit" id = "su" value= "百度一下" class= "bg s_btn" > |
且搜了下,确保只有一个:
1 | "su" |
![](https://www.crifan.com/files/pic/uploads/2021/04/821e6638530a47e0b65fed9f71803f39.jpg)
找百度搜索后,确保会出现的内容:
找到这个:
1 | 百度为您找到相关结果约xxx个 |
![](https://www.crifan.com/files/pic/uploads/2021/04/b742d9c794d74a5f8f152e9c53740a83.jpg)
因为,故意找不到,也会出现这个:
![](https://www.crifan.com/files/pic/uploads/2021/04/3e8729b93b1f4a5a86ffe0201f9be879.jpg)
去看看其html:
1 | <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)
找到是:
1 2 3 4 5 6 7 8 | <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> |
上层父节点的元素是:
1 2 3 4 5 6 7 8 | <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)
这个稍微复杂点:
1 2 3 4 5 6 7 8 | <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> |
以及另外一个:
1 2 3 4 5 6 7 8 | <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)