0

I'm developing a Chrome Extension that automates click. My extension worked on Multi-Page Application. It can click the buttons on the website. But I'm having a problem with this specific website which is a Single Page Application.

My extension can't trigger button click using this JavaScript

function clickButton(){
var submit =  document.getElementsByClassName(".class");
submit.click();
}

My Question is, how to trigger button click on a single page application? Because it seems like using .click() isn't working

Further information

The way my extension works is that I click on a search button, it shows me result. If there is a result, I do specific things. But if result is empty, I go back to previous page (search page) and then hit the search button again. And my extension can't click the search button nor back button. My assumption is, when I click the button using .click(), the web doesn't request that specific HTML page to show. Am I wrong?

Another Info About This Site

So this web is a single page application. After I login to this site, it brings me to https://sample.com/page1 -which is a home. Then I go to the search page (the URL is still the same but it shows a different layout, which is search page). On the search page, I input the search parameters, then hit the search button (the URL is still the same but it shows the different layout, which is search results). So I guess the way these web works is every time I click on a certain page, it requests page layout using history.pushState -i guess. So I'm wondering if there's a way to manipulate this history.pushState? For example, instead of clicking the back button, can I just go straight to the desired page?

Nmk
  • 1,281
  • 2
  • 14
  • 25
Jugs
  • 57
  • 5
  • 2
    It's hard to answer without seeing the site's code, but even in the 3 lines of code you provided there are at least 2 problems: 1, getElementsByClassName returns an array-like object where .click() won't work. 2, getElementsByClassName expects a class name (without the .) and you seem to be calling it with a selector (with .) https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName – Gergely Szabo Feb 19 '20 at 23:29
  • You can try [this approach](https://stackoverflow.com/a/43331339/3930351) – Iván Nokonoko Feb 20 '20 at 11:05
  • I've tried it. But same result. It won't click the button. I'm guessing, to prevent from any automation tools, this web won't allow any click that comes from any functions to click through the tags. – Jugs Feb 20 '20 at 20:15

1 Answers1

0

document.getElementsByClassName(".class") returns an array, so array.onclick() will not work.

To trigger html event, not only click:

function trigger(elm, type) {
  if (elm) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent(type, true, true);
    elm.dispatchEvent(evt);
  }
}

In your case, I think you want:

trigger(document.querySelector('.class'), 'click')
Darius
  • 1,060
  • 2
  • 6
  • 17
  • I think I've tried similar code https://pastebin.com/VvmK5UXr I even added third params for X and Y pos. But the button still can't be clicked. FYI, I also tried to click the search button using iMacros. The button was clicked, but it's still on search page when it was supposed to be on result page. – Jugs Feb 20 '20 at 00:45