I newbie to protractor and my requirement is automating third party tools.
I was unable to detect an web element, the functionality of element is on click it changes its state and pulls data from other application it is changing its class value
FROM
ui-select-container ui-select-multiple select2 select2-container select2-container-multi ng-empty ng-valid ng-touched
TO
ui-select-container ui-select-multiple select2 select2-container select2-container-multi ng-empty ng-valid ng-touched select2-container-active select2-dropdown-open open
I am curious about the tag:
'select2-container-disabled
In what way it can affect my code?
I have tried to find the element using xpath & ng attribute but was unable to detect element and i found
ng-disabled="$select.disabled"
I tried css,xpath and input tag source code.
Can you please suggest me how to deal with this element?
If the element is disabled can i handle that element using some code in protractor
Thanks in Advance :-)
If it's disabled then it's not clickable. the isElementClickable function is mostly testing for whether an element is enabled or not.
You can maybe scrape data from it though
Related
I am trying to click on a date picker text box so that a calendar pops up where I can choose the date.
I am able to identify the element since it has easy accessible "id" attribute.
Manually clicking on the textbox, results in the calendar pop being displayed.
However, I am not able to click on the date picker using native Selenium click commands/ Javascript/ Jquery clicks.
Below is the HTML code :
<input class="ng-touched ng-dirty ng-valid" formcontrolname="effectiveDate" id="date_start" name="date_start" placeholder="dd/mm/yyyy" readonly="" type="text" ng-reflect-name="effectiveDate" autocomplete="off" value="22/09/2017" ng-reflect-model="22/09/2017">
Any reason why such a behavior? In what instances can we expect the Selenium native commands/ JS/ Jquery command to fail?
Using JavascriptExecutor You can enter date..
((JavascriptExecutor) wd).executeScript(
"document.getElementsByClassName('ng-touched ng-dirty ng-valid')[0].setAttribute('value', '2017-10-21')");
As per code this is written in angularjs so selenium driver is not able to locate such type of elements.Try to use cssSelector which is the best approach to locate angular based elements you can use By.cssSelector("input [id=date_start]").Don't forget to use proper wait before locating element.
You can try any of the following approaches:
#1
WebElement datePicker = driver.findElement(By.id("date_start"));
WebDriverWait wait = new WebDriverWait(driver,20);
wait.until(ExpectedConditions.visibilityOf(datePicker));
wait.until(ExpectedConditions.elementToBeClickable(datePicker));
datePicker.click();
#2
Actions act = new Actions(driver);
act.moveToElement(datePicker).click().build().perform();
#3
JavascriptExecutor js= (JavascriptExecutor ) driver;
js.executeScript("arguments[0].click();",datePicker);
I think you will have to take coordinates of text box and width and height of the textbox and try to click on centre of the calendar sign present in textbox...
Trying to dynamically add validation to input file if I choose first option from select. But if I add required attribute, it still ng-valid in class. If I load file to input file, it still ng-empty.
What's wrong? http://plnkr.co/edit/pjyCULes60jWf7yqNsyB?p=preview
The form validation in AngularJS depends on the ngModel attribute, which doesn't work with input type=file.
To solve this, either use ngFileUpload which helps you solve other problems you'll encounter with file upload in Angular as well, or see this or that answer.
I am working on an angular application where we are using this [Angular-Auto-Validate] plug for form validations. This plug-in works automattically with all type of form validation which is quiet easy to use but we are facing an issue with this.
We want to stop validate to bootstrap style validations. It keeps us giving this error message.
Angular-auto-validate: invalid bs3 form structure elements must be wrapped by a form-group class
as per the plug-in documentation we added this few configurations but seems like we are doing something wrong.
validator.setValidElementStyling(false);
validator.setInvalidElementStyling(false);
This will be resolved if you place all your form inputs inside a form-group class. here is example.
<div class="form-group">
<input type="text"........../>
</div>
I added field validation attributes like "required" and "pattern" in my form, and the form is inside a ng-controller. The validation works. But it seems the validations are triggered on page load, and I see all the fields are marked as invalid with error message when the page load.
I tried to add "novalidation" attribute to the form as indicated in the examples on AngularJS website, but no luck.
I would like to have the validation triggered the first time the user tries to interact with it. How can I do that?
Update
Here's an example https://jsfiddle.net/davidshen84/00t197gx/
<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/>
<label class="mdl-textfield__label" for="screenname">Screen Name</label>
</div>
On load, you should see all the input fields had a red line under them which indicate they are in the invalid state. And the line turns to blue once validated.
Note: The style on the check button does not work...should not be a concern in the problem.
Angular is going to check the form the same way at any point (load or later) and render the result. If you don't want to display the results on load, add logic to check whether the form has been interacted with. You can hide your error messages using ng-if="yourFormName.$dirty", or display according to the status of an individual field with yourFormName.yourFieldName.$dirty.
Click here for live demo.
What is currently implemented (wrong IMHO) is that MDL automatically validates input and doesn't mind "novalidate" form attribute. I had to implement check for empty input value (skip validation and remove is-invalid class) and, since angular form validation requires "novalidate" attribute, check:
if (input.form.novalidate = true) // skip validation
that way you can actually turn off mdl validation and leave everything to angular.
One more thing is actually required. You can create angular directive which validates expression and add is-invalid class if necessary:
div class="mdl-textfield" mdl-validator="form.email.$error"
I'm evaluating using Angular with ui-select2 and wondered whether someone could provide help on hiding the flicker/conversion of the <select> into the select2 component.
It's only very brief, but users can see the component change styles.
Is there a way of hiding it until the select has been modified by select2?
I came across the same problem and I had a look at the source code. The directive is deliberately initialised later by using a timeout. In the code there is a comment saying "Initialize the plugin late so that the injected DOM does not disrupt the template compiler".
My solution (you can see it in this jsplunker: http://plnkr.co/edit/fXjDxs?p=preview ) is to set the visibility of the select tag to "hidden".
<select ui-select2 ng-model="....." style="visibility: hidden; ">......
When the component is loaded that tag is replaced with a div. In ui-select2.js I have added a line (line 208) to set its visibility to "visible".
elm.prev().css({"visibility": "visible"});