具有多个 class 的人偶操纵者 page.select 似乎不起作用

Question

我是木偶操纵新手，我有这个 html https://jsitor.com/c0rM-YohL

<input type="input" class="test-element Input">
<select class="test-element Dropdown">
  <option>test1</option>
  <option>test2</option>
</select>

我试过这个 chrome 扩展 https://chrome.google.com/webstore/detail/puppeteer-ide/ilehdekjacappgghkgmmlbhgbnlkgoid?hl=en-US

await page.type(".test-element .Input", "new-test-app");
await page.select(".test-element .Dropdown", "option1");

但不适用于

await page.goto('https://jsitor.com/c0rM-YohL', {
   waitUntil: 'networkidle0',
});

await page.type(".test-element.Input", "new-test-app");
await page.select(".test-element.Dropdown", "option1");

Answer 1

option1 是 <select> 对象中的一个元素。您需要输入文本，单击下拉菜单，然后才单击相关选项。

Answer 2

从选择器中删除多余的 space：

await page.type(".test-element.Input", "new-test-app");
await page.select(".test-element.Dropdown", "option1");

编辑：

它在 iframe 中，因此您需要先获取 iframe：

const iframeSelector = '.iframe-container iframe';

await page.waitForSelector(iframeSelector, {
    visible: true
});

const frameHandle = await page.$(iframeSelector);
const frame = await frameHandle.contentFrame();

await frame.type(".test-element.Input", "new-test-app");
let selected = await frame.select(".test-element.Dropdown", "test2");
console.log('selected', selected);

具有多个 class 的人偶操纵者 page.select 似乎不起作用

puppeteer page.select with multiple class doesn't seem to work

puppeteer