Casperjs google auth popup

时间:2016-11-10 22:46:00

标签: javascript reactjs popup phantomjs casperjs

问题:我正在处理将登录到应用程序的Casperjs脚本。该应用程序使用谷歌认证。我正在尝试模拟用户登录的方式,因此访问该网站后,用户首先点击“使用Google登录”按钮,该按钮会打开一个新标签,要求提供Google凭据。我有这些部分工作...我被卡住的地方是当用户提交谷歌身份验证表单时,期望是登录选项卡关闭,原始窗口收到这些凭据并允许用户进入应用程序。如果我在所有这些事件之后拍摄屏幕截图,我仍然保留在原始登录页面上,而不是访问应用程序。我的代码发布在下面:

var casper = require('casper').create({
    verbose: true,
    logLevel: 'debug',
    waitTimeout: 5000,
    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4'
});

casper.capturePath = function(name) {
    return this.capture('./captures/' + name)
}

casper.on('remote.message', function(msg) {
   this.echo('remote message caught: ' + msg);
});

casper.on("page.error", function(msg, trace) {
    this.echo("Page Error: " + msg, "ERROR");
});

casper.on('popup.created', function() {
    this.echo("url popup created : " + this.getCurrentUrl(),"INFO");
});

casper.on('popup.loaded', function() {
    this.echo("url popup loaded : " + this.getCurrentUrl(),"INFO");
});

casper
    .start('<url>', function() {
        this
            .then(function() {
                this.clickLabel('Sign in with Google', 'button');
            })
            .waitForPopup(/accounts\.google/)
            .withPopup(/accounts\.google/, function(popup) {
                this
                    .fillSelectors('form#gaia_loginform', { '#Email': '<username>' }, false)
                    .thenClick('input#next')
                    .wait(500, function() {
                        this.waitForSelector('#Passwd',
                            function success() {
                                this
                                    .echo('success', 'INFO')
                                    .fillSelectors('form#gaia_loginform', { 'input[name=Passwd]': '<password>' }, false)
                                    .capturePath('beforeSubmit.png')
                                    .thenClick('input#signIn')
                                    .wait(500, function() {
                                        this.capturePath('afterSubmit.png');
                                    })
                                },
                                function fail() {
                                    this.echo('failure');
                                })
                    })
            })
    })
    .then(function() {
        this.waitForSelector('.dashboard-container',
            function success() {
                this
                    .echo('logged in!', 'INFO')
                    .capturePath('in.png')
            },
            function fail() {
                this
                    .capturePath('failed.png')
                    .echo('failed to login', 'ERROR');
            })
    })
.run();

当我到达this.waitForSelector('.dashboard-container',行时,脚本将超时,因为它无法找到我告诉它抓取的选择器...大概是因为它没有真正登录用户。 (该应用程序也是一个重要的React应用程序)

我已经在这个上旋转了一段时间,任何见解都会非常感激!

1 个答案:

答案 0 :(得分:1)

我认为它现在有效。问题是,您在主页上尝试this.waitForSelector('.dashboard-container',实际上是在弹出窗口之外。

var casper = require('casper').create({
    verbose: true,
    logLevel: 'debug',
    waitTimeout: 5000,
    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4',
    viewportSize:{width: 1600, height: 900}
});
casper.capturePath = function(name) {
    return this.capture('./captures/' + name)
}

casper.on('remote.message', function(msg) {
   this.echo('remote message caught: ' + msg);
});

casper.on("page.error", function(msg, trace) {
    this.echo("Page Error: " + msg, "ERROR");
});

casper.on('popup.created', function(newPage) {
this.echo("url popup created : " + this.getCurrentUrl(),"INFO");
newPage.viewportSize={width:1600,height:900}
});

casper.on('error', function(msg) {
this.echo('Error: ' + msg,"ERROR");
});// You have missed this callback!

casper.on('popup.loaded', function() {
    this.echo("url popup loaded : " + this.getCurrentUrl(),"INFO");
});

casper
    .start('http://domu-test-2/node/10', function() {
        this
            .wait(0,function() {// 'then(function' won't work as expected in any callback function.
                this.clickLabel('Sign in with Google', 'button');
            })
            .waitForPopup(/accounts\.google/)
            .withPopup(/accounts\.google/, function(popup) { 
                this
                    .fillSelectors('form#gaia_loginform', { '#Email': 'luxadm1' }, false)
                    .thenClick('input#next')
                    .wait(700, function() {
                        this.waitForSelector('#Passwd',
                            function success() {
                                this
                                    .echo('success', 'INFO')
                                    .fillSelectors('form#gaia_loginform', { 'input[name=Passwd]': '<pass_here>' }, false)
                                    .capturePath('beforeSubmit.png')
                                    .thenClick('input#signIn')
                                    .wait(300, function() {// less than previous '.wait(700, function() {' -- otherwise will be buggy
                                        this.capturePath('afterSubmit.png');
                                    })
                                },
                                function fail() {
                                    this.echo('failure');
                                })
                    })
            })
    })
    .then(function(){//here outside of the popup!!
        this.withPopup(/accounts\.google/, function(popup){// we need to be here until the previous '.withPopup' function will switch to 'about:blank', otherwise we will get an error: 'CasperError: Couldn't find popup with url matching pattern'
        this
       /*.wait(3000,*/ .waitForSelector('div.sPxS6d',//'.dashboard-container' -- i've not seen such selector there  
            function success() {
                this
                    .echo('logged in!', 'INFO')
                    .capturePath('in.png')
            },
            function fail() {
                this
                    .capturePath('failed.png')
                    .echo('failed to login', 'ERROR');
            })
    });})
.run();