CODEWITHSUNDEEP
javascriptjqueryhtmlnode.jspuppeteer
stoesselleon
stoesselleon

Reputation: 59

Click on an dropdown menu

Hello, I´m currently working on an Javascript based on Nodejs where I use Puppeteer as an help to scrape the web. As you can read in the title I´m trying to click on a dropdown menu Item, where the dropdown changes if you type in something diffrent. First here is my code:

// 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'
});

So Basically i do the screenshot just for proving that the headless-browser does the right thing.

The website is futbin, if you want to see how their website works and take a look at the inspect, i think that could help.

But my real problem is that normally when you press enter you directly go to the player page (where i want to get). but after my script there comes always the error "no target". So the keyboard.press('Enter') don´t works. Also other Suggestions from SO didn´t work for me as the dropdown isn´t native and don´t hast counting indexes.

I would really appreciate some Suggestions !

at the end i wanted leave the html code from the first row of the dropdown as well, but i never worked so i would appreciate if you´d take a look at the website please !

Upvotes: 1

Views: 1903

Answers (1)

Rippo
Rippo

Reputation: 22424

You were very close, you dont need to use the arrows as you can find the item to click another way. The secret is to add a waitForSelector as the dropdown makes a call to a api endpoint. Also notice the waitForSelector on the final page to render before we take the screenshot.

Therefore just do this:-

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 To select any index use:-

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

This goes to the third item in the dropdown. HTH

Upvotes: 2

Related Questions