CODEWITHSUNDEEP
javascriptnode.jswebviewelectron
andyderuyter
andyderuyter

Reputation: 1111

Click on element in Electron webview

I want to click an element (button) several times in a remote website loaded through webview in Electron.

The following works when I enter it in the console (via inspect element):

a = setInterval( function(){
    var elem = document.getElementsByClassName("myclass");
    elem[0].click()
},1000)

It doesn't when I use it in Electron main script:

window.webContents.executeJavaScript('a = setInterval( function(){ var elem = document.getElementsByClassName("myclass"); elem[0].click() },1000)', true);

I get an error:

Uncaught TypeError: Cannot read property 'click' of undefined at :1:110

I also tried the scipt preloaded in webview tag, but no luck.

What am I missing, or doing wrong?

chromiumVersion: "58.0.3029.110"
electronVersion: "1.7.9"
nodeVersion:"7.9.0"

EDIT

Testing with Google.com and the speech icon in the searchbar:

var element =  document.getElementsByClassName('gsst_a');
if (typeof(element) != 'undefined' && element != null) {
  console.log('yep, element is found');
  console.log(element);
  console.log(element[0]);
  a = setInterval(
    function(){
      var elem = document.getElementsByClassName("gsst_a");
      elem[0].click()
      },1000)
} else {
  console.log('nope, element is not found');
}

This clicks the icon every 1 second in Chrome when entered in console.

When I have my webview set to Google.com and have the following line, it still finds the element, but gives the error mentioned earlier again:

window.webContents.executeJavaScript('var element=document.getElementsByClassName("gsst_a");void 0!==element&&null!=element?(console.log("yep, element is found"),console.log(element),console.log(element[0]),a=setInterval(function(){document.getElementsByClassName("gsst_a")[0].click()},1e3)):console.log("nope, element is not found");', true);

console.log(element) gives: HTMLCollection(0)

console.log(element[0]) gives: undefined

Why can I enter the js in my normal browser, but not in Electron webview?

Upvotes: 3

Views: 6400

Answers (1)

andyderuyter
andyderuyter

Reputation: 1111

To answer my own question.

The event's referring to the web page in the BrowserWindow, not the webview within that. So the element doesn't exist in the scope I was looking in, and I needed to do something similar within the BrowserWindow.

Code:

<html>
<head>
  <style type="text/css">
    * { margin: 0; }
    #browserGoogle { height: 100%; }
  </style>
</head>
<body>
  <webview id="browserGoogle" src="https://google.com"></webview>
  <script>
    const browserView = document.getElementById('browserGoogle')
    browserView.addEventListener('dom-ready', () => {
      const browser = browserView.getWebContents()
      browser.setDevToolsWebContents(devtoolsView.getWebContents())
      browser.webContents.executeJavaScript('var element=document.getElementsByClassName("gsst_a");void 0!==element&&null!=element?(console.log("yep, element is found"),console.log(element),console.log(element[0]),a=setInterval(function(){document.getElementsByClassName("gsst_a")[0].click()},1e3)):console.log("nope, element is not found");', true);
    })
  </script>
</body>
</html>

Upvotes: 3

Related Questions