无法找到并单击条件条款按钮

Question

我是 pupeeteer 的新手，首先我要做的是加载一个页面并单击一个按钮。但是，它无法定位元素。我认为这是因为我需要找到父元素或父元素的父元素。

<button role="button" data-testid="uc-accept-all-button" class="sc-gsDKAQ fHGlTM" style="border: 2px solid rgb(247, 196, 0); padding: 0.375rem 1.125rem; margin: 0px 6px;">Accept All</button>

这是从检查中获取的完整 css 选择器

#focus-lock-id > div.sc-furwcr.lhriHG > div > 
div.sc-bYoBSM.egarKh > div > div > div.sc-dlVxhl.bEDIID > 
div > button:nth-child(3)

这是我的代码：

const puppeteer = require("puppeteer");

async function launch() {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: false,
  });
  const page = await browser.newPage();

  await page
    .goto("", {
      waitUntil: "networkidle0",
    })
    .catch((err) => console.log("error loading url", err));
  page.click('button[data-testid="uc-deny-all-button"]');
}
launch();

这是一个简单的接受和条件块，我想单击“全部接受”按钮将其关闭并继续进行。我需要先等待父元素然后进一步挖掘什么通常的操作？或者有什么简单的方法？

这是我试图关闭条款和条件的网站：https://www.partslink24.com/

Answer 1

几个问题：

1. 选择器在页面加载后动态显示，因此您应该waitForSelector 而不是假设networkidle0 足以捕捉按钮。
2. 您想要的选择器在影子根中，所以select the root and dip into it with .shadowRoot。
3. 您的.click() 呼叫必须是awaited。

   const puppeteer = require("puppeteer"); // ^18.0.4
   
   let browser;
   (async () => {
     browser = await puppeteer.launch({headless: true});
     const [page] = await browser.pages();
     const url = "https://www.partslink24.com/";
     await page.goto(url, {waitUntil: "domcontentloaded"});
     const rootSel = "#usercentrics-root";
     const btnSel = 'button[data-testid="uc-deny-all-button"]';
     const rootContainer = await page.waitForSelector(rootSel);
     const root = await rootContainer.evaluateHandle(el => el.shadowRoot);
     const btn = await root.waitForSelector(btnSel);
     await btn.click();
     await page.waitForFunction(`
       !document.querySelector("${rootSel}").querySelector('${btnSel}')
     `);
     await page.screenshot({path: "test.png", fullpage: true});
   })()
     .catch(err => console.error(err))
     .finally(() => browser?.close())
   ;