Puppeteer encounters difficulty locating the selector when attempting to click on the menu

https://i.sstatic.net/BxR3p.jpg

Hello, I am struggling to click on the firmware upgrade button after selecting system tools. When using the ID or selector and attempting to copy it, I receive an error message stating that the element cannot be found.

This is my first time working with Puppeteer, so if anyone can offer assistance, I would greatly appreciate it!

Thank you

const puppeteer = require('puppeteer');

let scrape = async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.setViewport({width: 1000, height: 500})
  await page.goto('http://192.168.2.107:8080/', {waitUntil: 'networkidle2'});
  await page.waitFor('input[id=pcPassword]');
  await page.$eval('input[id=pcPassword]', el => el.value = 'admin');

   page.keyboard.press('Enter')
   await page.waitFor(3000);
  await page.click(
    '[id="the Id im talking about "]'
);
  //await page.waitFor(5000);
  await browser.close();
};

Answer №1

After figuring out that I needed to select the frame, everything fell into place.

Check out this code snippet:

const puppeteer = require('puppeteer');

let scrape = async () => {
 const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], headless:false});
  const page = await browser.newPage();
  await page.setViewport({width: 1900, height: 700})
  await page.goto('http://192.168.2.105:8080', {waitUntil: 'networkidle2'});
  await page.waitFor('input[id=pcPassword]');
  await page.$eval('input[id=pcPassword]', el => el.value = 'admin');

   page.keyboard.press('Enter');
   await page.waitFor(3000);

 const frame = await page.frames().find(f => f.name() === 'bottomLeftFrame');
    const button = await frame.$('#menu_tools');
    button.click();
       await page.waitFor(1000);
    const button2 = await frame.$('#menu_softup');
    button2.click();
      }
scrape().then((value) => {
    console.log(value); // Success!
});

Answer №2

It seems that the issue at hand involves frames within the webpage, based on your feedback for this response. This is probably why puppeteer is having trouble locating the element #menu_tools, even though it appears visible to you on the page. If you need assistance navigating through the frames on the page, refer to Puppeteer pageFrames documentation.

Here is an example demonstrating how your code could be structured:

let scrape = async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.setViewport({width: 1000, height: 500})
    await page.goto('http://192.168.2.107:8080/', {waitUntil: 'networkidle2'});
    // Identify the frame containing your target selector and adjust the pageFrame accordingly.
    const pageFrame = await page.mainFrame().childFrames[0];
    await pageFrame.waitFor('input[id=pcPassword]');
    await pageFrame.$eval('input[id=pcPassword]', el => el.value = 'admin');
    pageFrame.keyboard.press('Enter')
    await pageFrame.waitFor(3000);
    await pageFrame.waitFor('#menu_tools')
    await pageFrame.click('#menu_tools');
    await browser.close();
};

To view all available frames on the page, utilize await page.frames() and establish a connection to the desired frame. Subsequently, you can execute typical operations within that frame using its handle.

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

Issues regarding innerHTML

I have a collapsed table with a link that collapses its content. My goal is to change the link (such as from "+" to "-" and vice versa) using JavaScript. I was able to achieve this, but now my table no longer collapses. Here is the code snippet: <div c ...

Adjusting the selected state of an HTML/CSS checkbox with JavaScript

After downloading a theme with a tailored switch component that replaces the standard checkbox functionality, I noticed that the 'checked' status of the underlying checkbox does not change upon click or touch events. Here is the HTML structure: ...

Is it necessary to address React console warnings before pushing changes live?

It's been approximately three months since I started my coding journey, and I've made significant progress with an app I developed. However, upon inspecting the page, I noticed over 50 warnings. Some of these warnings include: react-dom.developme ...

Exploring the wonders of Ajax with different endpoints for retrieving data

On our server, we have an endpoint set up like this: app.get('/A/:A_Id/B/:B_Id/C?', callbackFunction); When I enter the URL "http://xx.xx.xx.xx:3000/A/1/B/1/C?startTimeUtc=03:00:00&endTimeUtc=05:00:00", the server successfully returns data ...

Steps for resending an Ajax request once the previous one has been completed

Currently, I am experimenting with a basic Ajax request to a webpage by triggering it through an onclick event on a button: // 1. Create an XMLHttpRequest object var myRequest = new XMLHttpRequest(); // 2. Use the open method to request a resource from th ...

