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

It appears that AsyncStorage.getItem() is not functioning as expected

Whenever I attempt to use AsyncStorage.getItem() to assign a value, I encounter difficulties retrieving it afterwards. let tokenData = null; const getData = async () => { let token; try { token = await AsyncStorage.getItem('token'); ...

javascriptreactjsreact-nativeasyncstorage

Video from YouTube keeps playing in the background even after closing Bootstrap modal

I'm having trouble with playing an embedded YouTube video inside a Bootstrap modal. When I close the modal, the video continues to play in the background. Can someone help me with this issue? <!-- Button trigger modal --> <button type=&q ...

htmljquerybootstrap-5

Creating uniform table column widths within a flex container with dynamic sizing

I am working on designing a navigation system for my website using a table inside a flexbox. I want to ensure that the table columns have equal width and can scale dynamically. Additionally, I aim to wrap the text in the data cells without changing the cel ...

htmlcss

Can someone provide guidance on how to validate a HEX color in Cypress?

As I dive into testing with Cypress, my lack of experience has become apparent. I am trying to test the background-color CSS property on a specific element, but running into an issue - everything is in RGB format behind the scenes, while I need to work wit ...

javascripttestingcypress

What is the best way to implement a CSS Style specifically for a glyphicon icon when it is in keyboard focus?

I have a particular icon representing a checkbox that appears as a glyphicon-star. It is designed to display in yellow when focused on by the keyboard navigation. This feature is intended to help users easily identify their location on a page. However, an ...

javascripthtmlcss

Sending data from a PHP function to an AJAX call in the form of an associative array using json_encode() does not

Greetings, this is my first post so please forgive me if I miss anything or fail to explain clearly. All the code below is within the same PHP file. Here is my AJAX call: $.ajax( { type: "POST", url: window.location.href, data: {func: 'g ...

javascriptphpjqueryajax

The wrapper is failing to extend the full height of the entire page

Initially, I thought setting the height of my wrapping div to 100% would be a quick task that I could complete in five minutes. However, it ended up taking me hours, so now I'm here hoping someone can assist me with this commonly asked question. The ...

htmlcsscss-position

jQuery is unable to manipulate newly added DOM elements that have been loaded via AJAX

Having trouble with jquery ajax. Unable to interact with newly added element through ajax. Code snippet: $(".yorum_input").keypress(function(e) { if (e.keyCode == 13) { e.preventDefault(); var alt_id = $(this).attr('yorum_id'); va ...

javascriptjqueryajaxdom

Using useEffect in React with an empty dependency array is a

The issue: I'm facing a challenge with managing the timer in my code. If I remove the dependency array from the useEffect, the timer keeps running endlessly. On the other hand, when I include a dependency array in the useEffect, the timer gets stuck a ...

javascriptreactjs

Ways to eliminate a specific array from another array using JavaScript

0: {id: 1553825061863, name: "Thai Milk Tea", qty: "1", total_amount: 9500, toppings: 500, …} 1: {id: 1553825061863, name: "Thai Milk Tea", qty: "1", total_amount: 9500, toppings: 500, …} 2: {id: 1553825061863, name: "Thai Milk Tea", qty: "1", total_am ...

javascriptarraysobject

What are the steps to repairing the footer on your website?

Here is the issue I am facing: The footer in my HTML code appears after the grid. How can I fix this problem and make my footer fixed? Below is my HTML and CSS code for reference: <footer> <li><a href="">Menu</a>< ...

htmlcss

Elements powered by jQuery failing to load upon dynamic webpage(s) loading via ajax

Dynamic loading of jQuery elements, such as Ibuttons, seems to be causing issues when implemented with an ajax dynamic content loader. The entirety of my website is rendered through Ajax just like this: <html> <header> {jQuery} </header> ...

javascripthtmljqueryjquery-plugins

Combining HashRouter and anchor navigation in React: A guide to seamless page navigation

I am currently utilizing the HashRouter functionality from the library react-router-dom. The issue I am facing is when attempting to link to a specific div on the same page using an anchor tag: <a href="#div-id"> Link to div </a> In ...

javascriptreactjsroutesreact-routerreact-router-dom

Deciphering JSON using JavaScript

Looking to decode a URL using Javascript? let url = "http://maps.googleapis.com/maps/api/distancematrix/json?origins=London&destinations=drove&mode=driving&language=en&sensor=false"; fetch(url) .then(response => response.json()) .th ...

javascriptjsongoogle-maps

Error encountered in Ionic app: array.push() is not a valid function

A situation arose in my application where I have a controller and factory set up. Inside the factory, there is an array that should hold IDs of certain elements. However, when attempting to push an element into the array, an error is triggered stating: ...

javascriptangularjsarraysionic-framework

When the input field is not selected, switch it to display as plain text

I have a table where the cells become editable when clicked on by a user. I want the editable area to revert back to plain text with the updated value once the user deselects the text field. Is it possible to utilize AJAX to update a database with the new ...

jqueryhtmlmysqlajaxhtml-table

Resize images within a button using table cell size in Bootstrap

I am looking to create a row of buttons within a table, where each button is represented by an image and has a transparent border/background. To achieve this, I placed each button in one of the 10 remaining cells of a table using <td class="col-sm ...

htmlcsstwitter-bootstrapbootstrap-5

What sets srcset apart from media queries?

Can you explain the contrast between srcset and media query? In your opinion, which is more optimal and what scenarios are ideal for each? Appreciate it! ...

javascripthtmlcssmedia-queriessrcset

handling component interaction with react-redux store

Currently, I am in the process of developing my first significant project using react-redux. While trying to establish state mapping between components in react-redux, I seem to have missed a crucial step. Almost everything is functioning smoothly except ...

javascriptreactjsreact-routerreact-redux

Switch the CSS class for the currently selected link

There are 5 links on the page. When I click on each link, it changes color. However, when I move my cursor to another area of the page, the active link loses focus and I can't show its current state. Can you please advise me on how to fix this issue? ...

htmlcss