My webelement is inside a frame and i need to traverse through lot of div's inside the particular frame to reach to my required element.
Could you guys help me out in identifying it.
Tried with SwitchTo(), css selector() but not able to fix it.
Thanks in advance
<iframe id="ext-gen472" class=" ux-mif" frameborder="0" name="mif-comp-109379" style="overflow: auto; width: 1370px; height: 268px;" src="/SM9QA/cwc/nav.menu?name=navStart&id=ROOT%2FService%20Desk%2FRegister%20New%20Interaction"> `<div id="X49Edit" class="mandatoryFieldStyle">
<input id="X49" type="text" scripttype="text" value="" onblur=" applyToSameControl(this); " onclick="handleOnClick(this, event);" onchange="handleOnChange(this, event);" onfocus="handleOnFocus(this, event);" onkeyup="handleOnChange(this, event);" maxlength="100" style="width:100%; height:100%;" tabindex="" sctype="Text" datatype="string" buttonid="" dvdvar="" name="instance/title">
`
try this code ....
List<WebElement> frameList=driver.findElements(By.tagName("iframe"));
driver.switchTo().frame(1);
System.out.println(frameList.size());
Hi Bhumi did you tried switching of frames.
try using -
driver.switchTo().frame(driver.findElement(By.id("ext-gen472")));
driver.findElement(By.id("X49"));
Related
I am just not sure what will be the syntax for this
This is a drop-down which changes its ID so I wish to choose the label above to navigate the click
Here is the HTML
<label class="form-title">Charging and Billing Alignment</label>
<select name="ratingAndBillingAlignment" class="reverse-toggle-select check-if-form-row-visible hide-child-if-not-visible loadable-drop-down-37 loadable-drop-down-select" id="ratingAndBillingAlignment" makeloadabledropdown="37" style="display: none;" fixed_position=".popup-content-inner">
<option value="TRUE" class="done-into-select-dd">Yes</option>
<option value="FALSE" selected="selected" class="done-into-select-dd">No</option>
</select><span num="37" class="loadable-drop-down loadable-drop-down-container loadable-drop-down-container-37" id="makeLoadableDropDown37" style="position: relative;" title="No" title2="No"><span class="dropdown-label initialized" style="width: 100%;"><span class="dropdown-html"><span class="value_box" style="display: none;">FALSE</span><span class="text">No</span></span></span><span style="display: none; position: absolute; width: 100%; left: 0px;" class="dropdown-list custom-drop-down-dropdown-list custom-drop-down-dropdown-list-37" stop="0" loading="0" data-counter="37"><div class="option-list" style="max-height: 250px;"><div class="dropdown-link the-dd-counter-1 first-dd-link" c="1" title="Yes"><span class="dropdown-html"><span class="value_box" style="display: none;">TRUE</span><span class="text">Yes</span></span></div><div class="dropdown-link the-dd-counter-2 last-dd-link selected" c="2" title="No"><span class="dropdown-html"><span class="value_box" style="display: none;">FALSE</span><span class="text">No</span></span></div></div></span></span>
driver.findElement(By.xpath(
"//span[#class='dropdown-label initialized']/following-sibling::label[contains(text(),'Charging and Billing Alignment')and(#xpath='1')]"))
.click();
Thanks for your help!
Here is the xpath that you can use with name. As name does not update as it did in the case of id.
//select[#name='ratingAndBillingAlignment']
Locating <select> won't work in your case as its hidden. style="display: none;"
Try using below xpath to click on span looks alike dropdown
//label[contains(.,'Charging and Billing Alignment')]/following-sibling::span[contains(#class,'loadable-drop-down')]
I have been trying the documentation of dijit textbox, but there seem to be no proper documentation on how to do text-align: right css style settings.
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="firstname" />
If I add the "align: right" the parse fails. I also tried via CSS but the text-align seem to not be reflected.
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true, align: right" id="firstname" />
I also tried text align via css style but it does not parse well.
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="style: { width: '150px'; text-align: right}" id="firstname" />
I don't know if it is possible to set text alignments using data-dojo-props attribute. However you can solve your problem using CSS selectors:
HTML:
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true, align: right" id="firstname" />
CSS (examples):
input[name="firstname"] {
text-align: right;
}
or
#firstname {
text-align: right;
}
another elegant approach would be, to create an attribute selector querying the align: right value of your data-dojo-props attribute. With this selector you can reach all of your input items once.
input[data-dojo-props*="align: right"] {
text-align: right;
}
Here you can find an jsfiddle example.
UPDATE:
I have done some further investigations and I came to the conclusion that it is a syntax problem why the dojo parsing fails.
The following piece of code works without parsing errors:
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true, style:'text-align: right'" id="firstname" />
but the result is not as expected:
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox"
id="widget_firstname" role="presentation" widgetid="firstname" style="text-
align: right;"><div class="dijitReset dijitInputField dijitInputContainer">
<input class="dijitReset dijitInputInner" data-dojo-attach-
point="textbox,focusNode" autocomplete="off" name="firstname" type="text"
tabindex="0" id="firstname" value="Testing Testing"></div></div>
because the styling will applied to the wrapper div.
I my opinion the best way to handle your requirements is to work only with CSS stylings without using the data-dojo-props attribute.
Dojo supports right aligned text inputs natively through bi-directional text support https://dojotoolkit.org/reference-guide/1.10/quickstart/internationalization/bi-directional-text.html
This is intended to reverse the text direction of a portion or the entire page (including inputs) by setting the dir tag on an element:
<body dir="rtl">
<!-- Widgets Here -->
</body>
However, that probably isn't what you want. Try this CSS:
.dijitInputContainer .dijitInputInner {
text-align: right;
}
I'm using Excel VBA, Selenium and Chrome.
Threse is a dropdownbox box and I'm trying to select an option. Html code is:
<div class="x-form-field-wrap x-form-field-trigger-wrap x-abs-layout-item x-trigger-wrap-focus" id="ext-gen437" style="width: 100px; left: 330px; top: 70px;">
<input maxlength="1" spellcheck="false" id="ext-comp-1233" name="CITTADINANZA" class="x-form-text x-form-field x-field-uppercase x-trigger-noedit x-form-focus" readonly="" style="width: 75px;" />
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" class="x-form-trigger x-form-arrow-trigger" id="ext-gen438" />
</div>
The dispalyed text options are "Si" and "No" but in Html code there are no options, index, value...(it's just an input element; the img element is the arrow you have to click for a dropdown)
I tried to fill the input element using:
driver.FindElementByCss("#ext-comp-1233").AsSelect.SelectByIndex
driver.FindElementByCss("#ext-comp-1233").AsSelect.SelectByValue
driver.FindElementByCss("#ext-comp-1233").AsSelect.SelectByText
driver.FindElementByCss("#ext-comp-1233").Sendkeys
but I recive the error:
"Unexpected TagName Error.
Expected=select
Got=input"
...while Sendkeys doesn't work.
Do you have any idea?
Thanks :)
Try this:
obj.FindElementByXPath("xpath of element").AsSelect.SelectByText ("option text")
Note:
driver - name of the object you've created for webdriver.
The solution is to click on the drop down image, and when the dynamically created divs are displayed, click on those divs.
Is it possible that the user could select from the utility dropdown (see picture below) a search option which will effect the search text field?
Or is it possible merge the dropdown and search text field together?
I think you will be able to do this leveraging input-groups. But the docs also mention:
Avoid using elements here as they cannot be fully styled in
WebKit browsers.
HTML to integrate a <select> in the navbar:
<form class="navbar-form navbar-left select-search" role="search">
<div class="input-group">
<span class="input-group-addon">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Then apply the following CSS:
.select-search .input-group-addon {
padding: 0;
border: 0;
}
.select-search .input-group .input-group-addon > select.form-control {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
Demo: http://www.bootply.com/8zPGZ9ySOl
I found this works well in chrome, but in firefox the select arrow got some button like styling:
I'm not sure how to fix the style of the select arrow here. Style the select with -moz-appearance:none or -moz-appearance:menulist won't help. Possible related to: Clearing the background of a <select> element's pulldown button with CSS
1) I have a dialog on my web page having 2 buttons, Yes & No.
2) IDs of these buttons are dynamicaly changing every time.
3) How to handle this situation and click on Yes button?
4) Both buttons, Yes & No, have same classname 1.e. rwInnerSpan
5) Here is the Xpath for Yes button
(.//*[#id='confirm1381468352443_content']/div/div[2]/a[1]/span/span)
the part 1381468352443 in xpath is dynamically changing.
Below is the source code of page
`
<tr class="rwTitleRow">
<tr class="rwContentRow">
<td class="rwCorner rwBodyLeft"> </td>
<td class="rwWindowContent" valign="top">
<iframe frameborder="0" name="confirm1381468352443" src="javascript:'<html></html>';" style="width: 100%; height: 100%; border: 0px none; display: none;" tabindex="0">
<div id="confirm1381468352443_content">
<div class="rwDialogPopup">
<div class="rwDialogText">
<div>
<a class="rwPopupButton" href="javascript:void(0);" onclick="$find('confirm1381468352443').close(true);" tabindex="-1">
<span class="rwOuterSpan">
<span class="rwInnerSpan">Yes</span>
</span>
</a>
<a class="rwPopupButton" href="javascript:void(0);" onclick="$find('confirm1381468352443').close(false);" tabindex="-1">
<span class="rwOuterSpan">
<span class="rwInnerSpan">No</span>
</span>
</a>`
Thanks in Advance !!
You can directly check for the text in your Xpath:
driver.findElements(By.xpath("//a[#class='rwPopupButton']/span/span[contains(text(), 'Yes')]"))
There is a way to locate objects using partial link text, so you can try this:
driver.findElement(By.partialLinkText("Yes")).click();
Plain By.linkText may not work because of additional spaces or characters in the link.
You can click on the button based on the Text. Following method will give you a webelement based on the class locator and text.
WebElement getElementBasedOnClassAndText(String classLocator, String text){
List<WebElement> elements = driver.findElements(By.className(classLocator))
for(WebElement element : elements){
if(element.getText().contentEquals(text)){
return element
}
}
Assert.fail("Unable to find any element with the said Text")
}
Once you get the element you can take any action on it.
Since it is dynamic I would look for the changed name:
//Find the dynamicly created ID
String dynamicID = driver.findElement(By
.xpath("//iframe[contains(#name,'confirm')]")
.getAttribute("name");
//Use that ID to find the Yes option
driver.findElement(By
.xpath("//*[#id='"+dynamicID +"_content']/div/div[2]/a[1]/span/span")
.click();