I'm trying to automate my tests with Protractor and Appium for an AngularJS site with jasmine framework in iPad simulator, sendkeys() function is working for username and password, but when i click into the login button the test is passed, but the action isn't done : no redirection to home page, and no on click effect is displayed for login button, i'm sure that element is located correctly ! because when i expect the gettext() to be equal to"LOGIN" it is passed but no redirection even if i put browser.sleep(8000);
Here my test script :
"use strict";
require("jasmine-expect");
var wd = require("wd");
describe('my app', function() {
it('should make the login test',function() {
// browser.ignoresynchronization=true;
browser.get("http://10.0.22.82:8080/jws/fetablet");
expect(browser.getCurrentUrl()).toEqual(("http://10.0.22.82:8080/jws/fetablet/#/login"));
element(by.model('credentials.username')).sendKeys('RET02').then(function(){
element(by.model('credentials.password')).sendKeys('RET02').then(function(){
element(by.css('.login-button')).click().then(function(){
browser.sleep(8000); expect(browser.getCurrentUrl()).not.toEqual("http://10.0.22.82:8080/jws/fetablet/#/login");
});
});
});
});
});
Is there another method to locate the click button correctly?
Here my html code :
<div class="login_lang"> <md-button class="lang_button" ng-click="changeLang()">{{lang}}</md-button> </div>
<div layout="column" flex layout-align="center center" class="md-padding splash-background"> <div class="login-logo"> <img src="{{logoSrc}}"> </div> <form class="login-form" name="loginForm" ng-submit="login()">
<fieldset> <md-input-container class="md-block">
<label translate="login.USERNAME" ng-class="{'floating-label-rtl':dir==='rtl'}"
class="login-label">Username</label>
<input required ng-model="credentials.username" ng-focus="onFocus()" type="text">
<div ng-messages="loginForm.credentials.username.$error" ng-show="loginForm.credentials.username.$dirty">
<div ng-message="required" trans
late="login.MESSAGE_REQUIRED">This is required.</div> </div> </md-input-container> <md-input-container class="md-block"> <label translate="login.PASSWORD" ng-class="{'floating-label-rtl':dir==='rtl'}"
class="login-label">Password</label> <input required ng-model="credentials.password" ng-focus="onFocus()" type="pa
ssword">
<div ng-messages="loginForm.credentials.password.$error" ng-show="loginForm.credentials.password.$dirty"> <div ng-message="required" translate="login.MESSAGE_REQUIRED">This is required.</div> </div> </md-input-container>
<div layout-align="center center" layout="column" ng-if="oneTimePassword"> <p class="login-otp-message" translate="login.OTP_MESSAGE">Enter the code which you received by SMS</p> <md-button class="md-warn login-otp-retry" translate="login.OTP_RETRY" ng-click="retry()">Retry</md-button> </div> <md-input-container class="md-block" ng-if="oneTimePassword"> <label translate="login.SECURITY_CODE" class="login-label">Security code</label> <input required ng-model="credentials.securityCode" ng-focus="onFocus()" type="password"> <div ng-messages="loginForm.credentials.securityCode.$error" ng-show="loginForm.credentials.securityCode.$dirty"> <div ng-message="required" translate="login.MESSAGE_REQUIRED">This is required.</div> </div> </md-input-container> <div layout-align="center"> <section layout-align="center" layout="row" layout-sm="column"> <div id="login-error" md-caption class="msg-error" ng-show="error" class="label">{{error}}</div>
<md-button type="submit" class="md-raised login-button" ng-disabled="clicked" translate="login.LOGIN">Login</md-button> </section>
</div> </fieldset> </form> <md-divider></md-divider> <footer class="login-footer"> <div layout="row" layout-align="center center"> <md-button ng-click="goToCustomerCare()" class="login-footer-link" translate="login.CUSTOMER_CARE">Contact Customer Care</md-button> <div> | </div> <md-button ng-click="showDisclaimer()" class="login-footer-link" translate="login.DISCLAIMER">Disclaimer</md-button> </div> </footer> </div>
I put the details of Appium recorder about the login button
There might be multiple reasons for that and it is going to be a guessing game anyway.
it could be that there is an another element matching the .login-button locator and you are clicking a different element. Let's improve the locator:
element(by.css(".login-form .login-button")).click();
wait for the element to be clickable:
var EC = protractor.ExpectedConditions;
element(by.model('credentials.username')).sendKeys('RET02');
element(by.model('credentials.password')).sendKeys('RET02');
var loginButton = element(by.css('.login-form .login-button'));
browser.wait(EC.elementToBeClickable(loginButton), 5000);
loginButton.click();
add a small delay before clicking the element (silly, but I see that helped sometimes):
element(by.model('credentials.username')).sendKeys('RET02');
element(by.model('credentials.password')).sendKeys('RET02');
browser.sleep(500);
element(by.css('.login-form .login-button')).click();
another silly try, click 2 times (I cannot believe I actually advise that):
var loginButton = element(by.css('.login-form .login-button'));
loginButton.click();
loginButton.click();
disable angular animations
click the button via browser.actions() moving to the element before the click:
var loginButton = element(by.css('.login-form .login-button'));
browser.actions().mouseMove(loginButton).click().perform();
sort of an extension to the previous approach. Move to element, sleep for half a second and then click:
browser.actions.mouseMove(loginButton).perform();
browser.sleep(500);
loginButton.click();
Or, if you would introduce a custom sleep() action, you can do:
browser.actions.mouseMove(loginButton).sleep(500).click().perform();
click the element via javascript:
var loginButton = element(by.css('.login-form .login-button'));
browser.executeScript("arguments[0].click();", loginButton);
And, after the form is submitted, instead of browser.sleep(), you can wait for URL to change explicitly, please see:
Protractor- Generic wait for URL to change
As a side note, in Protractor, you use the $ and $$ shortcuts for the CSS locators:
var loginButton = $('.login-form .login-button');
Try executing those commands without using the promise chain. It can be a problem in the previous chain.
"use strict";
require("jasmine-expect");
var wd = require("wd");
describe('my app', function() {
it('should make the login test',function() {
browser.get("http://10.0.22.82:8080/jws/fetablet");
expect(browser.getCurrentUrl()).toEqual(("http://10.0.22.82:8080/jws/fetablet/#/login"));
element(by.model('credentials.username')).sendKeys('RET02');
element(by.model('credentials.password')).sendKeys('RET02');
element(by.css('.login-button')).click();
browser.sleep(8000);
expect(browser.getCurrentUrl()).not.toEqual("http://10.0.22.82:8080/jws/fetablet/#/login");
});
PS: You can avoid using the 'then' function when you do not need to use the result of the method. It is controlled by the control flow
Just adding browser.sleep after the click worked for me:
it('Some test', function () {
element(by.css("button[type='submit']")).click();
browser.sleep(1000);
});
I have one more suggestion, you can expect particular element need to be displayed and clear the text-box. You can actually write in promise, that is the best way.
var loginButton = element(by.css('.md-raised.login-button'));
var userName = element(by.model('credentials.username'));
var password = element(by.model('credentials.password'));
this.username = function(sendUserName) {
expect(userName.isDisplayed()).toBeTruthy();
userName.clear().then(function(){
userName.sendKeys(sendUserName).then(function(){
expect(password.isDisplayed()).toBeTruthy();
});
});
};
this.password = function(password) {
expect(password.isDisplayed()).toBeTruthy();
password.clear().then(function(){
password.sendKeys(password).then(function(){
browser.wait(EC.elementToBeClickable(loginButton), 10000);
});
});
};
this.clickloginbutton = function() {
expect(loginButton.isDisplayed()).toBeTruthy();
loginButton.click().then(function(){
expect('something').not.toBeNull();
});
}
Tried to click the button twice and functionality wise it worked but throwed NoSuchElementError for the second click.
Made below adjustment and it worked for me
await browser.wait(EC.elementToBeClickable(element(by.css('selector')), 5000);
await $('selector').click();
if(await $(selector).isDisplayed())
await $(selector).click();
Related
I have created a small blog app using angular firebase so that registered user can login and post a blog with article and title. I want to make use of firebase storage so that user can upload images along with the article and title and user can also view the images related to post(store and retrieve feature) in real time.
Here is my html :
<div flex-xs="100" flex-md="80" layout="row" layout-wrap >
<h3 flex="100">Create Post</h3>
<md-input-container flex="40" >
<label>Title</label>
<input ng-model="article.title" type="text" />
</md-input-container>
<md-input-container flex="100" >
<label>Article</label>
<textarea ng-model="article.post" ></textarea>
</md-input-container>
<md-button class="md-raised md-primary" ng-click="AddPost()" ng-disabled="!article.title || !article.post">Publish</md-button>
</div>
Here is my controller :
.controller('AddPostCtrl', ['$scope','$firebase','$firebaseObject', '$firebaseArray', function($scope,$firebase,$firebaseObject,$firebaseArray) {
$scope.AddPost = function() {
var title = $scope.article.title;
var post = $scope.article.post;
var childRef = rootRef.child("Blog-One");
var list = $firebaseArray(childRef);
list.$add({
title: title,
post: post,
}).then(function(childRef) {
console.log(childRef);
}, function(error) {
console.log("Error:", error);
});
}
}])
Can anyone help me with how to implement firebase storage, please? Thanks in advance.
<div flex-xs="100" flex-md="80" layout="row" layout-wrap >
<h3 flex="100">Create Post</h3>
<md-input-container flex="40" >
<label>Title</label>
<input ng-model="article.title" type="text" />
</md-input-container>
<md-input-container flex="100" >
<label>Article</label>
<textarea ng-model="article.post" ></textarea>
</md-input-container>
Add these tags in your html
<progress value="0" max="100" id="uploader"></progress>
<input type="file" value="upload" id="fileButton"><br>
<md-button class="md-raised md-primary" ng-click="AddPost()" ng-disabled="!article.title || !article.post">Publish</md-button>
In your controller
var uploader=document.getElementById('uploader'),
imageUrl,
fileButton=document.getElementById('fileButton');
fileButton.addEventListener('change', function(e) {
var file=e.target.files[0];
var storageRef=firebase.storage().ref('firebase').child(file.name);
var task=storageRef.put(file);
task.on('state_changed',
function progress(snapshot){
var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
uploader.value=percentage;
if (percentage==100){
storageRef.getDownloadURL().then(function(url) {
Here you will get download url
imageUrl=url;
});
}).catch(function(error) {
// Uh-oh, an error occurred!
});
}
},
function error(err){
},
function complete(){
}
);
});
So you can allow all the users to post the article with an image. But keep one thing wait until the image uploaded in the storage, and then show the publish article button. To do that wait until the progress bar to get 100% then show the publish article button
I am a beginner and new to AngularJS. I am trying to build an Edit/Update function.
The edit function doesn't do much, it just copies the model data to the Form inputs:
// Edit post
$scope.editPost = function(post){
$scope.title = post.title;
$scope.link = post.link;
};
The Update function should (after clicking the Update Button) take the edited data of the inputs, to update the post model:
// Update post
$scope.updatePost = function(post){
posts.update(post, {
title: $scope.title,
link: $scope.link
}).success(function() {
ToastService.show('Post updated');
});
};
The Edit Part works, when I edit the title input and click the Submit Button of the Edit Form, it sends a PUT request, but it seems to doesn't send the updated data within the PUT - it just sends a request with the original data.
The posts.js service:
angular.module('bidrp')
.factory('posts', [
'$http',
function($http){
var o = {
posts: [{title:"hey", upvotes:123}]
};
o.update = function(post) {
return $http.put('/posts/' + post.id, post).success(function(data){
o.posts.push(data);
});
};
Template where Post is displayed and editPost is triggered:
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<md-button class="md-icon-button md-accent" aria-label="Vote-Up" ng-click="incrementUpvotes(post)">
<i class="material-icons">thumb_up</i>
</md-button>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
posted by <a ng-href="#/users/{{post.user.username}}">{{post.user.username}}</a>
</span>
<span>
Comments
Edit
Delete
</span><br>
<div ng-show="showEditForm" ng-include="'home/_edit-post.html'"></div>
</div>
<div ng-include="'home/_add-post.html'"></div>
_edit-post.html partial:
<form ng-submit="updatePost(post)">
<h3>Edit post</h3>
<div ng-include="'home/_form-post.html'"></div>
</form>
_form-post.html partial:
<md-input-container>
<label>Title</label>
<input required type="text" ng-model="title">
</md-input-container>
<md-input-container>
<label>Link</label>
<input type="text" ng-model="link">
</md-input-container>
<md-button type="submit" class="md-raised md-primary">Submit</md-button>
What am I doing wrong, how can I send the edited form data within the PUT request?
This is happening because, your, are just passing the original post object generated by ngRepeat to the update function not the $scope.post. When using ng-model="post" this will be attached to the $scope object.
You do not need the editPost function, the new data are already passed to $scope.title/$scope.title by ngModel directive (doing this will re-update the $scope.tile, $scope.link with the old values):
// Edit post
$scope.editPost = function(post){
$scope.title = post.title;
$scope.link = post.link;
};
I trying to build a feedback system with Angular. I am using angular ui router to route the user to different pages. It has basically 3 screens(see below).
Satisfied / Not satisfied links with icon.
A form for satisfied user to fill.
A form for unsatisfied user to fill.
I have succeeded in implementing it mostly. But am not able to figure out how to do 1 thing. I want to time out the form if some one leaves it without submitting it and send go back to the 1st screen, so next user can give feedback. But at the same time, I don't want give a flat timer as I don't want the form to redirect if someone is filling the form say slowly. So the timer should redirect to the form to first screen if no activity is happening. But the timer should reset each time the user interact with the form.
Routes:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show main page with satisfied/unsatisfied
.state('main', {
url: '/main',
templateUrl: 'container.html',
controller: 'formController',
})
//satisfied
.state('main.happy', {
url: '/happy',
// data: { happy: true },
templateUrl: 'happy.html',
})
//not satisfied
.state('main.sad', {
url: '/sad',
templateUrl: 'welcome.html'
})
// catch all route
$urlRouterProvider.otherwise('/main');
})
The form code below:
<form id="signup-form" ng-submit="processForm()" >
<div class="col-md-12"><h4 class="col-md-12" >What made you satisfied</h4></div>
<div class="form-group col-md-12">
<div class="row">
<div class="radio col-md-6">
<label>
<input type="checkbox" ng-model="formData.option1" >
Option1
</label>
</div>
<div class="radio col-md-6">
<label>
<input type="checkbox" ng-model="formData.option2" >
Option2
</label>
</div>
</div>
</div>
<div class="col-md-12 contact">
<h4 class="col-md-12" >Want us to contact you?</h4>
<div class="form-group">
<div class="textbox col-md-12">
<label>Name </label>
<input type="text" ng-model="formData.name" >
</div>
<div class="textbox col-md-12">
<label>Email </label>
<input type="text" ng-model="formData.email" >
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12 ">
<div class="col-md-12 contact">
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</div>
</div>
</form>
Here is a timeout function(you might could use $timeout as well) that I wrote to do something similar. It will allow the function to run for a set amount of time, and reset if a change has occurred to the scope of the timeout:
function TimeOut(fn, interval, scope, args) {
scope = scope || window;
var self = this;
var wrap = function() {
self.Clear();
fn.apply(scope, args || arguments);
};
this.Id = setTimeout(wrap, interval);
TimeOut.prototype.Id = null;
TimeOut.prototype.Cleared = false;
TimeOut.prototype.Clear = function() {
clearTimeout(this.Id);
this.Cleared = true;
this.Id = null;
}
}
I was using this to send some data to the server after a toggle is flipped, but I did not want it to fire if the user repeatedly flipped the switch. To Use this function you do something similar to this (Starting it on page load):
$scope.yourTimer = new TimeOut( SomeFunction($scope.someObject),
someInterval, yourScope, arg)
NOTE: I passed in window.parent for yourScope so the function will fire regardless if user left page. Yous do not need to pass in the args if you do not have any
Now what you need to do is add a watch/watchcollection to your form data and in this watch you do this:
$scope.$watchCollection( "yourData",
function( newValue, oldValue ) {
if(newValue != oldValue){
if(!($scope.youtTimer.Cleared === true && $scope.yourTimer === null){
$scope.yourTimer.Clear()
$scope.yourTimer = new TimeOut( SomeFunction($scope.someObject),
someInterval, yourScope, arg)
}else{
//recreate time just in case
$scope.yourTimer = new TimeOut( SomeFunction($scope.someObject),
someInterval, yourScope, arg)
}
}
}
);
Now if any thing changes in the "yourData", before the timer elapses, the current timeout is cleared and restarted again.
What I'am trying to do is convert every user input into a label using angular. I believe that I'am doing the right thing, but is not working. I will appreciate if somebody take a look at this code. Thank you
here is a plunker
<div class="row" ng-controller="tagForm">
<div ng-click="addEntry()">
<div class="col-xs-12 col-sm-12 col-md-10 ">
<input type="text" placeholder="What are your area of expertise" ng-model="newEntry.name" class="form-control border" />
</div>
<div class="col-xs-12 col-md-2 center form-button">
<input type="button" value="Add" class="btn btn-orange btn-add" />
</div>
<div class="col-md-8 col-sm-offset-2" id="up">
<br />
<span class="label label-primary" ng-repeat="entry in entries">{{entry.name}}</span>
</div>
</div>
</div>
app.controller('tagForm', ['$scope', function($scope) {
return $scope.addEntry = function() {
$scope.entries.push($scope.newEntry);
return $scope.newEntry = {};
};
}]);
You have a few things wrong in your Plunk, but here's some stuff to start with:
You need to wire up a click event on your Add button. Right now, its not doing anything when you click it
Bind to an ng-model on the scope just using 'newEntry'. All you're typing is a name so thats all you need to save on the scope.
Loop over entries, printing out just 'entry' instead of 'entry.name'
And your controller should look like this (no need for the returns)
app.controller('tagForm', ['$scope', function($scope) {
$scope.entries = [];
$scope.addEntry = function() {
$scope.entries.push($scope.newEntry);
};
}]);
See this fiddle:
http://jsfiddle.net/smaye81/anrv2qms/1/
I am trying to append an element to the DOM from user text input using AngularJS.
The desired behaviour is:
User types string into input ng-model "newTask"
Presses enter key
Dynamic element is then appended to the DOM
The relevant section of HTML is as follows:
<div class="add-task">
<input type="text" placeholder="Type then press enter to create task" ng-model="newTask" />
</div>
<div class="task-list">
<a class="task"><span class="text">{{ newTask }}</span></a>
</div>
Currently the HTML is instantly updated. How can I bind this event to only happen after enter keypress? The AngularJS UI is also loaded.
Many appreciations,
an AngularJS newbie
Try creating a temp value
Html:
<input type="text" placeholder="Type then press enter to create task" ng-model="tmpTask" ng-keypress="saveTask($event)" />
Your ng-model binds to a tmpTask property. Only when enter is pressed, save it back to newTask
JS:
app.controller('MainCtrl', function($scope) {
$scope.saveTask = function (event){
if (event.keyCode == 13){
$scope.newTask = $scope.tmpTask;
}
}
});
DEMO
html
<form ng-submit="createTask()">
<input type="text" ng-model="newTaskText" />
</form>
<div ng-repeat="task in tasks">{{ task.text }}</div>
controller
$scope.tasks = [];
$scope.createTask = function() {
$scope.tasks.push({
text: $scope.newTaskText
});
};
Since one of the other answers addresses the ng-keypress, I'll offer up the fact you don't need to use the ng-keypress event but can just watch the variable instead which negates the need for enter:
http://plnkr.co/edit/osFGRtpHG46bMyp15mc8?p=preview
app.controller('MainCtrl', function($scope) {
$scope.taskList = [];
$scope.$watch('newTask', function(newVal){
if (newVal=="newTask") {
$scope.taskList.push("Task " + $scope.taskList.length);
$scope.newTask = null;
}
});
});
<body ng-controller="MainCtrl">
<div class="add-task">
<input type="text" placeholder="Type then press enter to create task" ng-model="newTask" />
</div>
{{taskList.length}}
<div class="task-list" >
<a class="task" ng-repeat="task in taskList" ><span class="text">{{ task }} </span></a>
</div>
</body>