Develop Reference

Autofill UserId on AngularJS Login Page

I'm working on a iOS app that uses a WKWebView to log into a website. The website presents a login form written in AngularJS that takes a UserId and Password. I'm attempting to pre-fill the UserId using javascript to fill in the appropriate value:
document.getElementsByName('UserId')[0].value = 'MyUserId'
Once submitted, the form returns 'invalid credentials' as if the userid input field has been left blank. If I subsequently make any manual changes to the UserId input field and resubmit it works.
I have verified that the UserId does contain the correct value. I have also tried to change the AngularJS field attributes prior to submitting the form:
ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required
Within my javascript code, I make sure to convert the UserId to a javascript compatible string:
UserId.toString()
Manually typing the UserId and autofill from 1Password works as expected.
I would appreciate any suggestions or advice.
The angular code for the form:
<form class="spark-splash-screen__form spark-text-left ng-dirty ng-valid-parse ng-valid ng-valid-required" novalidate="" name="loginCtrl.loginForm" ng-submit="loginCtrl.submitForm()">
<p class="spark-margin-top--lg spark-margin-bottom" translate="">Sign In to.</p>
<label class="spark-input" fang-input="" ng-class="{
'active': loginCtrl.formData.id
}">
<input class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="UserId" placeholder="Enter User ID..." role="textbox" required="" ng-model="loginCtrl.formData.id" autofocus="">
<span class="spark-label">User ID</span>
</label>
<label class="spark-input" fang-input="" ng-class="{
'active': loginCtrl.formData.password
}">
<input type="password" class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="Password" placeholder="What is your password?" role="textbox" required="" ng-model="loginCtrl.formData.password">
<span class="spark-label">Password</span>
<span class="spark-input__addon spark-input__password-toggle">
<i class="spark-input__password-show spark-icon--md spark-icon-password-view"></i>
<i class="spark-input__password-hide spark-icon--md spark-icon-password-hide"></i>
</span>
</label>
<fieldset class="row">
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input ng-pristine ng-untouched ng-valid ng-empty" type="checkbox" name="RememberMe" ng-model="loginCtrl.formData.rememberMe">
<span class="spark-checkbox__box"></span>
<span class="spark-label" translate="">Remember Me</span>
</label>
</fieldset>
<div class="row">
<div class="col-xs-12 spark-margin-top">
<button type="submit" class="spark-btn spark-btn--md spark-btn--primary spark-block--lte-sm spark-margin-bottom--md spark-pull-right--gte-sm" ng-disabled="loginCtrl.formSubmiting" translate="">Sign In</button>
<div class="spark-splash-screen__help-container spark-pull-left--gte-sm">
<button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('findUserOrPass')">Forgot User ID or Password?</button>
<button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('firstTimeUser')">First-Time User</button>
</div>
</div>
</div>
</form>
This is the answer I figured out after being pointed in the right direction:
document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;

Try also assigning the ng-model (loginCtrl.formData.id)
From loginCtrl, which I assume is the controller:
document.getElementsByName('UserId')[0].value = 'MyUserId';
formData.id = 'MyUserId';
If you're doing this asynchronously, you may need to $apply:
document.getElementsByName('UserId')[0].value = 'MyUserId';
$scope.$apply(function() {
formData.id = 'MyUserId';
});

This is the answer I figured out after being pointed in the right direction:
document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;

Binding required and attr.required are not working as expected when the value is false

