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

此处先去确认页面title标题:

即:百度一下,你就知道
此处通过Chrome的 开发者工具 去 右键找到输入框对应的元素:
可以右键 输入框 检查

打开 Chrome的 开发者工具

可以看到对应的html

另外 Playwright调用的Chromium中效果是:

拷贝出来是:
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:


证明对于:
1 | id = "kw" |
是唯一的
对于找 百度一下 按钮,和之前类似,去 右键检查

看到html是:
1 | <input type = "submit" id = "su" value= "百度一下" class= "bg s_btn" > |
且搜了下,确保只有一个:
1 | "su" |

找百度搜索后,确保会出现的内容:
找到这个:
1 | 百度为您找到相关结果约xxx个 |

因为,故意找不到,也会出现这个:

去看看其html:
1 | <span class= "nums_text" >百度为您找到相关结果约2,370,000个< /span > |

去搞清楚,本身此处的每条搜索结果的内容的html是什么
右键 检查:

找到是:
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> |

多看看几个结果,是否都是同样格式:

这个稍微复杂点:
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> |
