What could be the reason for the Puppeteer script returning 'undefined' when using ExecutionContext.evaluateHandle()?

Currently, I am in the process of learning the Puppeteer API with version 1.9.0. Below is the code I am using to click a button within an iframe:

const changePrefsFromAllToNone = async () => {

    try {
        const browser = await puppeteer.launch({
            headless:false,
            slowMo: 250});

        const page = await browser.newPage();
        await page.setViewport({width: 1280, height: 800});
        await page.goto(baseUrl);
        await page.waitForSelector('.widget-title');
        const frame = page.frames().find(f => f.name() === 'iframe');
        const prefsDenyButton = await frame.$eval('#option-refuse-phv1L');
        prefsDenyButton.click();

    } catch (error) {
        console.log(error);
    }
};

changePrefsFromAllToNone();

There is an error message stating:

Error: The following is not a function: undefined
at ExecutionContext.evaluateHandle 

I referenced the example directly from the Puppeteer website: https://github.com/GoogleChrome/puppeteer/blob/v1.9.0/docs/api.md#

Answer №1

If you're searching for the correct CSS selector, you should use it instead of using eval. Remember to include the await keyword. Here's the revised code snippet:

const denyButton = await page.$('#option-refuse-phv1L');
await denyButton.click();

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

How to form an array using rxjs before the adding sequence is completed

I am currently exploring a way to utilize rxjs to achieve the following scenario: You have two observables, onAddObs and onRemoveObs. Assume that onAddObs.next() is triggered multiple times, adding "A", "B", "C". I aim to then extract ["A", "B", "C"]. .t ...

Tips for implementing controlled components in Vue to update values in the parent component object

Utilizing controlled components, I am able to emit the selected value. For example, // app-select.vue <v-select :items="[1,2,3]" @change="$emit('input', $event)"></v-select> // parent-component.vue <app-sele ...

Attempting to trigger the timer to begin counting down upon accessing the webpage

Take a look at this example I put together in a fiddle: https://jsfiddle.net/r5yj99bs/1/ I'm aiming to kickstart as soon as the page loads, while still providing the option to pause/resume. Is there a way to show the remaining time as '5 minute ...

Send error messages directly to the client side or retrieve status codes and messages

When responding to an AJAX request, encountering an app error like data validation failure can be tricky. How can we effectively communicate this to the user? 1. Returning a Status Code and Fetching Message with JS $.ajax(options).done(function(response) ...

Tips for transferring a data table (an object) from a JavaScript file to Node.js

On my HTML page, there is a table displaying student names and information, along with controls to manage the table. I created a save button to save this table as an object named SIT in my JavaScript code. I was able to manually save this table in MongoDB ...

Streamlining a complex task in JavaScript

I am currently exploring options to streamline my code so that I don't need to repeat the same function 38 times. Instead, I would like to have a single function that can handle 38 different IDs separately. The script is designed to randomly select a ...

Resizing tables dynamically using HTML and JavaScript

I am attempting to reproduce the functionality demonstrated in this example When dealing with a large table, I want it to resize to display 10 entries and paginate them accordingly. The only thing I require is the pagination feature without the search bar ...

Can anyone recommend a reliable JavaScript library for creating resizable elements?

I am looking to incorporate resizable functionality for a textarea. While I have experimented with jQuery UI's "resizable" feature, it doesn't quite meet my needs. I appreciate jQuery, but the resizable option falls short in allowing me to resize ...

Ways to display certain JSON elements

I'm attempting to retrieve a specific part of a JSON file through AJAX and display it in an HTML div. I only want to show a certain object, like the temperature. Here is the AJAX code: $(function () { $.ajax({ 'url': 'http://ap ...

Typescript does not produce unused members

Having an issue with the JS code that TypeScript compiler is generating. Here's an example class: // Class export class UserDTO { Id: number; FirstName: string; LastName: string; DateOfBirth: Date; getFullName(): string { ...

Encountering an undefined error while attempting to retrieve an object from an array by index in Angular

Once the page is loaded, it retrieves data on countries from my rest api. When a user selects a country, it then loads the corresponding cities for that country. Everything is functioning properly up to this point, however, upon opening the page, the city ...

Step by step guide on uploading files using Vue.js and Express.js

Hello there, I am new to Vuejs and Express and I'm looking to practice my skills. Currently, I am attempting to build a User Profile with an image upload feature using Vuejs and ExpressJs but unfortunately, none of the files or text are uploading as ...

Tips for utilizing node.io for HTML parsing with node.js?

Struggling to utilize node.io with node.js for parsing an HTML page stored as a string in a variable. Encountering difficulties passing the HTML string as an argument to my node.io job. Snippet from my node file nodeiotest.js: var nodeIOJob = requi ...

What steps should be followed to upgrade node.js from version 5.9.1 to 6.14.0 in a secure manner

Our current node version is 5.9.1 and we are looking to transition to a newer version that supports ES6. Specifically, I am aiming to upgrade to at least version 6.14.0, which is known to support almost all of the ES6 features. However, I must admit that ...

How can I deactivate a particular button in a React application?

Is there a way to selectively disable a button from a set of buttons that are generated from server data? I need to disable a specific button, even if there are many others, and also make it so that a button becomes permanently disabled once clicked. How ...

How can I generate a .json file that includes PHP variables?

How can I create a customized JSON file called "file.json.php" using PHP variables such as $_POST['foo']? This file will produce different results based on the value of the post variable passed through an ajax call. What settings do I need to imp ...

I am looking to create a counter in NextJS that will store its value in a database for persistent storage. How can

In my NextJS and ReactJS project, I am creating a like-counter feature that will keep track of the number of likes a user can give. The maximum limit for likes is set to 100. The count is stored in a FaunaDB. While I have successfully displayed the curren ...

What causes bootstrap to fail on smaller screens?

While developing an app using Bootstrap, I encountered an issue where the app was not functioning properly on small screens. Everything worked perfectly on larger screens, such as a PC browser, but on a mobile browser, none of the tabs would open. When I t ...

What is the best way to duplicate/rename/replace an image in PHP while utilizing form submission and radio buttons?

I am new to PHP and I am working on a feature that allows a user to change an image using radio buttons and form submission. The goal is to copy and rename one of two image files (Open/Closed.jpg) to another location (images/status/Status.jpg) without requ ...

Utilizing JavaScript for selecting a radio button on click event

I have implemented a feature with four radio buttons to select a country. Upon clicking on any of the radio buttons, I utilize Ajax to retrieve the states corresponding to that specific country. To indicate to the end user that data processing is ongoing, ...