Struggling to decide on the perfect CSS selector for my puppeteer script

I am trying to use puppeteer page.type with a CSS selector.

<div class="preloader">
  <div class="cssload-speeding-wheel"></div>
</div>
<section id="wrapper" class="login-register">
  <div class="login-box">
      <div class="white-box">
      <form class="form-horizontal form-material" id="loginform" method="post">
        <h3 class="box-title m-b-20">Sign In</h3>
        <div class="form-group ">
          <div class="col-xs-12">
            <input class="form-control" type="text" required="" name="login-username" placeholder="Username">
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-12">
            <input class="form-control" type="password" required="" name="login-password"  placeholder="Password">
          </div>
        </div>
         <div class="form-group">
          <div class="col-xs-12">
        <div class="form-group">
          <div class="col-md-12">

        </div>
        <div class="form-group text-center m-t-20">
          <div class="col-xs-12">
            <button type="submit" name="doLogin" class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">Log In</button>
          </div>
        </div>
        <div class="form-group m-b-0">

I need assistance with setting up the username, password, and doLogin elements.

page.type("input[@placeholder='Username']", 'MYUSERNAME');

The above code is not working for me. Can someone please help?

javascripthtmlcsspuppeteer

Answer №1

Using the @ in your selector is unnecessary, and the placeholder is considered a pseudo element. Consider using a different attribute for your selector:

page.type("input[name='login-username']", 'MYUSERNAME');

It is recommended to assign IDs to your elements for better selector performance:

<input id="username" class="form-control" type="text" required="" name="login-username" placeholder="Username">

Then you can use:

page.type('#username', 'MYUSERNAME');

Answer №2

If you're looking for a solution to your problem, this could be just what you need. I've made it simpler and easier to understand so that you can clear up any confusion you may have.

  /**
 * Separate your field information
 * 
 */
let loginAccount ={
    username:"input[name='login-username']",
    password:"input[name='login-password']",
    loginSubmit:".btn"
}
 /**  Enter username */
 await page.waitForSelector(loginAccount.username);
 await page.click(loginAccount.username);
 await page.keyboard.type('krdheeraj51');
 /** Similarly for login password */
 await page.waitForSelector(loginAccount.password);
 await page.click(loginAccount.password);
 await page.keyboard.type('enter your password');
 /** Click your submit button */
 await page.waitFor(2000);
 await page.waitForSelector(loginAccount.loginSubmit);
 await page.click(loginAccount.loginSubmit);

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

Guide to creating a parallax scrolling effect with a background image

My frustration levels have hit an all-time high after spending days attempting to troubleshoot why parallax scrolling isn't functioning for a single image on a website I'm developing. To give you some context, here's the code I've been ...

javascripthtmlcssparallaxskrollr

Is the jQuery form plugin not passing any data to Node.js?

Check out the HTML form below: <form id="importForm" enctype="multipart/form-data"> <p> <label for="ownerName">Owner Name<pow class="requiredForm ...

javascriptjquerynode.jsexpress

What is the best way to conceal a canvas or another item?

Within my main canvas, there are three smaller canvases and a text element. <canvas id="Background" width="350" height="300" style="border:6px solid black; position: absolute; left: 10px; top: 10px;"> </canvas> <canvas id="Canvas1" width ...

javascripthtmlcsscanvas

Tips for transforming a nested for-loop into a recursive function

