I'm trying to set a telephone numbers country code in Cypress. If I had an 'id' to work with I would just use something like
cy.get('#countryCode').select('+44')
However the code I'm working with doesn't have an id to work with. The dropdown html looks like
<select _ngcontent-kln-c8="" aria-label="Country Code for home phone number" class="uppercase mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-valid ng-touched" matnativecontrol="" id="mat-input-6" aria-describedby="mat-hint-3" aria-invalid="false" aria-required="false"><option _ngcontent-kln-c8="" style="display: none" value="">+null</option><!----><option _ngcontent-kln-c8="" class="uppercase ng-star-inserted" value="1: 44"> +44 (United Kingdom) </option><option _ngcontent-kln-c8="" class="uppercase ng-star-inserted" value="2: 353"> +353 (Ireland) </option>
Any help would be much appreciated. Thanks
Not a problem at all. Based on the HTML snippet you provided, I would recommend using the aria-label since this should be unique on the page.
cy.get('[aria-label="Country Code for home phone number"]').select(''+44')
Let me know if you have any other questions!
Related
Below is my HTML
<div id="slectrole" class="collapse in" role="tabpanel" aria-labelledby="selectrole">
<div class="panel-body">
<div class="dropdown">
<input class="search-control jsSayt jsRolesFreeText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Eg: Delivery, BPO, Driver'" placeholder="Eg: Delivery, BPO, Driver" value="" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="text">
<ul class="jsSaytList jsRolesFilter">
<li id="jsFilter_subRole_1" class="checkbox-inline jsFilterSubRole jsRoleValue_1" data-value="Accountant">
<input id="Accountant" class="radio-custom jsFilterRadio jsRole" value="Accountant" name="Role" data-roleid="1" type="radio">
<label class="radio-custom-label" for="Accountant">Accountant</label>
Below is the code I am using to click the radio button:
wait.until(EC.visibility_of_element_located((By.XPATH, "//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']")))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']").click()
The code runs ok but it does not select the radio button.
OK, so I can understand your frustration, I tried your code and wasn't able to .click() (select) the element when located via xpath. See bellow print-screen:
As you can see, it was only clicking the radio-button when issuing a .click() via a CSS-located element.
Question No.1: Are you bound to the xpath locator strategy in one way or another?
If NOT, then just use a regulat CSS selector: 'input[id="Accountant"]'.
Else, you have to figure out what is wrong with the website you are testing, or switch to another WebElement locator strategy. (e.g.: ID, Class, CSS, LinkText, etc.)
If you would opt to go with the CSS locator-strategy, then your code would look like this:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("input[id='Accountant']").click()
Alternatively, you can try to click on the <label> tag attached to the radio-button, which in my console works the same way:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("label[for='Accountant']").click()
Explanation: In a real-life scenario, you can select the radio-button both via the actual radio-button, or via its label. That's why your solution worked.
Question No.2: Why are you using such a long xpath selector?
In order to have a optimal selector, you should ALWAYS go with the shortest, combination of tags/attributes that will UNIQUELY identify your target element. Else you will be susceptible to website changes, flaky test cases, etc.
You can perform the click on the drop down and then wait for the radio button to appear, before clicking it. Hence, try following:
driver.find_element_by_xpath("//div[#id='slectrole']/div/div[#class='dropdown']/input[1]")).click()
wait = WebDriverWait(driver, 10)
wait.until(EC.visibility_of_element_located((By.XPATH, '//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]')))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]").click()
Let me know, if above code works for you.
I'm trying to automated a application designed in Ext Js, xpath identification is become complex. Please help in getting the xpath for the below scenario.
For a dropdown having a set of names, need to select a name from the list available.
I'm using a mouse action to locate the drop down name and then moveToElement particular element in the List of menu present.
For example If the menu is containing a list of names like, Abi, Ashwini Asha, Ashwini, Diva.
Using parameterizing I'm able to select the names from the menu.
But when I need to select Ashwini from the menu ,since Ashwini Asha is already present in the menu , Ashwini Asha object gets clicked.
contains() is not working here. Which function should I use?
The below is the code which am using :
html :
<div id="combo-1023-inputWrap" class="x-form-text-wrap x-form- text-wrap-default" role="presentation" data-ref="inputWrap">
<input id="combo-1023-inputEl" class="x-form-field x-form-text x-form-text-default " type="text" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-required="false" aria-invalid="false" aria-readonly="false" aria-disabled="false" aria-hidden="false" role="combobox" value="Triton" name="selectedName" size="1" data-ref="inputEl" data-componentid="combo-1023">
......
<li>------------ Ashwini Asha</li>
<li>------------ Ashwini</li>
</div>
to click on the menu :
action.moveToElement(driver.findElement(By.xpath("//input[#name='selectedName']"))).click().perform();
to load the data in the menu :
wait.until(ExpectedConditions.visibiltyOfElementLocated(By.xpath("//li[contains(text(),'"+NameParameter+"')]")));
click the object :
action.moveToElement(driver.findElement(By.xpath("//li[contains(text(),'"+NameParameter+"')]"))).click().perform();
Let me know how to select the name Ashwini alone?
Thanks
No need to use contains in your xpath. Go for exact match of the name.
By.xpath("//li[text()='"+NameParameter+"']")
or
By.xpath("//li[.='"+NameParameter+"']")
If I'm understanding this correctly, you could use:
Driver.Instance.findElements(...
This would return an array in which you could just iterate and perform actions on based on the .text of the element.
When I'm trying to click checkbox I getting an error
browser.checkbox(:id, 'AgreeToProceedWithPersonalData').click
Element is not clickable at point (314.5, 448). Other element would receive the click: <label for="AgreeToProceedWithPersonalData"></label>
And when I click at element below I getting agreement page opened.
browser.label(:for, 'AgreeToProceedWithPersonalData').click
How do I can set checkbox and do not open agreement?
<div class="checkbox">
<input data-val="true" data-val-mustbetrue="Ваше согласие необходимо для продолжения" data-val-required="The I agree to proceed personal data field is required." id="AgreeToProceedWithPersonalData" name="AgreeToProceedWithPersonalData" type="checkbox" value="true" autocomplete="off" checked="checked">
<label for="AgreeToProceedWithPersonalData">I agree to proceed personal data.
Read the agreement
</label>
<span class="field-validation-valid" data-valmsg-for="AgreeToProceedWithPersonalData" data-valmsg-replace="true"></span>
</div>
Often times developers like to make things pretty by layering things on top of standard html elements, and the driver doesn't like that.
Please don't over-use this, as it is not good practice for most things, but in situations like this I find myself needing to do:
browser.checkbox(id: 'AgreeForBKIRequest').fire_event :click
Most probably there is something very custom with javascript on the page if fire_event is not working. So it is hard to suggest and it will be nice if you will provide the url of the page to experiment with.
However you could try such suggestion with no guaranty (just guess)
browser.execute_script("window.stop")# That will stop all the scripts on the page. May be usefull may be not
browser.execute_script("document.getElementById('AgreeToProceedWithPersonalData').click();")# That will perform click using pure javascript
All of the elements are dynamic. I can see only Placeholder which is unique from the following html:-
<input
id="ext-gen1617"
type="text"
size="20"
class="x-form-field x-form-text x-form-focus"
autocomplete="off"
aria-invalid="false"
placeholder="Gender"
data-errorqtip=""
role="textbox"
aria-describedby="combobox-1166-errorEl"
aria-required="true"
style="width: 78px;"
/>
I need to get the value displayed in
placeholder="Gender".
I tried using
//input[#placeholder='Gender']
But my webdriver script failed to identify it.
Can anyone please help me out with possible solution to it?
String s=driver.findElement(By.xpath("//input[#placeholder='Gender']")).getAttribute("placeholder");
System.out.println(s);
To get an attribute for a filed, you can use the .getAttribute() method.
I assume you are dealing with (front end)script generated web elements, then you must need to embrace lean way of thinking. Don't try to pull out a web element by it's property alone. If you are not getting them try to build a xpath from its parent or siblings.
say, the HTML goes like this,
<div id="somestatic id">
<div id="xyz">
<input name="dynamic one"/>
</div>
</div>
Then you can build a xpath as ,
//*[#id='staticID']/div/input
for the HTML,
<div id="staticID"></div>
<input name="dynamic one"/>
the xpath is ,
//*[#id='staticID']/following-sibling::input
similarly there are n number of option available. Give them a try
Try
driver.findElement(
By.cssSelector("input[id*='ext-gen']")
).getAttribute("placeholder")
Let me know is the above statement is working or not.
The best way is to find the element with CSS selector in this case -
input[placeholder='Gender'], which can easily find the element.
I am trying to get a calendar function to work:
<label id="jform_issuedate-lbl" class="hasTip" title="Issue date::" for="jform_issuedate">Issue date</label>
<input id="jform_issuedate" type="text" value="2013-09-25" name="jform[issuedate]" title="Wednesday, 25 September 2013">
<img id="jform_issuedate_img" class="calendar" alt="Calendar" src="/media/system/images/calendar.png">
However when I use it in the site there is no pop up and no error is thrown. It was working and now isn't. I'm sure I must be doing something stupid and help appreciated
I found the problem
I had this in before another bit of script and it seems it isn't compatible with the calendar function in joomla 2.5