Trouble getting to Angular app after logging in on non Angular page - javascript

I’m trying to create a simple test where I click on a button in my Angular app. However, when I navigate to my Angular app it first redirects me to a non Angular login page.
So a user’s experience is as follows: The user navigates to https://test.com and then is redirected to a login page where they enter a username and password and click the Submit button. Then the app page loads which contains a button which they can click.
I’ve got my code working to the point where when I run protractor, I see a chrome window open, I see the login page appear and I can see text filling into both the ‘Username’ and ‘Password’ fields. However, right after that the chrome browser closes. I do not see my app page loads which contains the button I want to click.
The code I’m using to try and login is as follows (NOTE: username and password text were changed to something fake so I could post my question)
describe('Go to Test site', function() {
it('and login', function() {
browser.get('https://test.com');
browser.ignoreSynchronization=true;
element(by.name('login')).sendKeys('username');
element(by.id('cred_password_inputtext')).sendKeys('password');
element(by.id('cred_sign_in_button')).click();
//browser.ignoreSynchronization=false;
});
});
What is the next step? Should I be using “browser.ignoreSynchronization=false;”? Do I need to find the button element on the next page?
At this point I would be happy just to see my app page load so I can even see the button in the test browser. It closes so fast. This is my first question so I apologize if it's confusing. Thank you.

As mentioned by #Batajus you don't have any code, so the test execution has finished.
If you only need to logon once you can place the code in a beforeAll() and even make a method for it that holds all the logon logic, something like this
function logon(username, password) {
var EC = protractor.ExpectedConditions;
browser.get('https://test.contracts365.com');
browser.ignoreSynchronization = true;
// Wait for the url to be changed to the logon page
browser.wait(EC.urlContains('login.microsoftonline.com'), 5000);
// Do the logon magic
element(by.name('login')).sendKeys(username);
element(by.id('cred_password_inputtext')).sendKeys(password);
element(by.id('cred_sign_in_button')).click();
browser.ignoreSynchronization = false;
// Wait till you are back on the page
browser.wait(EC.urlContains('test.contracts365.com'), 5000);
}
describe('Go to Test site', function() {
beforeAll(function() {
logon('john#doe.com', 'Welcome123')
});
it('should do some tests', function() {
// do some tests
});
});
And then add your tests
Hope it helps

your browser closes, because the test execution has finished. So your next step is to find a button or another element on your next loaded page.
I recommend to use browser.wait(...) methods with Expected Conditions to wait until your next page is fully loaded and your elements become interactable.
I hope this solves your problems, otherwise please tell me so i provide another solution ;-)

Related

Prevent from leaving web application and redirecting to any other link

const adminLogOut = document.getElementById("adminLogOut");
adminLogOut.addEventListener('click', function () {
window.alert("Are You sure You want to leave?");
});
window.onbeforeunload = function() {
return "Are You sure You want to leave?"
}
The code above is going to prevent from logout and redirection. By redirection I mean leaving my web application stored on my local machine and run in Firefox. E.g. when I want to click on any bookmark in my browser, then .onbeforeunload function should prevent from leaving my application, but it works only when I want to leave the page which this JS code belongs to.
Would You give any advice?

window.location.href.indexOf not working properly

