Applescript fill up chrome textfield class
-
21-04-2021 - |
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...
Solution
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.