CasperJSでAjax通信完了後に画面を操作する

会社のブログでCasperJS を用いたコンテンツ内容の自動チェックの記事を書きました。その後、手作業で繰り返し行っていたMovable Typeに登録されているデータをチェックするコードも追加で書きました。（ちなみに、Data APIは使えない前提で読んでください。）

その際、MTの記事一覧画面はAjaxでデータを取得して表示しているようなので、どうしたものか、と考えました。.wait()で適当な時間待つ手もありますが、必ず通信が終わっているとは限りません。

このような場合は、例えば.waitFor()を使う方法が考えられます。一覧にデータが追加されているかどうかを監視し、追加が完了すると次の処理に移るようになります。サンプルコードを示します。

casper.test.begin("Entry ID:" + item["id"] + " Test", function (test) {
    casper.thenOpen(item["mtURL"], function () {
        this.waitFor(function check() {
            return this.evaluate(function () {
                return document.querySelectorAll("#entry-table tbody tr").length > 0;
            })
        });
    });

    // 省略

    casper.run(function () {
        test.done();
    });
});

これで、記事一覧が表示されたら目的のリンクをクリックして編集画面に遷移し、値が正しくセットされているかをテストすることができるようになりました。