I am stuck here for too long. A web application throws open a modal after the successful sign-in. After you select a particular option in the modal, you are able to proceed further with the web application. I am able to enter username and password, click the button but unable to detect the modal. I have also tried waiting indefinitely but no help.
Here is the code that I am using to sign-in into the website.
page.open('https://example.com/login/auth', function (status) {
console.log("Status: " + status);
page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () {
page.evaluate(function () {
$('[name="email"]').val('username');
$('[name="password"]').val('password');
$('.btn-login').click();
});
do {
phantom.page.sendEvent('mousemove');
console.log('^^')
} while (page.loading)
setInterval(function () {
page.evaluate(function () { console.log($('.modal-header').text(), " .... ") });
page.render('after-login.png')
},5000)
});
page.onConsoleMessage = function (msg) {
console.log(msg);
};
page.onLoadStarted = function () {
loadInProgress = true;
console.log("load started");
};
page.onLoadFinished = function () {
loadInProgress = false;
console.log("load finished");
};
The statement $(.modal-header).text() always returns empty. Is it not possible to interact with modal using phantomJS?
Related
I'm currently working with inAppBrowser to open an external web hosted app, I used executeScript and loaded external js to interact with the DOM, is there a way to fire the callback when I click on the submit button?
or a way to access the dom without executeScript?
What I need to do is fire the callback on click event because I need to pass the localStorage before changing the domain.
index.js
onDeviceReady: function() {
if (navigator.connection.type == Connection.NONE) {
navigator.notification.alert('An internet connection is required to continue');
} else {
var options = "location=no,hidden=no";
var ref = cordova.InAppBrowser.open('extSite', '_blank', options);
ref.addEventListener('loadstop', function(event){
console.log("il link e' " +event.url);
if(event.url.startsWith("extSite")){
ref.executeScript({
file:'extfile'
});
}
});
}
}
extfile.js
document.getElementById('LoginButton').addEventListener('click', function(){
if (document.getElementsByName("RememberLogin")[0].checked==true){
var usr = document.getElementsByName('Username')[0].value;
var psw = document.getElementsByName('Password')[0].value;
if ((usr!="") && (psw!="")){
localStorage.setItem('Username', usr);
localStorage.setItem('Password', psw);
alert('data saved');
}
}
else {
localStorage.removeItem("Username");
localStorage.removeItem("Password");
}
});
i was learning about phantomjs
and i was trying to login into facebook using phantom js
i was successfully able to change the values of the input fields
looks like this
and i could submit the form
the problem is with multiple redirects that facebook do to reach the home page
here is how my code looks like:
var webpage = require('webpage');
var page = webpage.create();
page.settings.javascriptEnabled = true;
page.settings.loadImages = false;
phantom.cookiesEnabled = true;
phantom.javascriptEnabled = true;
var loaded = false;
page.onLoadStarted = function() {
loaded = false;
console.log("load started");
};
page.onLoadFinished = function() {
loaded = true;
console.log("load finished");
};
page.open('http://www.facebook.com',function () {
page.render('1.jpg')
page.evaluate(function () {
document.getElementById('m_login_email').value = "me#email.com";
document.getElementById('m_login_password').value = "*********";
document.getElementById('login_form').submit();
});
page.render('2.jpg');
setInterval(function () {
if (loaded) {
page.render('3.jpg');
console.log("loaded : "+page.url);
phantom.exit();
}
},1000);
});
//EDIT
//the output
load started
load finished
load started
load finished
load started
load finished
loaded : https://m.facebook.com/login/async/?refsrc=https%3A%2F%2Fwww.facebook.com%2F&lwv=100
//
that totally work for me but the 3.jpg image it's black image
and the url of this page >>https://m.facebook.com/login/async/?refsrc=https%3A%2F%2Fwww.facebook.com%2F&lwv=100<<
i was lucky only once, this code worked and i could login .. but it's back to fail again :(
thanks for help BTW
I'm using PhantomJS to scrape data from a webpage. PhantomJS is not returning anything from the evaluate method. The script just runs for a few seconds and then exits.
I've already checked to see if PhantomJS is connecting to the page -- it is.
PhantomJS is also able to grab the page title. I've already double-checked the class I'm looking for, yes -- I'm spelling it correctly.
var page = require('webpage').create();
page.open('http://www.maccosmetics.com/product/13854/36182/Products/Makeup/Lips/Lipstick/Giambattista-Valli-Lipstick', function(status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
waitFor(function() {
return page.evaluate(function() {
$('.product__price').is(':visible');
});
}, function(){
search = page.evaluate(function() {
return $('.product__price').text();
});
console.log(search)
});
});
phantom.exit();
});
I don't know what's going wrong here.
It's not showing you anything, because you're exiting too early. All functions (except evaluate()) that take a callback are asynchronous.
You're requesting to include jQuery in the page by calling page.includeJs(), you immediately exit PhantomJS. You need to exit when you're finished:
var page = require('webpage').create();
page.open('http://www.maccosmetics.com/product/13854/36182/Products/Makeup/Lips/Lipstick/Giambattista-Valli-Lipstick', function(status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
waitFor(function() {
return page.evaluate(function() {
$('.product__price').is(':visible');
});
}, function(){
search = page.evaluate(function() {
return $('.product__price').text();
});
console.log(search);
phantom.exit();
});
});
});
below is my code...
$(window).load(function () {
localStorage.setItem(breakbackToLogin + "userStatus", "loggedin");
localStorage.setItem(breakbackToLogin + "userAthome", "yes");
localStorage.setItem(breakbackToLogin + "session", jsessionId);
});
window.onfocus = function () {
if (localStorage.getItem(breakbackToLogin + "userAthome") === "yes") {
// alert("I am if");
if (localStorage.getItem(breakbackToLogin + "userStatus") !== "loggedin") {
// alert('inside if');
localStorage.setItem(breakbackToLogin + "userStatus", "loggedin");
} else if (jsessionId !== localStorage.getItem(breakbackToLogin + "session")) {
window.location.reload();
}
} else {
// alert('I am else');
if (localStorage.getItem(breakbackToLogin + "userStatus") !== "loggedin") {
// alert('inside else');
window.location.reload();
}
}
};
After logging in, in the home page, in localstorage "loggedin" value will be set. ie. load function is getting executed. This thing is working in chrome, safari and explorer. But in firefox alone onfocus event is triggered while the page is loading. Because of that focus thing, my home page is continuously reloading until the focus is removed from that page. How to solve this issue ?
Define focus event in load callback:
$(window).load(function () {
window.onfocus = function () {};
});
So i've got a main page where there's 3 buttons - login, register and recover account. I want to disable all those buttons and display a message when geolocation is unavaliable or the user has not allowed the browser to share it's location.
$scope.btnDisabled = false;
$scope.errorMsg = null;
$scope.checkBrowser = function () {
if (navigator.geolocation.getCurrentPosition) {
// let's find out where you are!
console.log("Got your location");
$scope.btnDisabled = false;
} else {
$scope.errorMsg = "Warning. Could not locate your position. Please enable your GPS device.";
//disable the buttons
$scope.btnDisabled = true;
//Show errorMessage
return true
}
//errorMessage visibility is set false
return false;
}
So far i haven't managed to disable the buttons or show errorMessage(except for an alert message).
This is how i got the alert message:
function getPosition() {
console.group("geoloc getPosition");
if (window.navigator) {
console.log("api supported");
navigator.geolocation.getCurrentPosition(success, error);
} else {
console.log("api fallback");
}
console.groupEnd();
}
function success(pos) {
console.log("geoloc pos ", pos);
}
function error(err) {
alert("Geolocation identification failed.");
$scope.btnDisabled = true;
}
Why doesn't the $scope.btnDisable work in error() function?
You should use
navigator.geolocation.getCurrentPosition(
function() {
$scope.btnDisabled=false;
$scope.$apply();
}, function() {
$scope.btnDisabled=true;
$scope.$apply();
}
});
It is verry important to know, that getCurrentPosition will call a callback instead of returning something! See https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.getCurrentPosition
You've also to call $scope.$apply() as you'll disable any angular updates while processing non angular callbacks!
Do so in your 2nd example and the button state should get updated