Clicking a "div button" on a Safari web-page using AppleScript & Javascript

Question

I have a problem somewhat related to a post that came up a few years ago. There was significant input to that post, as well as significant disagreement, and apparently no clear answer. So I thought I'd bring this up again but in the context of my specific issue.

The Goal:

Use AppleScript/Safari to click several elements of an external web-site. This is working fine except for the following 3 "buttons", all created within <div> elements:

1. The "Call" button:

   <div role="button" class="goog-inline-block jfk-button jfk-button-primary jfk-button-narrow" tabindex="0" style="-webkit-user-select: none;">Call</div>
   

2. The "Text" button:

   <div role="button" class="goog-inline-block jfk-button jfk-button-primary jfk-button-narrow" tabindex="0" style="-webkit-user-select: none;">Text</div>
   

   Note: these 2 elements are identical except for the tags "Call" vs "Text" at the end".

3. The "Send" button:

   <div class="goog-button-base-content">Send</div>
   

What doesn't work:

tell application "Safari"
    do JavaScript "document.getElementsByClassName('ClassNameHere')[n].click();" in document 1 
    -- n is the element number, i.e. 0 or 1)
end tell

This returns missing value suggesting that the statement didn't return anything.

The problem:

• Some say click() will work in this setting, though it did not work as implemented above
• Others say JQuery is needed. However, I need to use Applescript/Safari and I've read that JQuery is not natively available in this setting.

And finally, the Question:

When answering its best to assume I know nothing about Javacript/JQuery (I'm OK with AppleScript). So the best answer would provide a sample code that I can cut/paste into Applescript's do JavaScript command.

1. If the above elements can be clicked via pure JavaScript (preferred), please provide a sample code.

2. If pure Javascript is not possible, and JQuery is needed, please provide an example that illustrates how JQuery can be implemented within AppleScript (is that was done in this answer?)

Any comments that help me understand will also be appreciated. Thanks in advance!

UPDATE: This returns missing value as well.

tell application "Safari"
do JavaScript "var nlDivs = document.getElementsByTagName('DIV'); for (var i = 0; i < nlDivs.length; i++)  {if (nlDivs[i].innerHTML === 'Send') nlDivs[i].click();" in document 1
end tell

Answer 1

You cannot use .click() on this div

But, you can create mouse event to simulate mouseClick --> dispatchEvent(new MouseEvent(down and up))

Example: to click on the "Save" button from the Google's Search Settings preferences page --> https://www.google.com/preferences?hl=en&prev=https://www.google.com/search?sclient%3Dpsy-ab%26client%3Dsafari%26rls%3Den%26q%3Dsomething%26oq%3Dsomething%26gs_l%3Dserp.3..0l4.6210.16721.0.17744.10.5.0.5.5.0.100.413.4j1.5.0....0...1c.1.64.psy-ab..0.10.410.3zydgL94jrw%26pbx%3D1%26bav%3Don.2,or.%26bvm%3Dbv.100742971,d.cWw%26biw%3D1871%26bih%3D1024

---

The HTML code is

<div id="form-buttons">
    <div role="button" class="goog-inline-block jfk-button jfk-button-action" tabindex="0" style="-webkit-user-select: none;">Save</div>
    <div role="button" class="goog-inline-block jfk-button jfk-button-standard" tabindex="0" style="-webkit-user-select: none;">Cancel</div>
</div>

"Save" is in the first <div role=

---

The script:

tell application "Safari"
    do JavaScript "var myDIV = document.getElementById('form-buttons').getElementsByTagName('div')[0];  myDIV.dispatchEvent(new MouseEvent('mousedown')); myDIV.dispatchEvent(new MouseEvent('mouseup'));" in document 1
end tell

Answer 2

I know JavaScript and I can tell you for sure JQuery isn't needed. Now, you haven't shown us exactly what you've tried, getElementsByClassName only works in certain browsers (IE9+). Otherwise, you should be able to use the following for the "Send" button, assuming it has a click event attached to it already. I've added my own div element, for the snippet. You can also collapse this to one line, JavaScript is flexible with white space...

  var nlDivs = document.getElementsByTagName('DIV');
  for (var i = 0; i < nlDivs.length; i++) {
    if (nlDivs[i].innerHTML === 'Send')
      nlDivs[i].click();
  }

<div class="goog-button-base-content" onclick="javascript:alert('test');">Send</div>