Tips for organizing a JSON object based on an integer column such as "3", "2", "5"

I am facing a challenge with sorting a JSON object that has a column containing numbers. The issue arises because the column is of string type. How can I sort string numbers in numerical order? var myArray = [{ name: 'David', total: "6" }, ...

Exploring the power of Angular JS promises through ng-repeat

My current project involves fetching latitude and longitude coordinates from a postcode using an API, then utilizing those coordinates to retrieve data on street level crimes near that location on a specific date through the UK police API. However, I have ...

Issue with JQuery click() not triggering on a specific div button

I am attempting to replicate a user's click on a website where I have no control over the code. The specific element I am trying to interact with is a div that functions as a button. <div role="button" class="c-T-S a-b a-b-B a-b-Ma oU v2" aria-dis ...

Display/Conceal Dropdown Menu for Combobox Using only Javascript

In my asp.net user control, I am generating markup that looks like this: <div id="combobox1"> <div id="combobox1_text"><span>combobox 1</span></div> <div id="combobox1_ddl"> <input type="checkbox" id="combobo ...

A guide on exposing TypeScript classes globally through a WebPack bundle in JavaScript

Currently delving into TypeScript, my aim is to gradually replace JS with TS. However, due to having numerous JS files, my strategy involves creating new classes in TS and incorporating them into my existing JS files for the time being. Eventually, I plan ...

Tips for correctly loading all elements on an HTML page before making CSS modifications

This question has been asked several times in the past. I am asking because when I used the on ready callback in jQuery, it did not change the placeholder text of my element "search_input". $( document ).ready(function() { $("#search_input").attr(' ...

Encountering a client component error with the app router in Next.js version 13.4.9

Encountering an error in Nextjs that persists until the 'use client' directive is removed. Warning: Rendering <Context.Consumer.Consumer> is not supported and will be removed in a future major release. Did you mean to render <Context.Con ...

Performing three consecutive Ajax requests in a Rails application

Recently, I developed a custom admin system for a local gym to manage payments, attendance, mailing, sales, and more. While everything is functioning smoothly, there seems to be an issue with the attendance feature. Occasionally, when taking attendance, an ...

Adding a command to open a new browser tab using JavaScript code can easily be accomplished by following these steps. By using Terminal, you can quickly and efficiently implement this feature

I'm new to coding and trying to create a terminal simulation. You can check out my code here: https://codepen.io/isdampe/pen/YpgOYr. Command: var coreCmds = { "clear": clear }; Answer (to clear the screen): function clear(argv, argc ...

The following 13 error occurred in the node_modules/next/dist/esm/server/web/spec-extension/cookies/serialize.js file

Every time I try to use the serialize function in my application on Next, it throws errors. Error - node_modules/next/dist/esm/server/web/spec-extension/cookies/serialize.js (40:0) @ parseCookieString Error - URI malformed I have attempted numerous soluti ...

I'm having trouble displaying the X's and O's in my tic tac toe JavaScript game. Any suggestions on how to resolve this issue?

After following a couple of online tutorials for the tic tac toe project, I encountered an error in both attempts. The X's and O's were not displaying even though all other features were working fine. Below are my codes for HTML, CSS, and JavaScr ...

Rephrase the ajax call and the data retrieved

I'm struggling to find a solution for writing this code snippet without using async: false,. var imageX; var groupX; $.ajax({ type:'GET', url:'php/myphp.php', dataType:'json', async: false, success: ...

Step-by-step guide on building an Android application with Cordova framework and VisualStudio2015

I am looking to create a basic Android application using C#. A friend recommended the Cordova framework, but I'm not sure how to use it. Can you guide me on getting started with Cordova and what tools I'll need to install? If there is a simpler w ...

Guide to incorporating third-party JavaScript files and functions into my Angular web app

I have been trying to integrate external code (HTML, JS, and CSS files) into my Angular web application. Within this external code, the structure of the HTML file is as follows: index.html <html> <header> </header> <body> </bo ...

Transmitting information from Angular to Laravel

Hey, I'm facing a challenge once again. Currently, I am working on creating a to-do list application using Laravel and Angular. While I can successfully retrieve data from the database through the Laravel and Angular controllers, I'm encountering ...