等到下拉列表元素在 CasperJS 中可见

Question

我有这个下拉列表：

<select name="date" class="form-control" on-change:Calendar.submitFilterForm();">
    <option value="2015-09-15">Tue 2015-09-15</option>
    <option value="2015-09-16">Wed 2015-09-16</option>
    <option value="2015-09-17">Thu 2015-09-17</option> 
    <option value="2015-09-18">Fri 2015-09-18</option>
    <option value="2015-09-19">Sat 2015-09-19</option>
    <option value="2015-09-20">Sun 2015-09-20</option>
    <option value="2015-09-21">Mon 2015-09-21</option>
    <option value="2015-09-22">Tue 2015-09-22</option>
</select>

每天早上 00:00（或几秒钟后），上面的下拉列表会更新为新的（下一个）日期，例如，<option value="2015-09-23">Wed 2015-09-23</option> 将被添加，<option value="2015-09-15">Tue 2015-09-15</option> 将消失。

然后，我想单击该下拉列表选项，该选项一出现就立即添加。有可能吗？

现在我使用：

casper.thenEvaluate(function(){
    var form = document.querySelector('.form-control');
    form.selectedIndex = 7; //7 equals the last value currently visible.
    $(form).change();
});

它有效，但我应该如何处理make casperjs wait until the options is visible and then directly click on it？ 也许我可以创建一个变量var ClickValue = "2015-09-23" 或类似的东西？

Answer 1

CasperJS 不适合安排长时间运行的任务，因为底层浏览器（PhantomJS 或 Slimer.js）可能会遇到内存问题或以其他方式失败。因此，您应该编写一个简短的运行脚本，该脚本只等待很短的时间，直到元素出现。您可以通过操作系统（Linux 上的 cron 或 Windows 上的 at）安排在午夜之前执行此脚本。

元素通过 JavaScript 出现

如果选择字段由 JavaScript 更新，那么您可以简单地使用“长时间”运行的waitFor()：

casper.then(function(){
    var lastDate = this.getElementAttribute(".form-control :last-child", "value");
    this.waitFor(function(){
        return this.getElementAttribute(".form-control :last-child", "value") !== lastDate;
    }, null, null, 600000); // 10 minutes
}).thenEvaluate(function(){
    var form = document.querySelector('.form-control');
    form.selectedIndex = 7; //7 equals the last value currently visible.
    $(form).change();
});

需要重新加载页面

如果您只会在重新加载页面时看到添加的选项，那么每次检查都需要casper.reload() 页面。

casper.then(function(){
    var lastDate = this.getElementAttribute(".form-control :last-child", "value");

    function checkReload(){
        var curDate = this.getElementAttribute(".form-control :last-child", "value");
        if (lastDate !== curDate) { // TODO: add timeout handling here
            return; // finished
        }

        this.reload();
        this.wait(1000, checkReload); // check again in a second
    }
    this.then(checkReload);
}).thenEvaluate(function(){
    var form = document.querySelector('.form-control');
    form.selectedIndex = 7; //7 equals the last value currently visible.
    $(form).change();
});

这将无限期运行，因此您应该添加超时处理。

无需与预先计算的日期进行比较

上述解决方案通过将先前的选项值与当前选项值进行比较来工作。这并不完全可靠，因为如果发生错误并且脚本在新选项出现时启动，那么脚本将再运行 24 小时。您还可以通过创建预期的

来更改它以直接计算预期的选项值

var d = new Date(Date.now()+(1000 * 60 * 60 * 24 * 7)); // seven days later
var expectedValue = ""+d.getFullYear()
        +"-"+zeroFill(d.getMonth()+1, 2)
        +"-"+zeroFill(d.getDate(), 2);

expectedValue 将替换之前 sn-ps 中的 lastDate，并且不要忘记将比较从 !== 翻转到 ===。
zeroFill() 取自 here。