Phantomjs does not see twitter/facebook authorization page - javascript

I am testing adding a twitter/facebook account feature from our website. On clicking the 'connect to twitter' button from my website, we get redirected (using oauth for verification and authorization) to twitter api to grant access etc. From my casper test module, after clicking the 'connect to twitter' button, I saw from a screenshot that phantomjs is still there on my current website page and does not go the actual twitter api page. Can anybody help me here ?
Script snippet:
exports.addAccount = function(options) {
this.navToAddService(); //custom function to navigate to particular page
casper.then(function() {
this.click('#add_twitter'); //this is the id of the button 'connect to twitter'
}).then(function() {
this.echo(this.getCurrentUrl());
});
};

How about changing your code to use waitForSelector() before trying to click on the button:
exports.addAccount = function(options) {
this.navToAddService(); //custom function to navigate to particular page
casper.waitForSelector('#add_twitter', function() {
this.click('#add_twitter'); //this is the id of the button 'connect to twitter'
}).then(function() {
this.echo(this.getCurrentUrl());
});
};
This bypasses any potential timing issues with asynchronous code. (E.g. I'm guessing navToAddService() is adding the button that you are then trying to click.)
If you get a time-out you know the button is never appearing, and can start troubleshooting that more specific problem.
Similarly, instead of using then() you could use waitForUrl() with the name of the URL you are expecting.

Related

execute logout url in background

I´m working in a platform based on chamilo LMS. To run properly when the user logged in, a login is made with chamilo in the background using a hidden iframe, now I want to do the logout is similar idea, But I don´t want that the user knows he is logged in chamilo. I have the path to make de logout, Firstly I try with a hidden iframe but didn´t work because the path is from an input. Now I try using $.get('path'); but the console returns error for CORS policy. If anyone knows a solution for this or other ideas would be great.
My actual code is:
$('#logout').ready(function() {
$('#logout').click(function(e){
e.preventDefault();
$.get("logout pat");
});
});
As with login and due to CORS, you will need to blindly load the logout path using a hidden iframe:
$(function() {
$('#logout').click(function(e){
e.preventDefault();
$(`<iframe id="logout-frame" src="${logoutPath}" />`)
.css({display: 'none'})
.appendTo($('body'));
// Remove iframe after 500ms
setTimeout(() => $('#logout-frame').remove(), 500);
});
});

Using Ajax to load beta signup page & clicking opt in without showing page

I'm trying to build a button that will allow users to automatically opt into all of a developer's beta apps (or the ones they select from a list I'll present) without the need to navigate to each beta app's sign-up page on the google playstore. I've tried the following, it loads the page, but I can't get the button-click/form submit right when trying it through ajax.
$.ajax({
url: 'https://play.google.com/apps/testing/com.joaomgcd.autoshare',
success: function( data ) {
// process data (which is actually your page contents)
//console.log(data);
alert("Loaded");
//$("input.action").click();
//var clickme = document.querySelector(".action");
$('.joinForm').submit()
//clickme.click();
alert("Done");
}
});
I get the first popup, but not the second one. This particular developer has each link on one page of their website, I'm just trying to make it easier for his communities to opt into all betas instead of one-by-one. What am I doing wrong in my above code? Do I need to be clicking the input button titled "Become a Tester" (class input.action) or submitting the form that contains that input button (form class joinForm)?
Per request: Code of the Beta Opt-In page
Error being thrown:

Click on button after page reload

I have some links on the page and when user click on link, page is reloaded.
All links have some ID and all have the one same class.
I need to click on some other link after page is reloaded, but only if user click on some of the link with particular class (not anywhere, like menu link).
How I can do something like this using JS or jQuery?
It sounds like you are attempting to build a single page application, ie the application is mostly run by JavaScript instead of server side rendering. In this case page reloads are you enemy. A page reload is basically a restart of your page, and while you can keep state using cookies or localStorage, this will provide you with a rather poor user experience.
In this case, you would just add event handlers to any actions your user would take, and simply handle them in javascript without reloading the page from the server. If you need to get more data in response to the user's actions, you can use AJAX to pull that data from the server.
If you have to use links with urls (still unclear to me why that would be necessary), I would recommend using hash urls like so '#some-action' which will not reload the page when clicked. You can then attach an event handler to the link, or even listen for the url hash to change using the hashchange event. In this way you can know what link the user pressed.
If you are not trying to build a single page application, you will need to add code on the server to store the information you need in the page.
I did it.
So, I created function:
/**
* Click on delivery link after page reload
*
* #return {boolean} [loacalStorage is available]
*/
$.fn.openDelivery = function(){
if (localStorage) {
var addedToCart = localStorage["addCart"];
if (addedToCart) {
setTimeout(function() {
$('#showRight').trigger('click');
}, 1500);
localStorage.removeItem("addCart");
}
$(this).click(function(e) {
localStorage["addCart"] = true;
});
return true;
}
return false;
};
And then called that function:
$(document).ready(function () {
// Trigger delivery click
$('.class-of-my-link').openDelivery();
});
In my case, page reloads after user add some item in shopping cart. With this function I click on link (with 1.5s delay) that opens cart of the user that is shown on the right side of the screen.

Check if a tweet completely done or user close the popup

I am working on a web app using AngularJs as front-end and Laravel as back-end
In many views I have sharing bar with tweet button, I managed to add a share button using twitter javascript widget
twttr.widgets.createShareButton(
'https://dev.twitter.com/',
document.getElementById('tw'),
{
count: 'none',
text: 'Sharing a URL using the Tweet Button'
}
).then(function (el) {
console.log("Button created.", el);
});
and also I managed to detect the click event on this twitter share button via
twttr.events.bind(
'tweet',
function (event) {
console.log('tweeet', event);
}
);
but this event fires if user clicked on tweet button even if he just closed the popup and didn't tweet !!
I found this thread https://twittercommunity.com/t/need-to-check-if-user-tweet-like-retweet-post-successfully-using-js-intent/61432 on twitter community but it has been since Feb,2015 I hope there is something new after more than one year !
Is there anyway to track a complete successful tweet!!
Thanks in advance.

Link to fancybox content

Not quite sure how to explain this the best way, but i'll give it a go!
I have a php site that uses Fancybox. At the moment, if anyone clicks Login, an overlay appears with the login form. If someone clicks to post a new listing and they're not logged in, I'd like the fancybox overlay to appear again, allowing a user to login.
At the moment, I have a couple lines of php code that check if a session is active - if not, it redirects to a login page, I want this to activate a fancybox popup with the login form... if possible?
I'm not sure how best to achieve this? Any help would be awesome! :)
I'm not sure what programing language you are writing in besides jQuery, but a high-level solution might be to drop a cookie when the user logs in. Then, when they click to post a new listing, check for that cookie. If it's there, let them post. If not show the login window. Here's some pseudo code using the jQuery.Cookie plugin:
$(function(){
$('.login-button').click(function(){
//send login info via ajax
$(this).hide("slow",function(){
// drop a cookie
$.cookie( 'login', '1', { expires: 1, path: '/' } );
});
});
// When the post button is clicked, check for the cookie
// If there's no cookie, show the login box
$('.post-button').click(function(){
if( $.cookie('Login') === null ) {
$("#login-box").fancybox();
} else {
// do nothing
}
});
});
There can be multiple ways of doing so.
First of all, how are you identifying that someone is logged in? Suppose if I can do so with an if condition:
if(user==null) {
//no login
}
I can trigger the click of anchor link for LOGIN and thus, open the fancybox again.
if(user==null) {
$("a#login").trigger('click');
}
Hope it gives you some help.

Categories

Resources