I am using ng-hide and ng-show for my login page. While testing I get element not visible, I tried browser.wait() but it says mulitple elements found.
My code is available at
<div class="login-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1024px-Python-logo-notext.svg.png" height="80px" width="80px">
<!-- Create customer Form -->
<div class="login-form" ng-show="signUp">
<form ng-submit="addUser()">
<input type="text" placeholder="Name" ng-model="name" required>
<input type="email" placeholder="Email" ng-model="email" required>
<input type="password" placeholder="Password" ng-model="password" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Create</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<div class="login-form" ng-show="login">
<form ng-submit="signIn()" >
<input type="email" placeholder="Email" ng-model="email" required>
<input type="password" placeholder="Password" ng-model="password" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Sign In</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<!-- Forgot password -->
<div class="login-form" ng-show="fp" id="fpass">
<form ng-submit="forgotPassword()" >
<input type="email" placeholder="Email" ng-model="email" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Resend</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<a href="" id="logIn" ng-click="loginClick()" style="margin-right:5px" ng-hide="login" >Login </a>
Sign Up
Forgot Password
</div>
Test code
<div class="login-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1024px-Python-logo-notext.svg.png" height="80px" width="80px">
<!-- Create customer Form -->
<div class="login-form" ng-show="signUp">
<form ng-submit="addUser()">
<input type="text" placeholder="Name" ng-model="name" required>
<input type="email" placeholder="Email" ng-model="email" required>
<input type="password" placeholder="Password" ng-model="password" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Create</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<div class="login-form" ng-show="login">
<form ng-submit="signIn()" >
<input type="email" placeholder="Email" ng-model="email" required>
<input type="password" placeholder="Password" ng-model="password" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Sign In</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<!-- Forgot password -->
<div class="login-form" ng-show="fp" id="fpass">
<form ng-submit="forgotPassword()" >
<input type="email" id="fpass-email" placeholder="Email" ng-model="email" required>
<button ng-disabled="loading" type="submit" class="button-primary">
<span ng-hide="loading">Resend</span>
<span ng-show="loading">Loading....</span></button>
</form>
</div>
<a href="" id="logIn" ng-click="loginClick()" style="margin-right:5px" ng-hide="login" >Login </a>
Sign Up
Forgot Password
</div>
Stack trace
) Testing User Sign Up, Login and Logout, Forgot password Test Forgot password and Login
Message:
Failed: No element found using locator: By.cssSelector("div[ng-show='fp'].button-primary")
Stack:
NoSuchElementError: No element found using locator: By.cssSelector("div[ng-show='fp'].button-primary")
at process._tickCallback (node.js:368:9)
Error
at Object.<anonymous> (/home/leo/python-scripts/Flask-Scaffold/app/templates/users/spec.js:35:57)
From: Task: Run it(" Test Forgot password and Login") in control flow
From asynchronous test:
Error
at Suite.<anonymous> (/home/leo/python-scripts/Flask-Scaffold/app/templates/users/spec.js:27:1)
at Object.<anonymous> (/home/leo/python-scripts/Flask-Scaffold/app/templates/users/spec.js:2:1)
2 specs, 2 failures
Finished in 4.807 seconds
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 2 test(s)
[launcher] overall: 2 failed spec(s)
[launcher] Process exited with error code 1
https://github.com/Leo-G/Flask-Scaffold/blob/develop/app/templates/login.html
Related
Some time post request takes query string i.e localhost/?password=123456 Don't know why do we need to add button type="button" or type="submit" please suggest thanks
<form name="login" novalidate>
<div class="row">
<input type="text" required name="email" id="username" ng-model="email" class="with-border" autofocus=true auto-focus>
</div>
<div>
<input type="password" required name="password" id="password" ng-model="password" class="with-border" >
</div>
<a class="pull-left recover-password f-pass-valign" href="#!/forgotpassword">Forgot password?</a>
<div class="form-group">
<button ng-click="login(user.email, password)" type="button" class="btn btn-danger">Login</button>
</div>
</form>
<form name="login" novalidate method="post">
<div class="row">
<input type="text" required name="email" id="username" ng-model="email" class="with-border" autofocus=true auto-focus>
</div>
<div>
<input type="password" required name="password" id="password" ng-model="password" class="with-border" >
</div>
<a class="pull-left recover-password f-pass-valign" href="#!/forgotpassword">Forgot password?</a>
<div class="form-group">
<button ng-click="login(user.email, password)" class="btn btn-danger">Login</button>
</div>
</form>
use method as post if you setup button type button then it will work on button click only
When I reload the browser and show login page. Two input field for username and password are autofill with chrome.
But the login button is greyout and show "not allowed" cursor when hover on.
If I click anywhere in the page, the login button will be enable.
Here is my code for login form:
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>
</form>
You may try autocomplete false.
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address" autocomplete="false">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password" autocomplete="false">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>
HI all i am new in angularjs please someone tell where i am wrong with this code my html is here :
<div class="form">
<div id="signup">
<h1>Welcome Back!</h1>
<form action="/" name="loginForm" method="post" ng-submit="sendLoginData()>
<div class="field-wrap">
<input type="email"required autocomplete="off" name="userEmail" ng-model="user.name" placeholder="E-mail" required/>
<p ng-show="loginForm.userEmail.$error.required">Please Enter Your E-mail</p>
</div>
<div class="field-wrap">
<input type="password"required autocomplete="off" name="userPassword" ng-model="user.password" placeholder="Password" required/>
<p ng-show="loginForm.userPassword.$error.required">Please Enter Your Password</p>
</div>
<span class="forgot">Sign up</span>
<p class="forgot">Forgot Password?</p>
<input type="submit" class="button button-block" ng-disabled="loginForm.$invalid" value="Log IN"/>
</form>
</div>
</div>
You can replace your code with this
<div class="form">
<div id="signup">
<h1>Welcome Back!</h1>
<form action="/" name="loginForm" method="post" ng-submit="sendLoginData()">
<div class="field-wrap">
<input type="email"required autocomplete="off" name="userEmail" ng-model="user.name" placeholder="E-mail" required/>
<p ng-show="loginForm.userEmail.$touched && loginForm.userEmail.$error.required">Please Enter Your E-mail</p>
</div>
<div class="field-wrap">
<input type="password"required autocomplete="off" name="userPassword" ng-model="user.password" placeholder="Password" required/>
<p ng-show="loginForm.userPassword.$touched && loginForm.userPassword.$error.required">Please Enter Your Password</p>
</div>
<span class="forgot">Sign up</span>
<p class="forgot">Forgot Password?</p>
<input type="submit" class="button button-block" ng-disabled="loginForm.$invalid" value="Log IN"/>
</form>
</div>
</div>
When I am clicking login button, error messages are not showing.
<form name="loginform" ng-submit="loginform.$valid && login()" novalidate >
<div class="form-group" ng-class="{ 'has-error' : loginform.username.$invalid && !loginform.username.$pristine }">
<input type="email" name="username" class="form-control" ng-model="user.username" placeholder="Email" required>
<p ng-show="loginform.username.$touched && loginform.username.$invalid" class="help-block">The name is required.</p>
<p ng-show="loginform.username.$touched && loginform.username.$error.email" class="help-block">Please enter valid email id.</p>
</div>
<input type="password" ng-model="user.password" placeholder="Password" class="form-control"> <br>
<button type="submit" value="Log in" class="btn btn-primary" >Log In</button>
</form>
I want to apply Angular Form Validation without using an HTML form. I tried following, but it doesn't disable the button.
<ng-form name="login">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" name="username" value="" placeholder="Username" class="form-control" id="login-username" ng-required="true">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="password" id="login-password" class="form-control" name="password" placeholder="Password" ng-required="true">
</div>
<button style="width: 100%;" title="" data-original-title="" role="button" class="btn custom-small-btn btn-primary hvr-float-shadow" ng-disabled="login.username.$invalid || login.password.$invalid">Login</button>
</ng-form>
tried using ng-diabled="login.$invalid" as well and that didn't work either. What should I do to make it work.
Just use ng-model in your form fields and it will work::
<ng-form name="login">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" ng-model="username" name="username" value="" placeholder="Username" class="form-control" id="login-username" ng-required="true">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="password" ng-model="password" id="login-password" class="form-control" name="password" placeholder="Password" ng-required="true">
</div>
<button style="width: 100%;" title="" data-original-title="" role="button" class="btn custom-small-btn btn-primary hvr-float-shadow" ng-disabled="login.username.$invalid || login.password.$invalid">Login</button>
</ng-form>