I have a page with multiple textboxes and dropdowns with values that I am trying to validate. The values in them will be dynamic in each run.
The HTML looks something like:
<input readonly="readonly" class="form-control valid" data-val="true" data="ABC" aria-invalid="false" xpath="1">
What I want to do is grab the value of "data" for each textbox. I have used scriptAll before in such a case when I was grabbing text by using innerText. However, that won't work with a regular value such as in the HTML above.
I did try one solution that worked:
driver.value(//input[#data])
However, that just grabs the first textbox value, is there a way I can combine scriptAll with driver.value? OR would I be better off doing some JS here?
Thank you in advance!
Yes, refer the docs for scriptAll(): https://github.com/karatelabs/karate/tree/master/karate-core#scriptall
Use whatever JS works to get an attribute value. Haven't tried, but this should work, you get the idea:
* def list = scriptAll('input', "_.getAttribute('data')")
Related
I've been having trouble around finding elements by attribute/property. Following UI visible example:
<input tabindex="0" placeholder="www.stuff.com/example" type="text" id="sub-selector-37" class="form-control" value="">
The unique piece is the placeholder text.
I've tried the following:
And waitFor('input[placeholder=www.stuff.com/example]') - Error
And waitFor('input[placeholder="www.stuff.com/example"]') - Error
And waitFor('input[placeholder='www.stuff.com/example']') Finds nothing
Also tried a more direct input approach:
Then waitFor('{}Something else')
Then input('input[placeholder=www.stuff.com/example']', 'Stuff')
I'm hoping this is just good old PEBKAC on my part. Any suggestions would be greatly appreciated.
Here you go, use double-quotes and nest single-quotes:
And waitFor("input[placeholder='www.stuff.com/example']")
A tip: use the debugger and you can experiment with things like highlightAll('input') and narrow down what works: https://twitter.com/KarateDSL/status/1252817691963830272
I have these 2 xpath that are different each time I load a webpage.
The xpaths were recorded by Selenium-IDE and always have mainForm_view within the id string and the text before and after this always changes.
xpath=//input[#id='abc_hyd_wuu2_8333nd_mainForm_view_jjd_uueue2_jjd_11_jkdhd']
xpath=//div[#id='abc_hyd_wuu2_8333nd_mainForm_view_kcjjcs_sjsjs_jjdj_994_kkk']/div/div[2]/div/div/div/a[1]/h2
I've tried to locate the id like below but doesn't work.
xpath=//input[contains(#id,'mainForm_view')]
xpath=//div[contains(#id,'mainForm_view')]
Which would be the correct way to do it?
Thanks in advance.
UPDATE
I've tried with CSS selector like below but it seems is taking another id that is within an input element
document.querySelector("input[id*='mainForm_view']").id
Examining the html code I see that the id I need is related with a unique class. The code is like below:
<div class="Class_p2">
<div class="Class_p3" style="...">
<input name="8333nd$mainForm$view$jjd$uueue2" type="text" class="class a1 n1-Control" value="xyz" id="8333nd_mainForm_view_jjd_uueue2" disabled="disabled" style="..">
</div>
<input name="8333nd$mainForm$view$ttyi" type="text" disabled="disabled">
</div>
I've tried the following Javascript code in Chrome console but it doesn't work
document.getElementsByClassName("class a1 n1-Control").id
How would be to get the id=8333nd_mainForm_view_jjd_uueue2 that is related with Class=class a1 n1-Control?
UPDATE2
I was finally able to do it with
document.getElementsByClassName("class a1 n1-Control")[0].id
Thanks for all the help and time.
You can write css selector as :
input[id*='mainForm_view']
for div it'd be :
div[id*='mainForm_view']
Asterisk is to match the sub string part.
Note that if any id contains mainForm_view that will also be selected, so better to check in developers tool before proceeding.
You can try finding some other element for which xpath/css locator remains same and then try to reach to this element by traversing from there. You can use parent, ancestor, preceding-sibling, following-sibling keywords in order to traverse. Hope it helps :)
The page contains a multi-select dropdown (similar to the one below)
The html code looks like the below:
<div class="button-and-dropdown-div>
<button class="Multi-Select-Button">multi-select button</button>
<div class="dropdown-containing-options>
<label class="dropdown-item">
<input class="checkbox">
"
Name
"
</label>
<label class="dropdown-item">
<input class="checkbox">
"
Address
"
</label>
</div>
After testing in firefox developer tools, I was finally able to figure out the xPath needed in order to get the text for a certain label ...
The below XPath statement will return the the text "Phone"
$x("(//label[#class='dropdown-item'])[4]/text()[2]")
The label contains multiple text items (although it looks like there is just one text object when looking at the UI) in the label element. There are actually two text elements within each label element. The first is always empty, the second contains the actual text (as shown in the below image when observing the element through the Firefox developer tool's console window):
Question:
How do I modify the XPath shown above in order to use in Selenium's FindElement?
Driver.FindElement(By.XPath("?"));
I know how to use the contains tool, but apparently not with more complex XPath statements. I was pretty sure one of the below would work but they did not (develop tool complain of a syntax error):
$x("(//label[#class='dropdown-item' and text()[2][contains(., 'Name')]]")
$x("(//label[#class='dropdown-item' and contains(text()[2], 'Name')]")
I am using the 'contains' in order to avoid white-space conflicts.
Additional for learning purposes (good for XPath debugging):
just in case anyone comes across this who is new to XPath, I wanted to show what the data structure of these label objects looked like. You can explore the data structure of objects within your webpage by using the Firefox Console window within the developer tools (F12). As you can see, the label element contains three sub-items; text which is empty, then the inpput checkbox, then some more text which has the actual text in it (not ideal). In the picture below, you can see the part of the webpage that corresponds to the label data structure.
If you are looking to find the element that contains "Name" given the HTML above, you can use
//label[#class='dropdown-item'][contains(.,'Name')]
So finally got it to work. The Firefox developer environment was correct when it stated there was a syntax problem with the XPath strings.
The following XPath string finally returned the desired result:
$x("//label[#class='dropdown-item' and contains(text()[2], 'Name')]")
In my case, there are some legacy web sites, in which not all the inputs have
id attribute properly set. Such as this:
<div class="form-group">
<label>Amount</label>
<input id="unreasonablename" type="text" value=""></input>
</div>
But human testers can still test it by typing amount value in the input right behind "Amount". I'd like to make web driver do the same thing:
webDriver.inputAfter("Amount", 100); //I do not want to use "unreasonablename" to find the input.
But how can I find the input element after the text "Amount"? Thanks.
There is a relative question here: In Selenium Webdriver, how to get a text after an element?. But I'm not familiar with xpath and do not know if my case can be solved in the same way.
To find the <input> element just after the text Amount you can use the findElement() method along with the Locator Strategy as follows :
webDriver.findElement(By.xpath("//label[contains(.,'Amount')]//following::input[1]"));
you can try following_sibling as
webDriver.findElement(By.xpath("//*[text()='Amount']/following-sibling::Input"));
try this :
driver.findElement(By.xpath("//label[text()='Amount']/following-sibling::input")).sendKeys("amount to be sent");
you can write some generic method like below. It can be used for all the required fileds by passing the label name and input value as argument
void enterInputAfterLabel(String labelname,String value){
driver.findElement(By.xpath("//label[text()='"+labelname+"']]/input")).sendKeys(value);
}
I have an input element where I need to set one extra attribute and its value.
<input autocomplete="off" id="to_input" name="to" class="form-control arrival ui-autocomplete-input" placeholder="To" data-input-component="searchCondition" data-input-support="suggest" type="text">
I need to add the below attribute:
How can I do this in Geb?
To say a little more details, when I enter TPE in the input text box, some dropdown items appears and when I select one of them like
"Taipei, XXX.. (TPE)"
Than the new attributes are set automatically same as the picture above.
The only way to do it, is using JavaScript executor:
browser.driver.executeScript("your script")
And script using jquery will look like:
$('jquery-selector').attr('attribute-name', 'attribute-value');
Of course make sure to fill in your data in quotes!