Python Selenium .click() Fails to Trigger Javascript Event

[Adam Starrh]

I have a button:

<button id="saveBtn" data-dismiss="modal" class="btn btn-primary save">Save</button>

When clicked, it induces an AJAX call and modifies the page:

  $('.tab-pane').on('click', 'button.save', function() {

      swot_type = $('#typeValue').val();
      label = $('#label').val();
      details = $('#details').val();

      $.ajax({
          url: '/add_swot_entry/',
          type: "POST",
          data: {
              'type': swot_type,
              'label': label,
              'details': details
          },

          dataType: 'json',
          success: function (data) {
              $("#strength-group").append(
                  '<li id='
                  + data.id +
                  ' class="list-group-item item-display">'
                  + data.label +
                  '</li>'
  );}});});

It also hides the bootstrap modal via the the data-dismiss hook.

This all works just fine, every time, except when I try to operate it with Selenium:

browser.find_element_by_id("saveBtn").click()

While the modal will still close every time, the custom Javascript will only execute every fourth or fifth time. Most of the time the result is an unchanged page and the server is not communicated with.

I've tried implementing a wait:

 wait.until(EC.element_to_be_clickable((By.ID, elm)))

But it doesn't seem to help. I've just upgraded to the most recent version of Selenium (3.3.3) and it's still having trouble. I am using Chrome on Windows 10. How should I proceed to troubleshoot?

[Aurel Branzeanu]

The same with `selenium-webdriver` Ruby gem version 3.6.0, Capybara and Chromedriver v. 2.33 - clicking on a button in a modal doesn't file Due.js bound `v-on:click` events.

When the application is run manually, everything's working OK.

[David]

Have you tried using JavascriptExecutor to "click" element using javascript? That tends to be a good workaround.

[Aurel Branzeanu]

Yes, I have come to click the button with execute_script or evaluate_script - when using the bullhead Chromedriver I see that the button is indeed clicked, but the event isn't fired.

[David]

Then I wonder if that's an automation/Selenium quirk/bug or if the site/app doesn't work with javascript clicks either.

One way to test/confirm this is to execute that JS click code outside of Selenium, for example via browser developer/error console to execute the JS. If running from there doesn't trigger the event, then seems there's something quirky with the event or that it's designed not to fire off JS click events from code. And if that happened, I would consult the site/app developers to see what you can do about it as workaround. I recall at previous workplace there was some similar issue when the click behavior was somehow managed by "CSS" spec rather than JS, so even the faked JS click event didn't trigger what we wanted, so we had to get help from the web developer to get soemthing working on the automation side.

[Aurel Branzeanu]

Yep, David, you were right - I have run it in browser's debugger and found the JS events were fired, but failing with errors. The problem was the events contained a http request to the server which was failing on Due because of csrf protection disabled in Rails test environment. Have enabled csrf - and now everything; s working.

[John Mcmannus]

Hi Aurel,

I am experiencing a near identical issue as the one you are describing. I can manually click a submit button and get to the proper page, but when I try to do it with driver.find_element_by_xpath('//*[@id="request_0"]').click(), the next page loads, but I get a generic error message stating that a system error has been encountered.

Below is the ajax script:

var csrfParamName = "_csrf";

var csrfHeaderName = $("meta[name='_csrf_header']").attr("content");

var csrfValue = "cbceab72-b03f-4a52-8f36-e933fb41417b";

function addCSRFToForms(){

var forms = document.getElementsByTagName("form");

for(var i=0; i<forms.length; i++){

var csrfHidden = document.createElement("input");

csrfHidden.type = "hidden";

csrfHidden.name = csrfParamName;

csrfHidden.value = csrfValue;

forms[i].appendChild(csrfHidden);

}

}

$(document).ready(function(){

$(document).ajaxSend(function(e, xhr, options) {

//alert("ajax");

xhr.setRequestHeader(csrfHeaderName, csrfValue);

});

addCSRFToForms();

});

When you said that you enabled csrf, would you please tell me how you did that? Did you pass an argument into the driver or is it something you set in Chrome before you ran your code?

Thank you very much for your time!