使用 Puppeteer 单击第一个 Google 搜索结果中的元素 [英] Click an element on first Google search result using Puppeteer

问题描述

你好，我是木偶操作新手，现在有一个星期了我只想在 Google 上搜索Intel"这个词后点击搜索结果:

Hello I'm just new to puppeteer and having a problem here by a week now and I just want to click on search result after searching the word 'Intel' on 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';

推荐答案

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

This approach is on the right track but seems rather brittle. Prefer CSS selectors that are as generic as possible to help tolerate updates to the DOM structure.

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

In your code, navigationPromise is undefined; prefer page.waitForNavigation here to respond to the navigation triggered by the Enter key press.

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

await page.waitForSelector('a'); seems too weak to achieve much since most pages already have anchors all over them, so the predicate will be trivially true.

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

Your approach to clicking can be simply page.click(selector) as shown below:

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())
;

另见:

• 使用 Puppeteer 抓取 Google 搜索结果链接
• 使用 NodeJS 点击随机 Google 搜索结果，然后傀儡师?

这篇关于使用 Puppeteer 单击第一个 Google 搜索结果中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！