Locate input text by partial Id in Selenium - selenium-webdriver

I need to locate and input text into the text field with the following HTML with Selenium:
<input slot="input" class="form-control" id="abc-gib-input-38303-70ft6l7k2g" aria-invalid="false" aria-required="true" aria-labelledby="label-abc-gib-input-38303-70ft6l7k2g label-abc-form-38302-42pti7lz8z" aria-describedby="help-text-abc-gib-input-38303-70ft6l7k2g feedback-abc-gib-input-38303-70ft6l7k2g feedback-abc-form-38302-42pti7lz8z help-text-abc-form-38302-42pti7lz8z" type="text" placeholder="" name="login" autocomplete="off">
The problem is each time page reloads the id changes - this part remains the same "abc-gib-input-38303-".
How to select this element?
I tried:
await driver.findElement(By.xpath('//*[contains(#id,"abc-gib-input"]'))
and it does not work.

You are missing a closing bracket ) in your XPath expression.
Instead of
await driver.findElement(By.xpath('//*[contains(#id,"abc-gib-input"]'))
It should be
await driver.findElement(By.xpath('//*[contains(#id,"abc-gib-input")]'))

Related

Get Value from a Input Box in Selenium with no attribute in markup

I have the following markup and in the browser it displays 'XYZ' but I see no attribute that I can use to grab it using Selenium and C#. Does it have to do with this being an angular element ?
<input class="primary-input ng-untouched ng-pristine" formcontrolname="EmployeeCode" maxlength="4" name="EmployeeCode" placeholder="" disabled="">
I tried
string val = Driver.FindElement(By.Name("EmployeeCode")).GetAttribute("value");

Can't find XPath value on an AngularJS input field

Is there a way to get the actual value of the input field for Selenium test?
For example:
I need to check if the field has a value and if the value is correct:
On the page:
Manager's Email: branch_manager#example.com.
I need to get the value 'branch_manager#example.com' but when I use XPath only the below is showing.
<input type="text"
name="Email"
id="Email"
ng-model="vm.email"
placeholder=""
maxlength="200"
ng-readonly="vm.editField"
ng-required="!vm.viewState"
ng-pattern="/^[a-zA-Z0-9.!#$%&�*+\/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
class="ng-pristine ng-valid md-input ng-valid-pattern ng-valid-maxlength ng-valid-required ng-touched"
readonly="readonly"
aria-required="false" aria-invalid="false">
I'm only getting the ng-model which contains the value what I actually want is the value inside the model. Is it possible?
You can extract the input text field value using the getAttribute() method as below
WebElement emailId=driver.findElement(By.id("Email"));
( or )
WebElement emailId=driver.findElement(By.xpath("//input[#id='Email']"));
//It will give the Value which is present in the input text field
System.out.println(emailId.getAttribute("value"));

Disable tooltip "Please fill out this field" when not using <form> tag (DNN)

Setting 'novalidate' or 'formnovalidate' will NOT fix this issue
I'm using the framework DNN. This framework wraps each page in a form tag which breaks my custom forms. To get passed this I'm using ng-form on a tag. Because of this fix I always see the default tooltip even though I'm using bootstraps uib-tooltip. I'm willing to go as far as jQuery to fix this issue however I read a post where apparently Chrome and Firefox have both disabled the ability to select and edit the default tooltips. Example:
<div role="form" ng-form="myForm" novalidate>
<div class="form-group">
<label>
<input type="text" id="Identifier" name="Identifier" ng-minlength="3" ng-maxlength="14" class="form-control" ng-model="$ctrl.Identifier" ng-required="true" uib-tooltip="{{ $ctrl.tooltips.identifier }}" tooltip-enable="myForm.Identifier.$invalid && myForm.Identifier.$touched">
</label>
</div>
</div>
Displays "Please fill out this field". How can I remove the default tooltip?
Thanks to this post by jscher2000 I was able to find a work around. Simply add a 'title' tag and set it's contents to an empty space. Simply passing in empty quotes doesn't work there must be at least 1 space between the quotes that's empty. Example:
<input type="text" name="Name" title=" ">
Thanks.

Getting Text from Modal : Protractor / Webdriver

<input type="text" class="form-control input-lg" id="name" placeholder="Insert Your Name Here" ng-model="form.Name" required>
I have a model called as above. I'm trying to validate the text after it's inputted. I've seen other similar examples but nothing is working for me. I'm trying to test it with this setup. I end up getting
Expected null to equal 'Your Inputted Text'
In Page Object File.
this.formInput = element(by.model('form.Name'));
In Testing File.
setup.formInput.sendKeys('Jim');
setup.formName.click().then(function () {
expect(setup.formInput.getAttribute('form.Name')).toEqual('Jim');
});
How can I capture / confirm the text that was entered?
setup.formInput.getAttribute('value')
Not tested. But I am hoping that will return you the text you want

Posting a form with a select tag with ngUplaod

I'm using the directive ngUpload to post form with a fileupload. https://github.com/twilson63/ngUpload
If you have a input tag like the one below, the "name" attribut with the input value is posted to the server.
<input type="text" name="pr_title" ng-model="product.pr_title" class="form-control" id="title" placeholder="Ex: Eagle">
But it does not work when I have select tag:
<select class="form-control" ng-model="subcategory" name="subcategory" ng-options="s.sc_title for s in subcategories"></select>
There is no example in the docs how to do it with select.
Any ideas?

Resources