Automate table row selection using Puppeteer - choose the "P" option in the dropdown menu for each row's parameters

I am attempting to utilize Puppeteer for iterating through a table element's rows. Each row in the table contains a dropdown menu within the last column. My goal is to select option "P" for Parameters, retrieve all href links, build an array of those links, and then proceed to visit each link individually to take screenshots.

Below is the structure of my table element...

I would appreciate assistance on the steps involved in looping through the table, clicking on the dropdown to choose an option, collecting the links into an array, visiting each link, and capturing snapshots.

Thank you for your guidance

<table border="0" cellpadding="5" cellspacing="0" width="96%" style="border: 2px solid black; margin-bottom: 10px;">



<tbody><tr class="header1">
  <th colspan="8">Workshops</th>
</tr>
<!-- More table content here -->
</tbody></table>

Answer №1

Here is the solution I came up with for those who may encounter a similar issue.

This code snippet targets select tags with names starting with "x".

It then retrieves the value of option 1 from each element, meeting my requirements perfectly.

       var selectedTag;
       const relevantOptions = [];
       for(var i=0; i<selectList.length; i++){
       selectedTag = selectList[i];
       if(selectedTag.name.startsWith('x')){
       relevantOptions.push(selectedTag.options[1].value);
     };
     };

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

What are the steps to fix the CORS problem when sending AJAX requests from a frontend to a Flask server?

My current project involves creating a web application with Flask for the backend and JavaScript for the frontend. However, I'm encountering challenges with CORS policy when attempting to send AJAX requests from my frontend to the Flask server. Below ...

What factors cause variations in script behavior related to the DOM across different browsers?

When looking at the code below, it's evident that its behavior can vary depending on the browser being used. It appears that there are instances where the DOM is not fully loaded despite using $(document).ready or similar checks. In Firefox, the "els ...

Having trouble connecting to a website using JavaScript code

Recently, I've been working on a Javascript code that pings Google every 10 seconds and displays the connection status in an HTML MonitorInformation element. However, whenever I try to debug the HTML file, the information displayed is always stuck at ...

Ensure that the data prop in Vue is always updated whenever there is a change in

In my Vue.js project, I am creating a data property called w to store the clientWidth of a specific element in my HTML. In the mounted hook, I am initializing it like this: data() { return { w: 0, }; }, mounted() { this.w = this.$refs.timelineProgres ...

What is the best method for having tooltips hover over textboxes?

Hello there, Experts, I am still encountering some difficulties with the tooltips feature. The code snippet below functions properly in displaying the tooltips. However, a major issue arises where it causes the textbox to expand, resulting in misalignmen ...

Explore the input field to find relevant information, triggering an Ajax PHP call that displays search results in a convenient dropdown

Include an input box that displays a dropdown list of customer names when text is typed by the user <script> function displayCustomerList() { $.ajax({ url: "customerlist.php", success: function(result) { ...

Incorporating jquery.prettyPhoto results in the script being displayed on the webpage

When I relocate the following script: <script src="js/jquery.prettyPhoto.js"></script> To this location: <script type="text/javascript"> ... </script> The script starts displaying on the page starting from the bold section on ...

What are the limitations when using React's forwardRef with Material UI's styled components?

While working with forwardRef and styled, I encountered a strange issue : "React Hook ... cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function." Here is an example: import { styled } ...

Leverage the power of EJS and Node JS by incorporating node modules into

I am having trouble importing my datetimepicker JavaScript and style sheet into my EJS file. Unfortunately, the CSS and JS files are not rendering properly when I run the code. Below is how my code is structured: In the EJS file: <html> <meta n ...

Unusual occurrence in Chrome when checking definitions: ReferenceError: x is not defined

Recently, I've come across some odd behavior in Chrome following its latest update. Whenever I try to determine if a variable is defined, it ends up triggering an uncaught error like the one shown below: if(x) { alert('x is defined.'); } T ...

Eliminate arrays that do not contain any elements from a multi-level array

In my FormValidator class, I have an array that ends up containing empty arrays at some point. I want to remove these empty arrays to make my validation more efficient. Is there a function that can remove empty arrays from multidimensional arrays? I am aw ...

Having trouble executing JavaScript upon form submission

Attempting to implement form validation on an email reset page. Here is the code I have written: <!DOCTYPE html> <html> <head> <title> form validation </title> <script> function validateForm ...

How to pass a char array from a C++ function to TCL

I've come across a similar issue before, but haven't been able to achieve the desired outcome. My goal is to invoke a C++ function that will pass an array to tcl. Here's my current approach: Tcl_Obj * result = Tcl_NewObj(); unsigned ...

Tips for discreetly recording information without disrupting normal workflow until necessary

Every 100-200 uses, I encounter a strange bug that I just can't seem to reproduce consistently. It's not a top priority to fix, but I would like to address it. To investigate further, I would need to scatter about 30 console.log statements throu ...

Resolve the flexible width problem when inserting text in pptxgenjs

I am attempting to replicate a layout similar to this https://i.sstatic.net/HDUhV.png However, the text width is taking up more space than anticipated. https://i.sstatic.net/CnKIB.png The current text behavior resembles that of a div, but I would like ...

Utilizing Puppeteer to Navigate and Interact with Elements Sharing Identical Class Names

I am new to Puppeteer and NodeJs, and I am attempting to scrape a specific website with multiple posts that contain a List element. Clicking on the List element loads the comment section. My question is: I want to click on all the list elements (since th ...

Make sure to modify the URL and store the response from Axios

My current code allows users to input a device name, then when I click on "View", an axios request is sent to a service and a response is received. Using this response, I display a design relating to the device name entered, and this functionality works sm ...

What steps should I take to execute a unique function the very first time a user scrolls to a specific element?

The issue at hand: I am working with a sophisticated looping image carousel that needs to initiate - starting from a specified initial slide - as soon as the user scrolls to a specific division. It must not restart if the user scrolls up or down and then ...

Tips and tricks for manipulating base64 images in Node.js

I have a unique challenge - I want to manipulate a base64 picture by adding just one extra pixel. My goal is to send a base64 image string (e.g. data:image/png;base64,iVBORw0KG...) from my express server. Let's say the image is 100x100px and I need to ...

Changing Objects in an Array by Leveraging the Reduce Method with the Spread Operator in JavaScript

Currently delving into the world of JavaScript and decided to put the Spread Operator and reduce() method to the test. Here's an example: const numArray = [1, 6, 9, 4, 21, 8, 15]; const sumEvenOdd = numArray.reduce((acc, current) => current % ...