木偶操纵者页面。使用多个类选择似乎不起作用。

问题描述

我是木偶新手，我有这个htmlhttps://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");

推荐答案

从选择器中删除多余的空格：

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);

这篇关于木偶操纵者页面。使用多个类选择似乎不起作用。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！