单击一个按钮以使用 CasperJS 下载文件

Question

我想编写单元测试以通过使用 casperJS 单击表单按钮来下载文件。我尝试使用 document.getElementsByTagName 来访问按钮并以 JavaScript 的方式单击它。但我收到一条错误消息：

TypeError: 'undefined' is not a function (evaluating 'inputs[1].click()')

没有通过测试的代码段：

casper.then(function() {
    var inputs = document.getElementsByTagName('input');
    inputs[1].click();
});

当我尝试从浏览器的控制台执行相同的代码时，单击按钮并弹出下载窗口。

我最初尝试使用 casperJS 中的 assertExists 函数检查按钮是否存在。断言通过，表明按钮存在。此外，inputs 数组有 2 个元素，一个是 CSRF 令牌的隐藏输入（我使用的是 Django），另一个是我要单击的按钮。

Answer 1

点击

PhantomJS（以及扩展的 CasperJS）有两个上下文。只有页面上下文 (evaluate()) 可以访问 DOM。另一个问题是大多数元素在 PhantomJS 中没有实现element.click() 函数，所以你需要使用另一种类型的点击。

CasperJS 提供了一个casper.click() 函数，它几乎适用于所有情况。它可以通过 CSS 选择器或 XPath 表达式选择您想要单击的元素。由于您要单击第二个输入，因此无法定义执行此操作的通用 CSS 选择器。在这种情况下，必须使用 XPath 表达式。 CasperJS 提供了一个 XPath 实用程序：

var x = require('casper').selectXPath;
...
casper.then(function(){
    this.click(x("(//input)[2]"));
});

请注意，在 XPath 表达式和 CSS 选择器中计数从 1 开始。

---

正在下载

当您单击某物时，PhantomJS（以及扩展名为 CasperJS）不会触发文件下载。您需要自己构建和发送请求。

有很多方法可以做到这一点。 Here 就是一个例子。实际上，更好的方法是使用原生支持文件下载的 PhantomJS fork 作为新事件的一部分。详情请见this answer。