Applescript fill up chrome textfield class

Question

<div class="content" contenteditable="true" data-placeholder="Search Cases" data-maxlength="" data-div-placeholder-content="true">mytexthere</div>

I don't manage to fill up the text from this textfield

here is my script :

set textToSave to "Demo"
tell application "Google Chrome"
    tell tab 3 of window 1 to set theTextInfo to execute javascript "document.getElementsByClassName('search-field has-drop-down-menu component')[0].value=" & quoted form of textToSave
end tell

I have no error on AppleScript but no result on chrome...

Answer 1

Similarly with your question here, the issue is that you're trying to reference an HTML element by a class name that does not exist.

The HTML snippet you supplied contains a single <div> element, whose class attribute has the value "content". Your JavaScript uses the getElementsByClassName() method with the argument 'search-field has-drop-down-menu component', which seems to have come from nowhere.

Therefore, to explain briefly about the getElementsByClassName() method, it is used to search within a collection of HTML elements for all the elements that have a class attribute with the value you specify as the argument. For example, getElementsByClassName('foo') will match <div class="foo">...</div>, and <a class="foo bar">...</a>, but it will not match <p class="foobar" id="foo" name="foo">...</p>.

To replace mytexthere inside the <div> element, you could use this method with the argument "content" (the class name of the <div> element); identify the correct index number if the method returns more than one item; then set the textContent property to the desired value:

    document.getElementsByClassName('content')[2].textContent='...';

where [2] would need to be changed to the correct index number from the list of elements returned by getElementsByClassName('content').

There are other JavaScript methods you can use, such as querySelector(), which—to be useful—will require you read up on CSS Selectors. But, once you're familiar with these, you can perform some very powerful element queries.