I'm currently using window.location.href.indexOf in my current project. I've noticed that it doesn't seem to work properly. For example this code that I made.
$(document).ready(function () {
//Show Sign Up drawer if user clicks on referral link
//It will show the Sign Up drawer once the word "referral" is found in the URL
if (window.location.href.indexOf("?referral") > -1) {
console.log('Sign Up Drawer');
$(".header-form-container.signup").addClass("show"),
}
});
This code what it does is to add a class in an element if the word referral is found in the URL. The add class being inserted will then slide a sign up drawer. Here is what happened during testing.
In my first test, I tried inserting the word referral in the url. After typing in the word and pressing the Enter key, the javascript I'm trying to run did not trigger
But after refreshing the browser or inserting the word again it now works. It currently shows the sign up section.
How can I ensure that the code window.location.href.indexOf will work in the first try or without refreshing the browser again. The website is built on a angular framework
If you only change the URL after the # sign, the page won't reload, since you're only changing the anchor part of the URL.
Your code wrapped in $(document).ready(function () { ... will only run once, when the page loads.
What you want to do is to add a listener for the route change event and run your code in that handler, something like this:
$rootScope.$on("$routeChangeSuccess", function() {
if (window.location.href.indexOf("?referral") > -1) {
console.log('Sign Up Drawer');
$(".header-form-container.signup").addClass("show"),
}
});
It does not work because your script (e.g: main.js) is executed only one time when the page load.
You might want to use window.historyto manipulate the browser history. You can update the query string with pushState()
History API
Hope it helps.

loadFeeds not woking when back to page in angularness

We are developing mobile app using ng-Cordova. We need get data from server when page load.So we write getting code in loadFeeds.example
page1:-
.controller('HomeSecondCtrl', function($scope,$http,$location,$window,$stateParams,$ionicHistory,$ionicActionSheet,BlankService,BlankFactory) {
$scope.loadFeeds();
$scope.loadFeeds = function () {
alert("Start");//getting code
}
$scope.toggleImage = function (index) {
$location.path("/page2");
}
})
page2:-
.controller('SelectCategoryCtrl', function($scope,$location,$ionicHistory,$window,$http,$ionicActionSheet,BlankService) {
$scope.back = function (){
$location.path("/page1");
}
})
When app load we calld page1. So alert Will show alert("Start");. Then we have one button action toggleImage. Using this we redriect to page2 upto this ever thing fine.
our problem is
Second page have back button so using that we redirect to first page. But now Alert not showing. loadFeeds not working. Please guide us why loadFeeds is not working when are back to page1 from page2.
Use
$scope.$on('$ionicView.enter', function(){
$scope.loadFeeds();
});
$ionicView.enter : The view has fully entered and is now the active view.
This event will fire, whether it was the first load or a cached view.
Hope it helps.

Navigation Issue with Durandal

I'm using the hot towel template, and I'm trying to understand how to navigate to a different view via a javascript call. When my page loads, it looks like this:
Then, if I click any other button, then click the apps button again, I wrote some test code to just take the user to the ping page. This is in the apps view model:
function activate() {
if (initialized) { router.navigateTo("#/ping"); return; }
// more code here (doesn't get hit the second time through)
}
But what happens is the URL is correctly the ping URL, and the ping button is selected, but the actual content is still showing the applications:
If I want to navigate to another page without clicking in the navbar at the top, how should that be done?
Your 'router.navigateTo('#/ping') is correct.
But when activate method is called, lots of heavy tasks are being done by durandal, it's too late for
your commanding, if you want to prevent opening a page and instead of that You'd like to go to
another page , then you can use 'CanActivate' method as following :
function canActivate() {
if (initialized) { router.navigateTo("#/ping"); return false;
/* return false to prevent opening a page */ }
else return true;
}
Also your application's performance will be boosted too
Good luck.

Javascript - Reload page after form submit with target="_blank"

I'm trying to achive the following:
On page A we have an access restricted Link to page B. The access restriction is handled on the server side in PHP.
When a user clicks on this link to page B we display a modal dialogue on page A (via javascript) with a form, having the link's href (B) as the action. (To give the user an immediate feedback. The fallback is to redirect him to a login form that redirects him to the site he wants to access.)
This system works quite well.
But now comes my question:
We have access restricted links that should be opened in a new window.
Now if I use target="_blank" on the form the user stays logged out on the page he came from (A), that is still open in the background.
Is there a way to reload the page (A, in the background) right after the form has been submitted to the new window (B)?
My first idea was to use window.location.reload(); in the submit handler on page A.
This didn't work in chrome and from what I understand could create a race condition.
Another idea would be to log the user in via an ajax call and open a new window through javascript. Is there a way to do this without having to deal with pop-up blockers?
I implemented the idea of lostsource (see below) with one slight addition.
As I need to reload only once, the timer of setInterval can be stopped if the cookie changed.
var ri=setInterval(function() {
if(oldCookie != document.cookie) {
// assuming a login happened, reload page
clearInterval(ri);
window.location.reload();
}
},1000); // check every second
I still love the idea. stackoverflow is awsome!
Assuming you're storing PHP session information inside a cookie, you might be able to monitor your document.cookie for changes.
Before submitting the form store the value of the current cookie and monitor it for changes with a timer:
form.onsubmit = function() {
var oldCookie = document.cookie;
var cookiePoll = setInterval(function() {
if(oldCookie != document.cookie) {
// stop polling
clearInterval(cookiePoll);
// assuming a login happened, reload page
window.location.reload();
}
},1000); // check every second
}
On the parent page, do you have any visual/functional changes because of the login? As in any new actions possible?
If not, then you dont have to do anything as you would be checking for login on every action from the parent page, you can check for permissions along with that.
If there are changes or additional functionalities, you can call a javascript function in the parent, say reloadMe, using window.opener.reloadMe()
Why not just a simple setTimeout
setTimeout(function(){ location.reload(); }, 1000);
It is a bit hacky, but seems appropriate for your situation.

Categories