Puppeteer 获得第一个可见按钮

Question

我在一个页面上有两个按钮，有时第一个可见，有时第二个，有时两个都可见。

我想要select最后一个可见的按钮，然后点击它。

<div class="button-area">
   <a class="button">first</a>
   <a class="button hide">second</a>
</div>

例如此处：“第二个”按钮。

我试过：

var btnSelector='.button-area .button:visible:last';
await page.waitForSelector(btnSelector, { timeout: 6000 });
var [btn] = await page.$(btnSelector);
await Promise.all([
  btn.click(),
  page.waitForNavigation({ waitUntil: 'domcontentloaded' })
]);

但是不行，看来我的selector没有正确处理:/

Answer 1

你可以试试这个。

(async () => {
  let browser, page;
  let url = 'https://example.com';

  try {
    browser = await puppeteer.launch({ headless: true });
    page = await browser.newPage();

    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
    await page.waitForSelector('.button-area .button', { visible: true, timeout: 60000 });

    const buttonElement = await page.$('.button-area .button');
    if (await buttonElement.isIntersectingViewport()) {
      buttonElement.click();
      page.waitForNavigation({ waitUntil: 'domcontentloaded' });
    }

  } catch (error) {
    console.log(error.message);
  } finally {
    if (browser) {
      await browser.close();
      console.log('closing browser');
    }
  }
})();

或者你也可以这样试试

(async () => {
  let browser, page;
  let url = 'https://example.com';

  try {
    browser = await puppeteer.launch({ headless: true });
    page = await browser.newPage();

    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
    const buttonElement = await page.waitForSelector('.button-area .button', { visible: true, timeout: 60000 });
    await buttonElement.click();
    await page.waitForNavigation();

  } catch (error) {
    console.log(error.message);
  } finally {
    if (browser) {
      await browser.close();
      console.log('closing browser');
    }
  }
})();

如果其中 none 个有效，您可以尝试。

(async () => {
  let browser, page;
  let url = 'https://example.com';

  try {
    browser = await puppeteer.launch({ headless: true });
    page = await browser.newPage();

    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
    await page.waitForSelector('.button-area .button', { visible: true, timeout: 60000 });
        
    await page.evaluate(() => {
      Array.from(document.querySelectorAll('.button-area .button')).filter((buttons) => {
        return buttons.className != 'button hide'
      }).forEach(button => {
        if (button) button.click();
      });
    });

    await page.waitForNavigation();
  } catch (error) {
    console.log(error.message);
  } finally {
    if (browser) {
      await browser.close();
      console.log('closing browser');
    }
  }
})();

Puppeteer 获得第一个可见按钮

Puppeter get first visible button

javascript

jquery

css-selectors

node.js

puppeteer