Having trouble choosing an option from the dropdown menu with Puppeteer Js

I need help with Puppeteer JS to select the initial element in a dropdown. Any suggestions?

Once I input the city name in the text field, I want to choose the first option from the dropdown menu.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  const page1=await page.goto('https://www.srinu.com');
  await page.screenshot({path: 'example.png'});
  const date = '#SearchBoxContainer > div > div > div.IconBox.IconBox--autocomplete > div > div > input';
  await page.click(date);
  await page.type(date, 'China');
  await page.select('#data-text', 'Chinatown')
  // const option = (await page.$x(
   // '//*[@id="SearchBoxContainer"]/div/div/div[5]/div/div/ul/li[1]'
  // ))[0].click();

Both the click and select methods have been attempted but didn't work as expected.

javascriptseleniumpuppeteer

Answer №1

It appears that there are a couple of key components missing from your code:

  1. The correct selector for clicking on after entering 'China'
  2. Ensuring that the dropdown list DOM elements fully load after inputting 'China' to enable successful clicking.
(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://www.agoda.com');
  await page.screenshot({path: 'example.png'});
  const date = '#SearchBoxContainer > div > div > div.IconBox.IconBox--autocomplete > div > div > input';
  await page.click(date);
  await page.type(date, 'China');
  // Solution:
  const firstElement = 'ul.AutocompleteList > li.Suggestion.Suggestion__categoryName:nth-child(1) > ul.Suggestion__categoryName_container > li.Suggestion__categoryName_item:nth-child(1)';
  await page.waitForSelector(firstElement);
  await page.click(firstElement);
})();

Answer №2

After trying several solutions, I finally found something that worked for me:

Make use of the page.select function with a specific identifier like 'select[id="dropdownId" or #className]' and provide the desired value as an argument.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"findByIdAndUpdate continues to work successfully even when the request body includes parameters that are not defined in

Referenced from This particular tutorial on MERN stack development... In my mongoose schema, I have defined 4 fields: const mongoose = require('mongoose'); const Schema = mongoose.Schema; let Todo = new Schema({ name: { type: String ...

javascriptexpressmongoose

Failure to Fetch the Uploaded File's Value Using the Parameter

Objective: My aim is to automatically upload the second input named "file2" to the action result using jQuery code that is compatible with the latest versions of Firefox, Chrome, and Internet Explorer. Issue: The problem arises when HttpPostedFileBase ...

javascriptjqueryhtmlasp.net-mvc-4

Downloading EJS File instead of Displaying on Express.js Router

As I embark on the journey of developing a live video sharing/watching feature using Pure Node.js and without relying on any frameworks, an unexpected issue arose in the middle of the process. The problem occurred when Express started downloading an EJS fi ...

javascriptnode.jsexpresssocket.ioejs

What is the best way to send a Rails AJAX form upon clicking?

I'm looking to implement AJAX form submission in Rails using a button. Here's my current code: Controller: def list @events = ExternalEvent.all if !params[:city_id].nil? @events = @events.where(city_id: params[:city_id]) end respond ...

javascriptjqueryruby-on-railsajaxforms

Using Python with Selenium to automate printing in Chrome

Season's Greetings and Happy Holidays! I have developed a script that automates the process of opening a webpage in Chrome, logging in, navigating to a specific page, and then attempting to print it. However, I am encountering difficulties when tryin ...

pythonseleniumgoogle-chromeprintingautomation

Are there any downsides to utilizing the jQuery Load function?

I am in the process of creating a website that displays sensor data. I plan to incorporate a HighChart line chart to showcase this data. Since my website is relatively simple in terms of content, I have decided to consolidate all elements onto one page inc ...

javascriptjqueryload

Having trouble constructing a Jenkins script

I am currently facing an issue with my selenium/python framework that I am trying to integrate and utilize with Jenkins. During the script build process, I encountered the following error: Started by user Dusan Kovacevic Running as SYSTEM Building in work ...

pythonseleniumjenkinsseleniumbase

Encountering a TypeError in semantic-ui-react Menu: instance.render function not found

As a React novice, I have been working on a project that involves React for some time. However, I had not yet delved into dealing with packages and dependencies. It seems like my current issue is related to this. The problem emerged in a project where I w ...

javascriptreactjssemantic-ui-react

NodeJS error: Attempted to set headers after they have already been sent to the client

As a beginner, I have encountered an error message stating that the API is trying to set the response more than once. I am aware of the asynchronous nature of Node.js but I am struggling to debug this issue. Any assistance would be greatly appreciated. rou ...

javascriptsqlnode.jsexpress

Measuring response time in Python using Selenium

I am trying to measure the response time of my home page after logging in, but traditional methods like waiting for a specific element or using sleep functions are not working. Can anyone suggest an effective approach to determine the load time of a home p ...

python-3.xseleniumselenium-webdriver

jsonwebtoken does not fetch a token

I've been working on a user registration system using nodejs and sequelize. So far, I've successfully implemented the login and register functionalities. However, I am encountering an issue with getting the token after a successful login. Despit ...

javascriptjsonnode.jsexpressjson-web-token

NPM: Handling multiple prehooks with the same name

Is it possible to have multiple prehooks with the same name in my package.json file? For example, having two instances of pretest: "scripts": { "start": "react-scripts start", ... "pretest": "eslin ...

javascriptnpmnpm-scripts

Replacing the yellow autofill background

After much effort, I have finally discovered the ultimate method to remove autofill styling across all browsers: $('input').each(function() { var $this = $(this); $this.after($this.clone()).remove(); }); However, executing t ...

javascriptcssautofill

Flashing images with jQuery Flickrush - Encasing the image within <li> tags

I have a div with an unordered list inside: <div id="flickr"> <ul></ul> </div> Currently, I am utilizing a plugin found at this link. To make it functional, I've included the following Javascript code: $(function() { $( ...

javascriptjqueryflickr

Leverage Dropzone functionality in combination with node.js

Just starting out with node.js and experimenting with file uploads using drag and drop. Initially, I created a basic uploader without drag and drop functionality: var http = require('http'); var formidable = require('formidable'); ...

javascriptnode.jsdropzone.jsformidable

Automatically execute a function when the number input changes, but only if no further changes are detected after a certain period of time

I am implementing angularjs with an input field for numbers. I want to trigger an action automatically after a certain amount of time, but only if no further changes have been made to the number within that time frame (let's say 2 seconds). In my exa ...

javascriptangularjs

Issue with external JavaScript file being unresponsive on mobile browser

Hello everyone, hope you're having a great afternoon or evening I've encountered an issue with mobile browsers like Chrome Mobile and Kiwi where the external js file is not visible in the html file. The script.js file looks like this: alert(&ap ...

javascripthtmlmobileexternal

Validation of the email address continually fails

I tried using a validation method that I found in various StackOverflow answers, but for some reason, the email always comes up as invalid. Because of this, the second condition is never being executed. Can someone point out what I might be misunderstand ...

javascriptjqueryvalidation

What is the best way to navigate a webpage on Twitch using Selenium WebDriver in Python?

Looking to implement vertical scrolling with Selenium? Despite trying various solutions, I can't seem to get it working on this particular link: Any ideas on what might be causing the following code snippet: driver.execute_script("window.scrollTo(0, ...

pythonseleniumscreen-scrapingvertical-scrolling

Using AngularJS Typeahead with restrictions on $http requests

I have been attempting to restrict the number of results displayed by Angular Bootstrap Typeahead during Async calls, but unfortunately, it does not seem to be functioning as expected. <input type="text" ng-model="asyncSelected" placeholder="Locations ...

javascriptangularjstypeaheadangularjs-bootstrap