A guide on retrieving the values of all child elements within an HTML element using Puppeteer

I have been exploring the capabilities of puppeteer and am trying to extract the values from the column names of a table.

<tbody>
<tr class="GridHeader" align="center" style="background-color:Black;">
    <td class="HeaderStyleOfdatalist">XYZ</td>
    <td>0500</td>
    <td>0550</td>
    <td>0600</td>
    <td>0650</td>
</tr>
</tbody>

My goal is to create an array containing these td values. I attempted using page.$(selector) but couldn't interpret the output. I also experimented with:

let idAttribute = await page.$eval('.GridHeader', e => e.childNodes);
console.log(idAttribute)

Unfortunately, I haven't been successful in retrieving the array of td values.

Could you please assist me in iterating through these values?

javascripttypescriptpuppeteer

Answer №1

Through the following code snippet, I successfully obtained the solution:

const information = await page.evaluate(() => {
        const elements = Array.from(document.querySelectorAll('.GridHeader td'))
        return elements.map(element => element.textContent)
    });

console.log(information) // ['abc', '0200', '0250','0100', '0150']

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

A compilation of category listings derived from two arrays of objects that share a common parent ID

I have a challenge with two arrays of objects connected by a parent ID. My goal is to create a categorized list where each category contains the corresponding data set. The structure should consist of a header (category) followed by buttons (data) related ...

javascriptreactjsreact-native

Steps for eliminating an element using jQuery from a variable filled with HTML code

I'm developing a forum where users have the ability to quote other users' comments. When a user clicks on "quote" for a comment, it captures the HTML of that comment and displays it in a box that says Quote: Original post by a member, similar t ...

javascripthtmljquery

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

What is the best way to retrieve the file name from the current document's URL using JavaScript?

I need help with a Javascript function that can extract the current file name without any parameters. $(location).attr('href').match(/([a-zA-Z\-\_0-9]+\.\w+)$/); var current_path = RegExp.$1; if ((current_path == 'index. ...

javascriptjqueryregex

Vue components are failing to appear in the live environment, however they function perfectly in the development environment

My Laravel Vue project runs smoothly in development, but on the live shared hosting server, the vue components are not displaying. However, the Laravel views function correctly with no errors in the console. I have already run npm run production to minif ...

javascriptvue.jsvue-componentlaravel-vue

Switching from using ngRouter to ui-router is a common

After purchasing an angularjs template for my application, I noticed that ngRouter was used instead of ui-router, which I am more comfortable with. So, I decided to switch to ui-router and update all the routes. However, I encountered some extra code in my ...

javascriptangularjsasynchronousangular-ui-routerangularjs-ng-route

Creating vibrant row displays in Vue.js: A guide to styling each row uniquely

I am not a front-end developer, so Vue and JS are new concepts for me. Currently, I am working on an application for managing sales. One of the components in my project involves displaying invoices in a list format. To make the rows visually appealing, I ...

javascripthtmlcssvue.js

The server's response contained a MIME type of "application/octet-stream" that did not include JavaScript. Module scripts in HTML are subject to strict MIME type checking

Here is the structure of my project: node_modules server.js public: glsl: fragment.glsl vertex.glsl index.html main.js img.jpg style.css I have set up a simple server to serve a three.js animation in server.js const express = require('expre ...

javascripthtmlnode.jsexpressthree.js

Unable to access contextual values in NextJS

When attempting to retrieve values from the context API, I am encountering issues where I receive a default value (without the updates made during the context call) and an undefined value (which should receive a value in the context provider). sortListCont ...

javascriptreactjsnext.jsreact-context

Type Vue does not contain the specified property

I am encountering an issue where I am using ref to retrieve a value, but I keep receiving the error message "Property 'value' does not exist on type 'Vue'". Below is the code snippet causing the problem: confirmPasswordRules: [ ...

typescriptvue.jsref

Open a Link in the Default Browser with a Right Click in node-webkit

I'm using an iframe in my node-webkit app. I want users to have the ability to right-click on links within the iframe (a tags) and choose an option like "Open in Browser" to open the link in their default browser. Can this be done? ...

javascriptnode.jsnode-webkit

Steps to resolve the "cannot get product" error on Heroku after submitting a value

view the image description hereI have been working on a MERN full stack project and everything was functioning correctly in my local environment. However, upon deploying it to Heroku, I encountered an error which is displayed below. All other APIs are fu ...

javascriptnode.jsreactjsherokumern

The replacement of classes in ReactJS using JavaScript seems to be malfunctioning

I have been attempting to change the class of a dynamic element when clicked, but none of my solutions seem to be working. Here is what I have tried: handleClick=(event,headerText)=>{ document.getElementsByClassName('sk-reset-filters') ...

javascriptreactjssearchkit

Bring in dynamically

I am interested in dynamically importing a module only when it is needed. To achieve this, I have created a small mixin: import {extend} from "vee-validate"; export const rules = { methods: { addRule (name) { let requi ...

javascriptvue.jsecmascript-6vuejs2

A widget for Windows 7 that can handle both HTTP GET and POST requests

I'm currently working on a small gadget for our intranet and have set up a PHP file on our server for initial testing purposes. Everything seems to be functioning properly when I use the GET request method, but I would prefer to utilize POST in order ...

javascriptphpajaxwindows-7

Tips for identifying tablet devices using the deviceDetector module in AngularJS

Having an issue with a Samsung Tablet. I need to display certain content for mobile devices, but not tablets. Device detection results: - isMobile(): true - isTablet(): false Here is the detailed data from the module: {"raw":{"userAgent":"Mo ...

javascriptangularjsdevicedevice-detection

Angular-4: Exploring Component Reference on Click Event

One of my challenges involves dynamically adding different components when the user clicks, allowing them to add and remove any component. However, I am struggling to figure out how to reference the component where the user clicked in Angular-4. here are s ...

angulartypescriptangular-components

Using npm to trigger the package.json file will activate both the harp and browser-sync applications

I am looking for a way to simultaneously start a harp.js server and run a browser-sync process. This setup works perfectly on Linux with the following package.json configuration: { "scripts": { "dev": "bash ./serve.sh" } } Here is the content of ...

javascriptnode.jsnpmbrowser-syncharp

Guide on Implementing jQuery Plugin with Vue, Webpack, and Typescript

I am currently exploring the integration of the jQuery Plugin Chosen into my vue.js/Webpack project with TypeScript. After some research, I discovered that it is recommended to encapsulate the plugin within a custom Vue component. To kick things off, I m ...

javascriptjquerytypescriptvue.jswebpack

What is the best way to incorporate a mongoose model into another model?

I have two different models that I am working with. In the user model, I want to include an array of Requests, and in the Request Model, I want to have User as an attribute (without including the password). How can I achieve this? var userSchema = new S ...

javascriptnode.jsexpressmongoosemodel