时间戳

首页 > 解决方案 > 使用 Puppeteer 在第一个 Google 搜索结果上单击一个元素

javascript - 使用 Puppeteer 在第一个 Google 搜索结果上单击一个元素

问题描述

您好，我是 puppeteer 的新手，一周前就遇到了问题，我只想在 Google 上搜索“英特尔”一词后点击搜索结果：

在此处输入图像描述

我的源代码：

const puppeteer = require('puppeteer');

async function search()  {
    const browser = await puppeteer.launch({executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome',
    headless: false});
    const page = await browser.newPage();
    await page.setViewport({ width: 1600, height: 1040 })
    await page.goto('https://google.com');
            await page.type('input.gLFyf.gsfi', 'Intel');
            page.keyboard.press('Enter');
            await page.waitForSelector('a');
   
            await navigationPromise
            var selectorString = '.yuRUbf > a > .LC20lb';
            var selector = await page.$(selectorString);
            if (selector!=null) {
                var element = selector.asElement();
                await element.click();
            }

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

我认为问题就在这里

var selectorString = '.yuRUbf > a > .LC20lb';

标签： javascripthtmlpuppeteer

解决方案

这种方法在正确的轨道上，但似乎相当脆弱。更喜欢尽可能通用的 CSS 选择器，以帮助容忍对 DOM 结构的更新。

在您的代码中，navigationPromise未定义；更喜欢page.waitForNavigation在这里响应由 Enter 键按下触发的导航。

await page.waitForSelector('a');似乎太弱而无法实现太多，因为大多数页面已经有锚点，所以谓词将是微不足道的。

您的点击方法可以简单page.click(selector)如下所示：

const puppeteer = require("puppeteer");

let browser;
(async () => {
  const searchQuery = "intel";

  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.goto("https://www.google.com/");
  await page.waitForSelector('input[aria-label="Search"]', {visible: true});
  await page.type('input[aria-label="Search"]', searchQuery);
  await Promise.all([
    page.waitForNavigation(),
    page.keyboard.press("Enter"),
  ]);
  await page.waitForSelector(".LC20lb", {visible: true});
  await Promise.all([
    page.waitForNavigation({waitUntil: "domcontentloaded"}),
    page.click(".LC20lb"),
  ]);
  console.log(await page.title()); // => Intel | Data Center Solutions, IoT, and PC Innovation
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;

也可以看看：

推荐阅读