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

Issue encountered while incorporating a PHP file into Javascript code

I'm facing a particular issue where I have a PHP file that is supposed to provide me with a JSON object for display in my HTML file. Everything seems to be working fine as I am receiving an output that resembles a JSON object. Here's the PHP file ...

javascriptphpjqueryhtmlajax

Sending properties within components using #createElement in React-Router is a convenient way to pass data locally

Have you ever wondered where the parameters Component and props are coming from in the React-Router documentation? // Here is the default behavior function createElement(Component, props) { // ensure all props are passed in! return <Component {... ...

javascriptreactjsreact-router

Angular 1.5 - Component for fetching HTML content with dynamic data

Help needed with using Angular Component method. Developing a main html file with its main controller containing a JSON list of client data: clients: [{ "name": "John Jackson", "age": "21", "hair": "brown", }, { "name": "Janet Doe", ...

javascripthtmlangularjsangularjs-components

Implementing multiple perspectives on a single webpage by keeping track of the browsing history with AngularJS and leveraging the

Within my AngularJS application, I have an about page that contains various sub-sections, all within the same template. My goal is to have each section accessible through its own unique URL that will automatically scroll down to the corresponding section i ...

javascriptangularjsangular-ui-router

AngularJS selection controls: checkbox and dropdown menus

Can someone provide an example that includes a dropdown menu and checkboxes? The options in the checkbox list should match the data in the dropdown. Once a value is selected from the dropdown, the corresponding checkbox option should be automatically chec ...

javascriptangularjsasp.net-mvc

Render and download the file concurrently while displaying the view in Express

I'm looking to accomplish a task in Express where I can render a file and download it simultaneously. My current code looks like this: res.attachment('filename.csv'); res.render('pages/result', { data }); However, with this setu ...

javascriptnode.jsexpressejs

Has anybody managed to successfully implement this require or debug NPM module for use in a web browser?

Has anyone successfully implemented the require or debug NPM modules in a browser environment? Despite claims and instructions on the debug NPM module's page that it can be used in the browser, attempting to do so results in the following error: Unc ...

javascriptnode.jsdebuggingnpmconsole.log

What is the method for determining someone's age?

I am trying to extract the date from a field called "DatePicker" and then enter that date into the field labeled "NumericTextBox" Thank you <div> <sq8:DatePicker runat="server" ID="dateDatePicker"> <ClientEvents OnDateSelected="get_curr ...

javascriptc#.net

Exploring the Potential of CSS Styling within Vue.js

I am in the process of creating a website and I am looking for a way to manage my styles through Vue. I want to be able to utilize CSS with Vue, as the style of .skill-bar serves as the background of the bar, while .skill-bar-fill represents the green fil ...

javascriptcssvue.jsvuejs2vue-component

Having trouble loading libtesseract3051.dll on a 64-bit Windows system due to a dependency issue

Can someone assist with the issue I'm encountering? Encountering Exception in thread "main" java.lang.UnsatisfiedLinkError: Unable to load library 'libtesseract3051': Native library (win32-x86-64/[[libtesseract3051.dll] Please provide a so ...

javaseleniumjartesseract

Why is the 'name' property used in the export default{} syntax?

Vuejs is my current learning focus, and one thing that puzzles me is the necessity of this particular name. <template> </template> <script> export default { name: 'NotFound' } </script> <style> </style&g ...

javascriptnode.jsecmascript-6vue.js

What is an alternative way to utilize Page Class methods in testng classes without relying on initElements() or the new Operator?

I am seeking a way to instantiate my page classes in order to access methods from testng classes without the need for PageFactory.initElements() or the new Operator. I want my test code to have a clean and organized appearance. Currently, I find myself us ...

seleniumselenium-webdrivertestngpageobjects

Tips for converting a parent class Sprite into a subclass MySprite in Cocos2d-JS

There is a custom class called MySprite that extends Sprite and includes additional methods. var MySprite = cc.Sprite.extend({ ctor:function(){ this._super(); }, doSomethingStrange:function(){ //meow meow } } ); In the game s ...

javascriptcocos2d-js

Guide to making a button in jQuery that triggers a function with arguments

I've been working on creating a button in jQuery with an onClick event that calls a function and passes some parameters. Here's what I have tried so far: let userArray = []; userArray['recipient_name'] = recipient_name.value; userArray[ ...

javascripthtmljquerydatatables

Having trouble removing a DOM element with jQuery?

Hey there, I need your help with a jQuery issue I'm facing. I am currently working on cloning a div element that contains a span with a click event attached to it. The purpose of the click event is to remove the newly cloned section from the DOM. Whil ...

javascriptjqueryhtml

Enhancing the validation of multiple selects using jQuery

Here is what I have accomplished so far: JSFIDDLE My current goal is to: add the class "invalid" to the <select> if it was not selected in its respective row remove the "invalid" class if all 3 selects in the row are selected automatically submit ...

javascriptjquery

Submitting data using AJAX yields results, but the contact form remains untouched

I have created an online quiz using jQuery. My goal is to send the results, along with the user's contact information, to the moderator once they submit it. I have managed to send the result information successfully. However, I am facing an issue whe ...

javascriptphpjqueryajaxcontacts

AngularJS making a HttpPost request resulting in a 500-Internal Server Error

I'm currently working on an application where I need to include a user in the database which requires a POST operation. However, every time I try to run the application, I encounter a 500-Internal Server Error for the POST API call. Here is a snippe ...

javascripthtmlangularjsasp.net-mvcasp.net-web-api

Updating class with jQuery based on dynamically changing content

I am using countdown.js to create a custom countdown timer. My goal is to replicate the countdown timer seen on the homepage, but with the ability to change the target date (which I have already accomplished). Here is an example of what I currently have f ...

javascriptjqueryhtmldomjquery-countdown

Accessing a single element from a nested object in Handlebars.js

Recently, I have been working on a nodejs application that utilizes handlebars js as its view engine. My main challenge at the moment is accessing one specific element from a nested object that I am passing to the hbs view. router.get('/view_users/:i ...

javascriptnode.jsexpresshandlebars.js