PhantomJs 单击一个闪光按钮答案

【问题标题】：PhantomJs click a flash buttonPhantomJs 单击一个闪光按钮
【发布时间】：2013-07-04 20:32:37
【问题描述】：

我正在尝试使用分叉的phantomjs 1.10.0 版本和casperjs 1.0.2 来点击flash 元素。
我的环境是这个 Vagrant image 附带一个forked phantomJS version。

Flash 支持效果很好，但模拟点击却不行。
对于下面的展示，我从adobe sample page 中取出一个闪光按钮并将其放入 jsfiddle。

收到点击事件后，按钮标签从“点击我”变为“哎哟”。

所以以下代码的预期结果将是：

但是结果是

CasperJS 代码：

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();

【问题讨论】：

标签： flash phantomjs casperjs javascript flash phantomjs casperjs

【解决方案1】：

出于安全原因，CasperJS 仅调用不会触发 Flash 鼠标事件的 javascript 事件。
但是 PhantomJS sendEvent 方法会调用真实的浏览器事件。

下一个问题是元素必须在当前视口中可见，这在大多数情况下需要 scolling。

最后我写了一个小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;
    });
  }
};

所以现在我的脚本能够点击按钮并生成以下 Flash 按钮的屏幕截图：

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();

【讨论】：