如何选择没有“名称”的搜索栏？答案

【问题标题】：How to select a search bar without a `name`?如何选择没有“名称”的搜索栏？
【发布时间】：2022-01-09 21:35:26
【问题描述】：

我想使用 Puppeteer 在下面的搜索栏中进行搜索。但是我看不到任何我可以用来识别搜索栏的东西。

如果我这样做：

await page.type('[id="i0e792821-542f-11ec-9366-f3e8261f9ecb"]', 'test="1 2" and test2="3 4"');
await page.type('["data-test-subj"="queryInput"]', 'test="1 2" and test2="3 4"');
await page.type('[class=".euiTextArea.euiTextArea--resizeVertical.euiTextArea--fullWidth.kbnQueryBar__textarea.kbnQueryBar__textarea--hasPrepend.kbnQueryBar__textarea--hasAppend"]', 'test="1 2" and test2="3 4"');
await page.type("*[role='search']", 'test="1 2" and test2="3 4"');

那么前 3 个给：

Error: No node found for selector:

最后一个没有任何错误。

如果我这样做：

await page.waitForSelector('i0e792821-542f-11ec-9366-f3e8261f9ecb');
await page.focus('i0e792821-542f-11ec-9366-f3e8261f9ecb');
await page.focus('i0e792821-542f-11ec-9366-f3e8261f9ecb', '1234', {delay: 1500});

我明白了：

TimeoutError: waiting for selector `i0e792821-542f-11ec-9366-f3e8261f9ecb` failed: timeout 30000ms exceeded

我可以用什么来填写搜索栏中的文字？

【问题讨论】：

如果元素每次都具有相同的嵌套布局，也许您可以尝试遍历元素？ div > div[class=foo] > div > textarea
元素上有一个特定的data-test- 属性，您不使用它有什么原因吗？您还可以通过占位符或标签属性来选择它，这更能反映最终用户如何找到它。
您的前三个尝试都不能引发错误Error: No node found for selector: *[id='#i0e792821-542f-11ec-9366-f3e8261f9ecb']。您能否确保此错误文本与实际抛出的内容准确无误...？
page.waitForSelector('i0e792821-542f-11ec-9366-f3e8261f9ecb'); 你的意思是在前面加上一个# 标记来表明你正在等待这个值的ID吗？

标签： javascript html css node.js puppeteer

【解决方案1】：

如果您想坚持第二种方法，则需要使用正确的 CSS 选择器，方法是在前面加上 # 以指示值 i0e792821-542f-11ec-9366-f3e8261f9ecb 是 id 值，和将最后一行切换为调用page.type() 而不是page.focus()（它不接受多个参数，也不实现任何类型的打字功能）：

await page.waitForSelector('#i0e792821-542f-11ec-9366-f3e8261f9ecb');
await page.focus('#i0e792821-542f-11ec-9366-f3e8261f9ecb');
await page.type('#i0e792821-542f-11ec-9366-f3e8261f9ecb', '1234', {delay: 1500});

但是，对于不是超级可读的选择器，您通常应该假设它们是在构建或运行时的某个地方动态生成的，并且会随着时间的推移而变化 - 每次它发生变化时，您的脚本都会中断，您将拥有重新编写代码以更新选择器。相反，请使用更易于阅读的选择器，因此更有可能保持不变：

await page.waitForSelector('[data-test-subj="queryInput"]');
await page.focus('[data-test-subj="queryInput"]');
await page.type('[data-test-subj="queryInput"]', '1234', {delay: 1500});

【讨论】：

第一个没用，但你的第二个没用 =) 谢谢 =)
你不会不知道它是怎么按Enter的吧？没有提交按钮...
@SandraSchlichting 一个简单的谷歌查询可以让你找到你需要的资源（实际上就是在这个网站上！）：stackoverflow.com/questions/46442253/…
上升。对不起。再次非常感谢！我在这上面花了 3-4 个小时...

【解决方案2】：

我并不真正了解 Puppeteer（或语法），但我会想象类似的东西； div[role="search"].textarea 或 div[role="search"] > textarea

【讨论】：