PhantomJs click a flash button

Question

I am trying to click at flash elements using a forked phantomjs 1.10.0 version and casperjs 1.0.2.
My environment is this Vagrant image which ships with a forked phantomJS version.

The flash support works quite well however simulating clicks doesn't.
For the following showcase I took a flash button from the adobe sample page and put it into a jsfiddle.

After receiving a click event the button label changes from "Click me" to "Ouch".

So the expected result of the following code would be:

However the result is

CasperJS code:

var casper = require('casper').create({
  pageSettings: {
    loadPlugins: true
  }
});

casper.start("http://fiddle.jshell.net/Da3q7/show/light/");

casper.wait(1000);

// CasperJS click
casper.then(function () {
  this.echo("Click", "INFO");
  this.click('#section04example1');
});

casper.wait(1000);

casper.then(function () {
  this.echo("Screenshot", "INFO");
  this.captureSelector('button-demo.png', '#section04example1');
  this.exit();
});

casper.run();

Answer 1

CasperJS invokes only javascript events which won't trigger Flash mouse events for security reasons.
However the PhantomJS sendEvent method invokes real browser events.

The next problem was that the element has to be visible in the current viewport which requires scolling in most cases.

In the end I wrote a small CasperJS clickRelativeextension:

casper.clickRelative = function (selector, offset) {
  "use strict";

  var docSize = casper.evaluate(function () {
    return {width: document.width, height: document.height};
  });
  var position = this.getElementBounds(selector);
  if (position !== null) {

    var left = position.left + (offset.left || 0);
    var scrollX = this.page.viewportSize.width > docSize.width ? 0 :
      Math.min(left, docSize.width - this.page.viewportSize.width);

    var top = position.top + (offset.top || 0);
    var scrollY = this.page.viewportSize.height > docSize.height ? 0 :
      Math.min(top, docSize.height - this.page.viewportSize.height);

    var scrollOrig = {left: this.page.scrollPosition.left, top: this.page.scrollPosition.top};

    this.page.scrollPosition = {left: scrollX, top: scrollY};

    this.wait(10);
    this.then(function () {
      this.page.sendEvent("click", left - scrollX, top - scrollY, 'left');
    });
    this.wait(10);
    this.then(function () {
      this.page.scrollPosition = scrollOrig;
    });
  }
};

So now my script is able to click the button and generates the following screenshot of the flash button:

var casper = require('casper').create({
  pageSettings: {
    loadPlugins: true
  }
});

casper.start("http://www.adobe.com/devnet/flash/quickstart/button_component_as3.edu.html");

casper.wait(1000);

casper.then(function () {
  this.echo("Click", "INFO");
  // The button has a margin so we have to add a little offset to the
  // click position:
  this.clickRelative('#section04example1', {left: 30, top: 15});
});

casper.wait(1000);

casper.then(function () {
  this.echo("Screenshot", "INFO");
  this.captureSelector('button-demo.png', '#section04example1');
  this.exit();
});

casper.run();