Can my WebDriver script catch a event from the webpage?

Question

I would like my WebDriver script to execute some test after the webpage fires specific event. Is this possible?

In the WebDriver script there would be some kind of event listener:

document.addEventListener("hello", function(){
    console.log("doing tests");
});

That would run when the webpage would executes:

var ev = new Event("hello");
document.dispatchEvent(ev);

Is this possible the other way around, so I could fire an event from WebDriver to the webpage?

Answer 1

Yes it's possible to listen to an event.

This example listens to the "change" event on a file input:

from selenium import webdriver
driver = webdriver.Firefox()
driver.get("http://fiddle.jshell.net/lovlka/N4Jxk/show/")

driver.switch_to_frame(0)
driver.set_script_timeout(30)

# find the input
input_elem = driver.find_element_by_css_selector("#uploadFile")

# add an event listener on an element
driver.execute_script("""\
  arguments[0].addEventListener("change", function onchange() {
    this.removeEventListener("change", onchange);
    window.__file__ = true;
  });
  window.__file__ = false;
  """, input_elem)

# upload the file
input_elem.send_keys(r"C:\text.txt")

# waits for the file
driver.execute_async_script("""\
  var callback = arguments[0];
  (function fn(){
    if(window.__file__)
      return callback();
    setTimeout(fn, 60);
  })();
  """)

It's also possible to generate an event.

This example simulates an HTML5 text drop:

from selenium import webdriver
driver = webdriver.Firefox()
driver.get("http://html5demos.com/drag-anything")

drop_element = driver.find_element_by_id("drop")
drop_format = "text/message"
drop_text = "my text"

driver.execute_script("""\
  var tgt = arguments[0], format = arguments[1], data = arguments[2],
  dataTransfer = {
    dropEffect: '',
    effectAllowed: 'all',
    files: [ ],
    items: { format: data },
    types: [ format ],
    getData: function (format) { return data; },
    clearData: function (format) { }
  };
  var emit = function (event, target) {
    var evt = document.createEvent('Event');
    evt.initEvent(event, true, false);
    evt.dataTransfer = dataTransfer;
    target.dispatchEvent(evt);
  };
  emit('dragenter', tgt);
  emit('dragover', tgt);
  emit('drop', tgt);
  """, drop_element, drop_format, drop_text)