Html Question posted in
Some basic documentation can be found here.

Fill HTML textbox from the console

I do not know a thing about HTML, I have experience mainly with Python and VBA, so do not expect me to elaborate a lot on what my possible solution might be.

I have to fill some forms on a website and this could be automated, because all the data that needs to be put in the text-boxes on the website is already stored in an Excel sheet.

My idea would just to make VBA make a ".txt"-File to copy and paste it on the console of the web browser and just make the questionnaires of the web site be filled semi-automatically.

I have identified the elements of the text-boxes in the HTML source code of the website in the <body> and looks like this:

<app-store-input _ngcontent-ngi-c61="" _nghost-ngi-c56="" class="ng-star-inserted">
  <app-input _ngcontent-ngi-c56="" _nghost-ngi-c55="">
   <div _ngcontent-ngi-c55="" class="labels">
    <label _ngcontent-ngi-c55="" class="label"> NAME </label>
    <label _ngcontent-ngi-c55="" class="error-label" style="position: absolute; right: 0; bottom: 23px; margin-left: auto; margin-right: 15px;" hidden="">
    </label>
   </div>
    <input _ngcontent-ngi-c55="" type="text" maxlength="150" placeholder="" title="" class="ng-dirty ng-valid ng-touched" required="">
      #shadow-root (user-agent)
        <div pseudo="-webkit-input-placeholder" id="placeholder" style="display: none !important;"></div>
        <div>MyName</div>
  </app-input>
</app-store-input>

I have already identified that my input for the "Name" section with the label NAME, is marked in the <input>, under the #shadow-root. Here I wrote MyName as what I would write in the text-box of the website. There are a lot more of this text-boxes, but for simplicity’s sake, I just took this one as an example.

I would have tried something like:

_ngcontent-ngi-c55.NAME = MyName

I would have used the label "NAME", because all other text-boxes look exactly the same with the same code, the only difference is the label, e.g. one is "NAME", the other "SURNAME", the other "ADRESS" and so on.

I have also tried the function of recording the actions on Chrome to do a "Performance" check of the website as a developer, but this throws a JSON-File which has to be inserted again in the "Record" part of developer tools for Chrome, not the console. This is only a half-solution, as I do not want to depend on a feature of Google Chrome to always be able to do this and I would like a universal and native solution to the console of web browsers.

Thank you all in advance.

Tags:

2

Answers


  1. 0

    This can be achieved with a function like this. This just help you to fill your form easily.

    // Function to fill a DOM input based on the label text
function fillInput(labelText, value) {
    let label = Array.from(document.querySelectorAll('label')).find(el => el.textContent.trim() === labelText);
    if (label) {
        let appInput = label.closest('app-input');
        if (appInput) {
            let input = appInput.querySelector('input');
            if (input) {
                input.value = value;
            }
        }
    }
}

// Fill form fields
fillInput('NAME', 'MyName');
    Login or Signup to reply.
  2. 0

    First, try this script:

    let placeholderMap = {
    NAME: "John Smith",
    EMAIL: "[email protected]",
    DESCRIPTION: "blathe blathe blup"
};

let labels = document.querySelectorAll("label");

for (let label of labels) {
    let key = label.innerText.trim();
    if (placeholderMap[key]) {
        label.innerText = placeholderMap[key];
    }
}
    <label _ngcontent-ngi-c55="" class="label"> NAME </label> <br>
<label _ngcontent-ngi-c55="" class="label"> EMAIL </label> <br>
<label _ngcontent-ngi-c55="" class="label"> DESCRIPTION </label> <br>

    Explanation:

    • we create placeholderMap, which will be a Javascript object of key-value pairs where the keys represent the placeholders you want to replace and the values represent the value you intend to replace them with
    • we select all labels (as your item was a label, but if you need to replace some other elements too, then the selector passed to querySelectorAll needs to be adjusted accordingly)
    • we loop the labels and for each of them
      • we get the key, which is the trimmed inner text, so your prepending and appending spaces will not make the label unrecognizable
      • if the key is inside the map
        • then we replace the inner text of the label with the value you intended to have instead
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search