单击下拉菜单

Question

您好， 我目前正在开发基于 Nodejs 的 Javascript，我使用 Puppeteer 作为抓取网络的帮助。正如您在标题中看到的那样，我正在尝试单击下拉菜单项，如果您输入不同的内容，下拉菜单会发生变化。首先是我的代码：

// Navigate to the Homepage
    await page.goto('https://www.futbin.com/');

await page.click('#player_search');
await page.keyboard.type(playerName);
await page.keyboard.press('ArrowDown');
await page.keyboard.press('ArrowDown');

// Create a screenshot
await page.screenshot({
    path: 'screenshot.png'
});

所以基本上我做截图只是为了证明无头浏览器做正确的事。

该网站是futbin，如果您想了解他们的网站如何运作并查看检查，我认为这会有所帮助。

但我真正的问题是，通常当你按下回车键时，你会直接进入播放器页面（我想去的地方）。但是在我的脚本之后总是出现错误“没有目标”。所以keyboard.press('Enter') 不起作用。 SO的其他建议也对我不起作用，因为下拉菜单不是原生的，也没有计算索引。

我真的很感激一些建议！

最后，我也想留下下拉列表第一行的 html 代码，但我从来没有工作过，所以如果你能看看这个网站，我将不胜感激！

Answer 1

您非常接近，您不需要使用箭头，因为您可以找到该项目以单击另一种方式。秘诀是在下拉列表调用 api 端点时添加waitForSelector。在我们截取屏幕截图之前，还要注意要渲染的最后一页上的waitForSelector。

因此只需这样做：-

const puppeteer = require('puppeteer'); 

async function run() {

  const browser = await puppeteer.launch( {
      headless: false
  }); 

  const page = await browser.newPage(); 
  await page.goto('https://www.futbin.com/');

  await page.type('#player_search', "Dave");
  await page.waitForSelector("ul li a[data-id]");

  await page.click("ul li a[data-id]");

  await page.waitForSelector('#cal');

  await page.screenshot( { path: "./dave.png"});

  await browser.close();
}; 

run(); 

编辑补充 要选择任何索引，请使用：-

let index = 3;
let selector = "ul li:nth-child(" + index +") a[data-id]"
await page.click(selector);

这将转到下拉列表中的第三项。高温