I'm using Angular version 6.0.7.
I have four <input> fields where the latest three is only required if the first one is provided. I'm trying to make it working by using [attr.required]="<boolean here>" and [required]="<boolean here>", but the required attribute is not removed from the input when the binding value is false.
<div class="col">
<h3 class="mb-3">Ensino superior</h3>
<div class="form-group">
<label for="ad-higher-education-institution">Nome da instituição</label>
<input
[(ngModel)]="client.academic_data.higher_education.institution"
id="ad-higher-education-institution"
name="ad-higher-education-institution"
type="text"
class="form-control">
</div>
<div class="row">
<div class="col form-group">
<label for="ad-higher-education-city">Cidade</label>
<input
[(ngModel)]="client.academic_data.higher_education.city"
[attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
id="ad-higher-education-city"
name="ad-higher-education-city"
type="text"
class="form-control">
</div>
<div class="col form-group">
<label for="ad-higher-education-state">Estado</label>
<input
[(ngModel)]="client.academic_data.higher_education.state"
[attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
id="ad-higher-education-state"
name="ad-higher-education-state"
type="text"
class="form-control">
</div>
</div>
<div class="form-group">
<label for="ad-higher-education-course">Curso</label>
<input
[(ngModel)]="client.academic_data.higher_education.course"
[attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
id="ad-higher-education-course"
name="ad-higher-education-course"
type="text"
class="form-control">
</div>
<div class="form-group">
<label for="ad-high-school-conclusion-year">Ano de conclusão</label>
<input
[(ngModel)]="client.academic_data.higher_education.conclusion_year"
[attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
id="ad-higher-education-conclusion-year"
name="ad-higher-education-conclusion-year"
type="text"
class="form-control"
mask="0*">
</div>
</div>
</div>
How to remove the required attribute when the first input is not filled?
This is the input when the first is filled:
<input
class="form-control ng-valid ng-dirty ng-touched"
id="ad-higher-education-city" name="ad-higher-education-city" type="text" ng-reflect-name="ad-higher-education-city" ng-reflect-model=""
required="true">
And this is the input when the first is NOT filled:
<input
class="form-control ng-valid ng-dirty ng-touched"
id="ad-higher-education-city" name="ad-higher-education-city" type="text" ng-reflect-name="ad-higher-education-city" ng-reflect-model=""
required>

You should just use [required], not [attr.required].
Support for binding directly to required was added in this pull request from a couple years ago.

To solve this problem you just need to use a ternary expression that returns null in the case of false.
[required]="client.academic_data.higher_education.institution ? true : null"
Returning null the required attribute will be excluded from the input.

Javascript - adding incremental number to ID and Class

I am trying to add both an ID and class to input fields plus the addition of a number after each ID and class element so that they all have unique ID's and Class's. I need this to be added to the input fields on window load. After many attempts I am having trouble doing this with various counter suggestions.
I have now removed the non working code(s) to show where I am starting and hopefully someone can give me that extra bit of JavaScript to do this :), what I have so far is
Name: <input placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone: <input placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
<button>A button</button>
<script>
function myFunc() {
document.getElementsByTagName("input")[0].setAttribute("id", "fieldid");
document.getElementById("fieldid").value = "Johnny Bravo";
var element = document.getElementById("fieldid");
element.classList.add("mystyle");
}
window.onload = myFunc;
Your help is appreciated

Here is an example of how you can use the incremental values for your id and class name for the input elements:
function myFunc() {
var inputElem = document.getElementsByTagName("input");
for(var i=0; i < inputElem.length; i++){
inputElem[i].setAttribute("id", "field"+i);
inputElem[i].value = "Johnny Bravo "+i;
inputElem[i].classList.add("mystyle" + i);
}
}
window.onload = myFunc();
Name1: <input placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone1: <input placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Name2: <input placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone2: <input placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Name3: <input placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone3: <input placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
<button>A button</button>

var elements = document.getElementsByTagName('input');
var index = 1;
for(var e of elements){
e.setAttribute("id", "fieldid"+index);
index++;
}
And you can do the same for the class attribute. Of course if you don't want every input element on the page to get new ids you have to use a more specific selector.

check the angular form is valid in the controller

I am new to angularjs. I have searched for this problem but I found some solutions but none of them were working for me. So, I have a form which is
HTML
<div class=" row col-xs-12 col-md-12">
<div id="candidateInfoCorners" ng-show="showcandidateInfo">
<div class="col-xs-12 col-md-12 info-header">
<h>Candidate Information</h>
</div>
<form class="form-horizontal" role="form" name="Candidateform">
<div class="row">
<div class="col-md-6">
<label class="control-label col-sm-4 candidateNpInDaysLabelPosition" for="noticePeriod">Notice Period In Days :</label>
<div class="col-sm-4">
<input type="number" min="0" ng-model="candidate.noticePeriod" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required candidateNpInDaysInputPosition"
id="noticePeriod" placeholder="Noticeperiod" autocomplete="off" required="">
</div>
</div>
<div class="col-md-6">
<label class="control-label col-sm-4 candidateCTCLabelPosition" for="ctc">CCTC In Lakhs :</label>
<div class="col-sm-4">
<input type="number" min="0" decimal-places="" ng-model="candidate.ctc" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required candidateCTCInputPosition"
id="ctc" placeholder="CCTC" autocomplete="off" required="">
</div>
</div>
<div class="col-md-6">
<label class="control-label col-sm-4 candidateECTCLabelPosition" for="ectc">ECTC In Lakhs :</label>
<div class="col-sm-4">
<input type="number" min="0" decimal-places="" ng-model="candidate.ectc" class="form-control ng-pristine ng-valid-min ng-invalid ng-invalid-required ng-touched candidateECTCInputPosition"
id="ectc" placeholder="ECTC" autocomplete="off" required="">
</div>
</div>
<div class="col-md-6">
<label class="col-sm-4 control-label candidateCommunicatioLabelPosition" for="communication">Communication :</label>
<div class="col-sm-4">
<select class="selectpicker form-control ng-pristine ng-untouched ng-invalid ng-invalid-required candidateCommunicatioSelectPosition"
ng-model="candidate.communication" name="communication" id="communication" required="">
<option value="" selected="">Communication</option>
<option value="Good">Good</option>
<option value="Average">Average</option>
<option value="Poor">Poor</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
Now, I have a controller where I am using this form like -
$scope.candidate = {
noticePeriod: '',
ctc: '',
ectc: '',
communication: ''
};
And using it like - $scope.candidate.noticePeriod while getting the value.
Now I don't have any submit for the form, this is going to happen on some another action .
$scope.updateDocument = function() {
//Here I want to check the Form is valid or not
//I tried
//$scope.candidateform.$valid but I am getting an error like
Cannot read property '$valid' of undefined
}
Both functions are in the same controller
Can any one help me with this?

You need to use ng-form
This is how I do it.
I make a parent property like
$scope.myforms = {
Candidateform: {}
};
//HTML will be
<ng-form name="myForms.CandidateForm">...</ng-form>
//TO VALIDATE I DO IT LIKE THIS
$scope.myForms.CandidateForm.$submitted = true // This will run the validators as well, this means form has been submitted.
//OR TO SUBMIT IT PROGRAMATICALLY
$scope.myForms.CandidateForm.$valid
You have some errors in your code, You name your form "Candidateform" and then in controller you are only using $scope.candidate. Change that to $scope.CandidateForm
function Controller($scope) {
$scope.master = {};
$scope.user = {
name: "",
email: ""
};
$scope.update = function(user) {
//$scope.master = angular.copy(user);
console.log($scope.master)
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html ng-app>
<div ng-app="demo1">
<div ng-controller="Controller">
<ng-form novalidate class="simple-form" name="master">
<legend>User Profile</legend>
<div class="control-group-error">
<label class="control-label" for="input-error">Name</label>
<div class="controls">
<input type="text" name="username" ng-model="user.name">
<span class="help-inline">Please correct the error</span>
</div>
<label>E-mail</label>
<input type="email" name="email" ng-model="user.email">
</div>
</ng-form>
<button class="btn btn-primary" ng-click="update(user)">Save</button>
<br />
<pre>{{master.$valid}}</pre>
</div>
</div>
</html>

Selenium Java, how to change Webdriver from one Tab to another Tab (second Tab open after first Tab click on a hyper link)

First I click hyper link on mailinator email and open new tab and popup in the same window as I added into screenshot image.
Sometime this code work after tab make refresh but same time event not refresh also not working. I hope sometime driver.switchTo().window(winHandle); not working properly.
HTML Code Here:-
<div id="zDeskPasswordConfirm" class="modal fade ng-scope in" role="dialog" data-keyboard="false" data-backdrop="static" tabindex="-1" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header portal-header">
<button class="close" aria-label="Close" ng-click="close()" data-target="#zDeskSignup" data-dismiss="modal" type="button">
<div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<form id="passwordConfirmationForm" class="form-horizontal ng-pristine ng-valid-email ng-invalid ng-invalid-required ng-valid-pattern" novalidate="" name="passwordConfirmationForm">
<div class="form-group">
<label class="ng-bind-htmling" ng-bind-html="translation.login_email">Email</label>
<div class="input-group">
<span id="basic-addon1" class="input-group-addon">
<input id="email" class="form-control ng-pristine ng-untouched ng-valid-email ng-valid-pattern ng-not-empty ng-valid ng-valid-required" type="email" required="" disabled="disabled" placeholder="Email" ng-model="confirm.Email" ng-pattern="/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/" name="email"/>
</div>
</div>
<div class="form-group">
<label class="ng-bind-htmling" ng-bind-html="model.PH_Password">Password</label>
<div class="input-group">
<span id="basic-addon1" class="input-group-addon">
<input id="newPassword" class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern" type="password" required="" placeholder="Password" ng-model="confirm.Password" name="password" ng-pattern="/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/"/>
</div>
<span class="ng-bind-htmling ng-hide" ng-bind-html="model.Error_Password" style="color:red" ng-show="passwordConfirmationForm.password.$invalid && submitted">Invalid Password Format (Ex : Admin123)</span>
</div>
<div class="form-group">
<label class="ng-bind-htmling" ng-bind-html="model.PH_RePassword">Confirm Password</label>
<div class="input-group">
<span id="basic-addon1" class="input-group-addon">
<input id="rePassword" class="form-control ng-pristine ng-untouched ng-isolate-scope ng-empty ng-invalid ng-invalid-required ng-valid-pattern" type="password" required="" placeholder="Confirm Password" data-password-verify="confirm.Password" ng-model="confirm.rePassword" name="rePassword" ng-pattern="/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/"/>
</div>
<span class="ng-bind-htmling ng-hide" ng-bind-html="model.Error_RePassword" style="color:red" ng-show="passwordConfirmationForm.rePassword.$invalid && submitted">Invalid Confirm Password.</span>
</div> <div class="text-center"> </form> </div> </div> </div> </div> </div> </div>
Selenium Code Here -
#Test (priority=5,enabled=true)
public void ConfirmationPw() throws Exception
{
for(String winHandle : driver.getWindowHandles()){
driver.switchTo().window(winHandle);
driver.navigate().refresh();
driver.findElement(By.xpath(prop.getProperty("NewPassWordSet"))).sendKeys(prop.getProperty("password2"));
driver.findElement(By.xpath(prop.getProperty("ComfPassWordSet"))).sendKeys(prop.getProperty("password"));
driver.findElement(By.xpath(prop.getProperty("PasswordConfirmationActiveButton"))).click();
}
}
Popup new tab Image :-