Click and wait for the new page to load - javascript

I am trying to login to a webpage. I filled the username and the password and also clicked the login button as shown in the code below.
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);
}
);
});
After I have clicked the button, how to get to the new page. As soon as we log in, we are presented with a modal that has a class .modal. I am trying to wait before it loads. But every time the function fail is called with resp = 5000. Do not understand what it means. Is this the correct way to click the login button and then wait for the new page to load?

First, have you tried set to true the last parameter of fill()?
this.fill('.header-login-wrap', { // FILL THE USERNAME AND PASSWORD
email: username,
password: password
}, true); // Submit the form immediately
If this doesn't work, try to separating in steps, like casper.then() steps:
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');
}
);
});
All this assuming the selectors are the correct ones. I added capture() to log on images what the script is 'seeing'. For this you have to set the loadImages: to trueon pageSettings when creating the casper object.

Related

Signout Then Reload Page Automatic Sign In

On my multi-page HTML website (hosted by Firebase), I have a sign in/out button. Whenever I press sign out, the sign out button becomes the sign in button, thanks to my CSS, and the console reports "user not logged in".
However, when I reload the page or navigate to a different one (Ctrl+R and Ctrl+Shift+R make no difference), the sign out button reappears, and the console reports "user logged in", as if the server doesn't remember the user should be signed out, and not automatically signed in after the page reloads.
Here's what I use for sign in. Note that setButtons() is my code to change the CSS to show what button I need to. gLogin() is called when the Sign In button is pressed, and gLogout is called when the Sign Out button is pressed.
var signedIn;
var curUser = null;
function updateUser(user)
{
if (user) {
curUser = user;
signedIn = true;
console.log("User is logged in");
// User is signed in.
} else {
curUser = null;
signedIn = false;
console.log("User is not logged in");
// No user is signed in.
}
setButtons(signedIn);
}
firebase.auth().onAuthStateChanged(updateUser);
function gLogin() {
firebase.auth().signInWithPopup(gProvider).then(function (result) {
var token = result.credential.accessToken;
var user = result.user;
signedIn = true;
location.reload(true);
}).catch(function (error) {
console.log(error);
});
}
function gLogout() {
firebase.auth().signOut().then(function () {
signedIn = false;
updateUser(null);
}).catch(function (error) {
console.log(error);
});
}
I figured it out: Apparently, the issue was that I didn't set a default auth persistence state. From what I understand, this meant that persistence would have undocumented behavior. Here's what I added to each of my pages' scripts:
firebase.auth()
.setPersistence(firebase.auth.Auth.Persistence.SESSION)
.then(function() {
console.log("Persistence set");
}).catch(function(error) {
console.log(error);
});

how do I properly fire this function only if the previous has successfully been completed?

I am attempting to do a series of actions that has a user logout then redirect them to a home page, using parse in Javascript. Here is the logic:
jQuery(document).ready(function() {
$("#logout").on("click", function (e) {
//logout current user
if ( Parse.User.current() ) {
Parse.User.logOut();
// check if really logged out
if (Parse.User.current()) {
console.log("Failed to log out!");
} else {
// redirect page
window.location.replace("home-screen.html");
}
}
});
});
However most times when I logout, back in my parse server, the user session hasn't been destroyed. But I noticed when I remove the window.location action, the user session is destroyed every single time successfully.
So how do I edit my function to say "on click, log user out and ONLY if done successfully THEN redirect page?
Parse.User.logout() returns a promise. Redirect the user after the promise is resolved successfully.
jQuery(document).ready(function() {
$("#logout").on("click", function (e) {
//logout current user
if ( Parse.User.current() ) {
Parse.User.logOut()
.then(function () {
window.location.replace("home-screen.html");
});
}
});
});

Angular: always get popup blocker on create new tab after async call

