如何 select 没有 `name` 的搜索栏？

Question

我想使用 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

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

Answer 1

我不太了解 Puppeteer（或语法），但我想像这样； div[role="search"].textarea 或 div[role="search"] > textarea

Answer 2

如果您想坚持使用第二种方法，您需要使用正确的 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});

如何 select 没有 `name` 的搜索栏？

How to select a search bar without a `name`?

html

javascript

css

node.js

puppeteer