javascript - 如何使用 CasperJS 提交列表中的项目

Question

我正在尝试在网格中进行迭代，其中每行都有一个操作链接按钮。我需要单击此按钮并返回网格并单击下一行的按钮。

查看 CasperJS 脚本:

for(var i=1; i<lines.length; i++) {

    var element = this.getElementInfo(x('//*[@id="elx"]/tbody/tr[' + i +']/td[1]'));
    var item = x('//*[@id="gdvConsulta"]/tbody/tr[' + i +']/td[3]/a');

    var model = {
        'custom': element.text,
        'item': item.text
    };

    // Click on item
    casper.click(item);
    this.waitForSelector(x('//*[@id="grid"]'),
        function pass () {
            utils.dump('ok');
            var backbutton = x('//*[@id="back"]/a');

            casper.click(backbutton);
        },
        function fail () {
            utils.dump('error');
        }
    );

    utils.dump('done line');
}

注意:在单击我的第一次循环迭代之前，已为所有行打印消息“done line”。

如何在不进行下一次迭代的情况下创建真正的waitForSelector()？

Answer 1

您不恰本地混合了同步和异步函数。您可以使用循环，因为您事先知道迭代次数，但问题可能是您在第一个 waitForSelector() 步骤之前单击每个 item已执行。

所有 then*() 和 wait*() 函数都是异步步骤函数。通过调用它们，您可以安排在当前步骤之后执行的步骤。您需要将同步代码包装在如下步骤中:

for(var i=1; i<lines.length; i++) {
    (function(i){
        casper.then(function(){
            var element = this.getElementInfo(x('//*[@id="elx"]/tbody/tr[' + i +']/td[1]'));
            var item = x('//*[@id="gdvConsulta"]/tbody/tr[' + i +']/td[3]/a');

            // Click on item
            casper.click(item);
        });


        casper.waitForSelector(x('//*[@id="grid"]'),
            function pass () {
                utils.dump('ok');
                var backbutton = x('//*[@id="back"]/a');

                casper.click(backbutton);
                utils.dump('done line');
            },
            function fail () {
                utils.dump('error');
            }
        );
    })(i);
}

请注意，您需要将循环中的 i 变量括起来，因为循环内部是异步执行的，并且 i 引用了all 迭代将指向最后一个可能的 i。在这里查看更多:JavaScript closure inside loops – simple practical example