I have following scenario:
User tries to login with wrong password
on failure I ask him if he wants to reset password
if user click 'OK' (pure confirm dialog) , I'll open new tab with some URL.
My problem is: I always get popup blocker because I generate window only after error callback. Here is relevant code login method:
$scope.login = function () {
$auth.login({
email: $scope.fields.email,
password: $scope.fields.password
})
.then(function () {
// ... login success
})
.catch(function () {
// login failed (my case)
if (confirm('ERROR: Invalid password, forgot Password? Click \'OK\' if you want to reset it')){
var url_ = 'http://meeter.me/#/forgot-pass/snaggs#gmail.com';
var myPopup = window.open ('', '_blank');
myPopup.location = url_;
if (myPopup && myPopup.focus) {
myPopup.focus();
}
}// if
});
};
If I move var myPopup = window.open ('', '_blank'); to next line under $scope.login = function () it will work but it will open new empty tab.
I want to open new tab only when get error on login
I use satellizer
Please help,
Plunker Demo
In demo i use single $timeout to simulate async call
I don't think it is going to be possible to open a new window using window.open if it is invoked asynchronously. Without user invocation, the call stack is always going to identify that window.open is triggered asynchly and going to block it. Maybe an option to show a new button if login is failed and let that button open up a new window?
http://plnkr.co/edit/QGfnxH484OdTvaaOvMaE?p=preview
<button ng-click="init();">press me</button><br />
<span ng-show="resetPwd" >
Login Failed!! <button ng-click="reset()">Reset Password</button>
</span>
$scope.init = function() {
$timeout(function() {
$scope.resetPwd = true;
}, 2000);
}

Angular to submit second form after first form validation/promise

I'm submitting a form with an update() function in Angular, which then authenticates, returns a promise, and then submits a second form if successful.
The problem is, the second form won't submit with the document.getElementById(elementID).submit(); method. It will, however, submit with document.getElementById(elementID).click(); but only on non-touch devices of course.
Bottom line - why won't submit() work?
Here is a jsFiddle with a reduced and simplified version: http://jsfiddle.net/jimcamut/xos805gk/
Here is my function that handles the form submissions in its full version.
$scope.update = function(user) {
if ($scope.earlyUser.$valid) {
$scope.master = angular.copy(user);
console.log("Form submitted on front end");
// This integrates ParseJS and submits the data to a database - all good here, except after the promise
var parseUser = new Parse.Object("LaunchUser");
parseUser.setACL(new Parse.ACL());
parseUser.save({
name: $scope.master.name,
email: $scope.master.email,
zipcode: $scope.master.zipcode
},{
error: function(model, error) {
console.log("error is...");
console.log(error);
}
// Returns a promise
}).then(function(object) {
// Problem area here when attempting to submit second form...
document.getElementById('mc-embedded-subscribe').submit();
$scope.reset();
});
} else {
alert("Please correct the red form fields.");
}
};
element with id='mc-embedded-subscribe' is an input, but you need to "submit()" a form.
this line
document.getElementById('mc-embedded-subscribe').submit();
should be changed for
document.getElementById('mc-embedded-subscribe-form').submit();
Here you have a new fiddle with this changes, and it works!
http://jsfiddle.net/kx8dn8wc/

submit search query if conditions are met

How would I go about integrating these two functions together so that when submitting the search form, it will first check the http get response, then depending on whether there was an error or not, either submit the form, or display an error message?
All that I've tried has either made the form not work at all, or not take into account the 'http.get function'.
var http = require("http");
var url = 'http://examplepage.com/';
search.submit(function (event) { // submit search query function
if (searchBox.val().length < 2) {
searchBox.focus();
event.preventDefault();
}
});
http.get(url, function (res) {
res.resume();
// successful - so submit search query
}).on('error', function () {
// unsuccessful - display error message
});
You should probably subscribe on click event for you button that triggers search, the go check the url and inside success handler do
Sample code of Click handler
http.get(url, function (res) {
// successful
if (searchBox.val().length < 2) {
$('your form selector').submit();
}
}).on('error', function () {
// unsuccessful - display error message
});

Categories