您好, 我目前正在研究基于 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'
});
所以基本上我做截图只是为了证明 headless 浏览器做了正确的事情。
网址是futbin ,如果你想看看他们的网站是如何工作的,看看 inspect,我认为这会有所帮助。
但我真正的问题是,通常当您按回车键时,您会直接转到播放器页面(我想到达的地方)。但是在我的脚本之后总是出现错误“没有目标”。所以 keyboard.press('Enter')
不起作用。 SO 的其他建议也对我不起作用,因为下拉菜单不是本地的,也没有计算索引。
我真的很感激一些建议!
最后,我也想保留下拉列表第一行的 html 代码,但我从未工作过,所以如果您能看一下网站,我将不胜感激!
最佳答案
您已经非常接近了,您不需要使用箭头,因为您可以找到要单击的其他方式的项目。秘诀是在下拉菜单调用 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);
这将转到下拉列表中的第三项。
关于javascript - 单击下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48490624/