单击并等待新页面加载答案

【问题标题】：Click and wait for the new page to load单击并等待新页面加载
【发布时间】：2018-03-16 12:32:23
【问题描述】：

我正在尝试登录网页。我填写了用户名和密码，并点击了登录按钮，如下面的代码所示。

casper.start(startURL, function () {
        this.fill('.header-login-wrap', { // FILL THE USERNAME AND PASSWORD
            email: username,
            password: password
        }, false); // Do not submit the form immediately

        this.click('.btn-login'); // CLICK THE LOGIN BUTTON

        this.waitForSelector('.modal',
            function pass() {
                console.log('pass');
            },
            function fail(resp) {
                console.log('fail', resp);
            }
        );
    });

点击按钮后，如何进入新页面。一旦我们登录，我们就会看到一个modal，它有一个类.modal。我试图在它加载之前等待。但是每次函数fail 被resp = 5000 调用。不明白是什么意思。这是单击登录按钮然后等待新页面加载的正确方法吗？

【问题讨论】：

在我看来，它已超过超时，您是否尝试将其设置为超过 5 秒？
@holmicz 尝试增加到 20 秒。现在得到fail 20000 [info] [phantom] Done 3 steps in 30241ms [debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=true [debug] [phantom] url changed to "about:blank"
您的目标页面可能没有加载——也许他们禁止了机器人。您需要在脚本中进行某种形式的损害控制以涵盖此类情况：记录错误、制作屏幕截图。
@Vaviloff 填写用户名和密码，点击登录按钮，然后等待选择器的方法是否正确？我该怎么做才能截屏、记录错误？
@Vaviloff 我截图了，我可以看到登录页面已经填写了用户名和密码详细信息，但仅此而已。

标签： javascript dom phantomjs casperjs

【解决方案1】：

首先，你有没有试过将true的最后一个参数设置为fill()？

this.fill('.header-login-wrap', { // FILL THE USERNAME AND PASSWORD
        email: username,
        password: password
    }, true); // Submit the form immediately

如果这不起作用，请尝试分步分离，例如casper.then() 步骤：

casper.start(startURL, function () {
        this.fill('.header-login-wrap', { // FILL THE USERNAME AND PASSWORD
            email: username,
            password: password
        }, false); // Do not submit the form immediately
});
casper.then(function(){
    this.click('.btn-login'); // CLICK THE LOGIN BUTTON
});

casper.then(function(){
    this.waitForSelector('.modal', function(){
                this.capture('after_login.png');
                this.echo('pass');
            },function() {
                this.capture('after_login_fail.png');
                this.echo('fail');
            }
        );
});

所有这些都假设选择器是正确的。我添加了capture() 以登录图像，脚本正在“看到”什么。为此，您必须在创建 casper 对象时将 loadImages: 设置为 trueon pageSettings。

【讨论】：