Trying to work with Memcached data in Node.js is proving to be a challenge due to the asynchronous nature of the language. My goal is to store all retrieved results in an object. This is how I would typically approach it: for( x = startX; x <= endX; x ...

javascriptnode.js

Categorize elements in an array based on a specific keyword

Struggling with my AngularJS (1) application, I can't seem to figure out how to split an array of items into separate arrays grouped by item. In simpler terms, I have an array with different items and I want to group them by their uuid like this: [ ...

javascriptangularjsjson

Element positioning in Material UI is fluid and responsive across all devices, with the ability to place elements at

As a novice in layout design, I am currently developing a web application for both mobile and desktop using React and Material UI. My challenge lies in placing the app navigation at the bottom of the screen. The issue arises because the location of the app ...

cssreactjsmaterial-ui

The custom CSS styling is triggered only when the page is resized in Bootstrap

Currently, I am utilizing bootstrap alongside my custom CSS. The issue I am facing is that some of the styling from my custom CSS only takes effect after resizing my browser window to a smaller size. My custom CSS seems to be applied when the website adapt ...

csstwitter-bootstrapjoomla2.5

Take a sequence of multiple words and combine them into a single string with hyphens in between

I've been working on a WordPress website and I created a JavaScript function that adds a class to the body tag, allowing for different backgrounds based on the category. It works perfectly fine when the category is a single word, but encounters issues ...

javascriptwordpress

Sending a object as an argument to a function

Could someone please help me understand the purpose of passing an object as a function parameter? I have been trying to learn Next.js and they frequently use this method in their code. If anyone could provide a brief explanation of why this is done, it wo ...

javascriptreactjsnext.js

What is the process for specifying a specific font family in CSS?

Despite setting my text to font-family: Times New Roman, I'm seeing a different font in my Chrome browser. Here is the relevant HTML code: <p style="color:#F17141;font-size: 120px; font-family: &quot;Times New Roman&quot; ; font-weight: b ...

htmlcss

What is the best way to activate a function from a modal component without having the function embedded in Angular 14?

I've recently been putting together an e-commerce application using Angular 14. Currently, I'm tackling a form that must only be submitted once the user accepts the "Terms & Conditions" shown in a modal popup. The FormComponent and ModalCompone ...

javascriptangularangular14

Determining if an array is devoid of any elements using ng-if

When the API I am dealing with has no items in the array, it returns: items: [] If there are elements in the array, it looks something like this: items: [ { name: 'Bla' } ] I suspect that in my template, I will need to utilize ng-if t ...

javascriptarraysangularjs

Unusual alterations to HTML and CSS to meet specific needs

Struggling with bringing my website ideas to life! My header contains a navigation bar, followed by a centered chat box within a fixed <section>. Want the left and right side of the chat box to be content areas that scroll in sync while the chat box ...

htmlcss

Upcoming API and backend developments

When working with the NEXT project, API Routes provide the ability to create an API endpoint within a Next.js application. This can be achieved by creating a function in the pages/api directory following this format: // req = HTTP incoming message, res = H ...

javascriptreactjsnext.jsbackend

Addressing some minor visual inconsistencies in an HTML bullet-pointed list

After reviewing my current code, it is displaying the following: https://i.stack.imgur.com/dvjrc.jpg I am attempting to make the following changes: Ensuring each line in the list fits properly within its corresponding box by utilizing vertical-align: to ...

htmlcssvue.js

"Is it possible to rearrange the parent div's position when hovering over a child image with jquery sortable

Can you assist me with a task? I have two text boxes with an equal sign image, and I want the user to be able to move the div only when hovering over the equal sign. This means that the user should be able to drag the div using the equal sign. Can you hel ...

javascriptjqueryhtmlcssjquery-ui

Choosing a menu option with jQuery

Can someone help me with making a menu option selected in HTML? Here is my code: <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon"><img src="images/home.png" ...

jqueryhtmlcss

The Material-UI selector isn't functioning properly for me

I recently tried to incorporate a material-ui selector example into my project by referring to the code fragment obtained from an example on Github. import React from "react"; import {withStyles} from "material-ui/styles"; import Select from "material-ui/ ...

javascriptreactjsmaterial-ui

Elevation in design ui component

I am having an issue with the height of a theme-ui component I embedded. Even though the console shows it correctly, it is displaying at 100% height. <Embed src={url} sx={{width: '800px', height: '400px'}}/> This embed is contain ...

javascriptcssreactjsnext.jstheme-ui

Removing double double quotes for Javascript

My problem involves a string that represents longitude/latitude in the format of dd°mm'ss''W (note 2 single quotes after ss). To convert this string into its decimal representation, I am using the following code snippet: function dmsTodeg ...

javascript