Puppeteer 无法选择属性 tabindex

【问题标题】：Puppeteer cannot select attribute tabindexPuppeteer 无法选择属性 tabindex
【发布时间】：2022-01-29 04:16:47
【问题描述】：

puppeteer page.select with multiple class doesn't seem to work 之后我现在想通过 tabindex 选择第二个下拉列表，但它不起作用

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

      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", "test input");
      let selected = await frame.select(".test-element.Dropdown [tabindex='2']", "test4");
      console.log('selected', selected);

【问题讨论】：

标签： css-selectors puppeteer

【解决方案1】：

确保class selectors 和attribute selectors 之间不要有空格：

".test-element.Dropdown [tabindex='2']"❌
".test-element.Dropdown[tabindex='2']"✔️

像这样：

let selected = await frame.select(".test-element.Dropdown[tabindex='2']", 'test4')

结果：

selected [ 'test4' ]

注意：您可以在 Chrome DevTools 控制台中自己测试 CSS 选择器，方法是在 $() 中输入选择器。例如。如果您在 iframe(!) 中单击并输入 $(".test-element.Dropdown [tabindex='2']")，它将返回 null，而 $(".test-element.Dropdown[tabindex='2']") 返回 select.test-element.Dropdown。

【讨论】：