I'm working on an automation project in which I have a web adapter with a search box but there is no search button the only way to proceed is to hit enter. I found a previous thread which provided a solution for getting the text box element by ID, however in this scenario the text box ID is randomly generated each time the page loads.

The name of the text box also always changes except the end of the name always ends with _text.

I have tried to use *_text as my parameter in the following script but I keep getting an error. Any ideas what I am doing wrong or are there any better suggestions?

eventname = "keydown"

elementID = "*_text"

function os_RaiseEvent(eventname,elementId) {
    var element = document.getElementsByName(elementId)[0];
    var event;

    if(document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventname, true, false);
        if(eventname == "keydown" || eventname == "keyup") {
            event.keyCode = 13;
        }
        element.dispatchEvent(event);
    }
    else if(document.createEventObject) {
        event = document.createEventObject();
        if(eventname == "keydown" || eventname == "keyup") {
            event.keyCode = 13;
        }
        element.fireEvent("on" + eventname, event);
    }
    return true;
}

I'm working on an automation project in which I have a web adapter with a search box but there is no search button the only way to proceed is to hit enter. I found a previous thread which provided a solution for getting the text box element by ID, however in this scenario the text box ID is randomly generated each time the page loads.

The name of the text box also always changes except the end of the name always ends with _text.

I have tried to use *_text as my parameter in the following script but I keep getting an error. Any ideas what I am doing wrong or are there any better suggestions?

eventname = "keydown"

elementID = "*_text"

function os_RaiseEvent(eventname,elementId) {
    var element = document.getElementsByName(elementId)[0];
    var event;

    if(document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventname, true, false);
        if(eventname == "keydown" || eventname == "keyup") {
            event.keyCode = 13;
        }
        element.dispatchEvent(event);
    }
    else if(document.createEventObject) {
        event = document.createEventObject();
        if(eventname == "keydown" || eventname == "keyup") {
            event.keyCode = 13;
        }
        element.fireEvent("on" + eventname, event);
    }
    return true;
}

• javascript
• automation
• element

• 1 You should mind to mark an answer to finish that topic. – Michael W. Czechowski Commented May 23, 2018 at 8:49

2 Answers 2

Run this special kind of attribute selector [id$="_text"] with document.querySelectorAll(), if you want to have a list of all elements, or document.querySelector(), if you want to select one particular element.

console.log(document.querySelectorAll('[id$="_text"]'));

<p id="foo_text">Foo</p>
<p id="bar_text">Bar</p>
<p id="baz_text">Baz</p>

You can adopt this solution for any HTML attribute. If you want to query by name attribute, use document.querySelectorAll('[name$="_text"]').

I am little bit confused about the attribute...is it name or id. Though that matters little, you can try with Attribute Ends With Selector.

You can use the selector in querySelectorAll() for selecting more than one elements.

document.querySelectorAll('[name$="_text"]')[0]

OR: with querySelector() for selecting the first matched element:

document.querySelector('[name$="_text"]')

let firstVal = document.querySelectorAll('[name$="_text"]')[0].value
console.log(firstVal);

<input name="1_text" value="one"/>
<input name="2_text" value="two"/>
<input name="3_text" value="three"/>