点击下拉菜单

时间:2018-01-28 19:47:21

标签: javascript jquery html node.js puppeteer

您好 我目前正在研究基于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代码,但我从来没有工作过,所以如果你想看看网站我会很感激!

1 个答案:

答案 0 :(得分:2)

你非常接近,你不需要使用箭头,因为你可以找到项目点击另一种方式。秘诀是在下拉列表调用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(); 

enter image description here

EDIT ADDTIONAL 要选择任何索引,请使用: -

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

这是下拉列表中的第三项。 HTH