Shadow DOM 自动化

Question

我正在尝试使用 puppeteer 进行自动化。如何从 Shadow dom 中选择选项？屏幕截图显示了 Shadow dom，里面有一个选择选项。我正在尝试使用 puppeteer 选择选项。

const puppeteer = require("puppeteer");


(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
    args: ["--start-maximized"],
  });

  const page = await browser.newPage();
  //page.setDefaultTimeout(0);
  await page.goto("https://mixam.co.uk/");
  await page.waitForNetworkIdle();


  let shadow = await page.evaluateHandle(() => {
    let elem = document.querySelector(
      "body > div.bg-pastel-lavender > div:nth-child(1) > div > div.h-min-650.h-100 > div > price-calculator"
    ).shadowRoot;
    return elem;
  });

  console.log(shadow);

  await shadow.select("#Size", "4-NONE");

  await browser.close();
})();

Answer 1

通过 puppeteer 与 Shadow dom 进行交互。除了选择器之外，保持一切与普通 dom 相同。要处理 Shadow dom 中的元素，请在选择器之前添加

">>>"

。 例如

await page.click("selector")//for regular dom
await page.click(">>>selector")//for shadow dom