Html:
<input size="24" autocomplete="off" id="P.Gender" name="P.Gender" class=" x-form-text x-form-field x-form-focus" style="width: 125px;" title="" type="text">
<div class="x-layer x-combo-list " id="ext-gen1943" style="position: absolute; z-index: 11000; visibility: visible; left: 377px; top: 232px; width: 148px; height: 60px; font-size: 12px;">
<div class="x-combo-list-inner" id="ext-gen1944" style="width: 148px; height: 60px;">
<div class="x-combo-list-item ">Unknown</div>
<div class="x-combo-list-item ">Male</div>
<div class="x-combo-list-item x-combo-selected">Female</div>
</div>
</div>
Question: How to select Male/Female/Unknown from above HTML using Selenium webdriver? There is no select class in HTML, so I am not able to use Select.
You can normally use xpath with contains for selecting male/female/unknowm. Otherwise you can ask your developers to add select tag for these dropdowns if they can make the changes.
Example: //div[contains(text(),'Male')]
Related
In my SeleniumWebdriver test, I need to retrieve the text of a fieldlabel-content based on the fieldlabel-label to ensure info provided for every fieldlable-label is correct.
Here is the HTML code:
<div class="gridlayout-row" style="padding-top: 0px;">
<div class="gridlayout-column" style="padding-left: 0px; width: calc((100% - 110px) * 0.166667 + 10px);">
<div class="gridlayout-content">
<label class="fieldlabel">
<div class="fieldlabel-label">Type</div>
<div class="fieldlabel-content">Paid</div>
</label>
</div>
</div>
<div class="gridlayout-column" style="padding-left: 10px; width: calc((100% - 110px) * 0.166667 + 10px);">
<div class="gridlayout-content">
<label class="fieldlabel">
<div class="fieldlabel-label">Expires</div>
<div class="fieldlabel-content">Jul 27, 2017</div>
</label>
</div>
</div>
<div class="gridlayout-column" style="padding-left: 10px; width: calc((100% - 110px) * 0.166667 + 10px);">
<div class="gridlayout-content">
<label class="fieldlabel">
<div class="fieldlabel-label">Last update</div>
<div class="fieldlabel-content">Jul 12, 2017</div>
</label>
</div>
</div>
You can find div element with class fieldlabel-label using its text and use following-sibling to get element with fieldlabel-content class.
driver.findElement(By.xpath("//div[#class='fieldlabel-content and contains(text(), 'Expires')']/following-sibling::div[#class='fieldlabel-content']"));
You can try this Xpath :- //div[text()="Type"]/following-sibling::div[#class="fieldlabel-content"]
In above xpath you can provide dynamic 'fieldlable-label' text in first div. On the biases of that you can get respective fieldlabel-content value.
driver.findElement(By.xpath("//div[text()="Type"]/following-sibling::div[#class="fieldlabel-content"]")).getText();
There are two buttons on HTML pop up have almost similar. Both buttons are same except for the span text nothing is different.
Can anyone please suggest, how to write the xpath of OK button?
I have wrote below xpath but system showing error as '.
My Xpath
driver.findElement(By.xpath("//div[#class='ui-dialog-buttonset']/descendant::button[#class='ui-button']/span[contains(#class, 'ui-button-text') and text() = 'OK']")).click();
Error
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element:
Here is My HTML code of pop up:
HTML
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" style="height: auto; width: 350px; top: 295.5px; left: 621px; display: block; z-index: 102;" tabindex="-1" role="dialog" aria-describedby="DivExtension" aria-labelledby="ui-id-2">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix ui-draggable-handle">
<span id="ui-id-2" class="ui-dialog-title">内線番号</span>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" type="button" role="button" title="Close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">Close</span>
</button>
</div>
<div id="DivExtension" class="display-none ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 68px;">
<div id="extRow" class="display-none" style="display: block;">
<p class="form-label">
<label for="extension">内線番号</label>
</p>
<p class="form-input">
<input id="Extension" class="text" type="text" placeholder="Extension" value="">
</p>
</div>
</div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" style="height: 34px; width: 104px;" role="button">
<span class="ui-button-text">OK</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" style="height: 34px; width: 124px;" role="button">
<span class="ui-button-text">キヤンセル</span>
</button>
</div>
</div>
Depending if you have multiple buttons on the page with the text OK.
If you want use multiple condition you can also use something like
//*[condition_1][condition_2]
In this case:
//span[#class='ui-button-text'][text()='OK']
or for the button:
//button[#class='ui-button'][.//span[contains(text(), 'OK')]]
For multiple classes example:
//button[#class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only']
or as you use it with contains.
Note: Make sure you are waiting for the element if needed.
For an element with multiple classes you have 2 options:
use #class='my_class'
this mean to use the entire value of attribute class => my_class will be all classes, the entire string
use contains(#class, 'my_class')
this option allows you to use just a part of the class attribute value => my_class could be any part of the string: ui, button, ui-button etc.
In your case, you used button[#class='ui-button'] which is not correct since the button has class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only".
Check these two xpath's for ok button
//button/span[contains(text(),'OK')]
OR
//div[#class='ui-dialog-buttonset']/button/span[contains(text(),'OK')]
In order page when I make a payment, I get the created payment listed in payments list page. The created payment will always list on the first row of the table. I want to know how to get a text “This is Project:
“ and also be able to click on it. Every payment has its own id in a row i.e. Here is the snipped of the table:
<div id="PAYMENT-CONTAINER" style="clear:both">
<div class="list-widget" id="PAYMENT-LIST">
<ul style="visibility: visible;" class="table">
<li id="393118">
<div class="no-expand col0" style="text-align: center; width: 31px;"><input type="checkbox" class="rowSelect" value="393118"></div>
<div class="no-expand col1" style="text-align: center; width: 57px;">
<span class="tag untagged">•••</span>
</div>
<div class="col2" style="text-align: center; width: 155px;">
07/28/2015
</div>
<div class="col3" style="width: 401px;">
5280 FAST PITCH
</div>
<div class="col4" style="width: 344px;">
This is Project:
</div>
<div class="col5" style="text-align: right; width: 213px;">
$25.00
</div>
<div class="col6" style="width: 188px;">
Stacey Smith
</div>
<div class="col7" style="width: 178px;">
In Process
</div>
</li>
<li id="393119">
<div class="no-expand col0" style="text-align: center; width: 31px;"><input type="checkbox" class="rowSelect" value="393119"></div>
<div class="no-expand col1" style="text-align: center; width: 57px;">
<span class="tag untagged">•••</span>
</div>
<div class="col2" style="text-align: center; width: 155px;">
07/28/2015
</div>
<div class="col3" style="width: 401px;">
5280 FAST PITCH
</div>
<div class="col4" style="width: 344px;">
Donations are for good cause
</div>
<div class="col5" style="text-align: right; width: 213px;">
$26.00
</div>
<div class="col6" style="width: 188px;">
Stacey Smith
</div>
<div class="col7" style="width: 178px;">
In Process
</div>
</li>
You can get the text WebElement by using below xpath:
//div[#class='col4']
or
//div[contains(text(),'This is project');
you can use any one of the xpath to find web element.
Something like this:
WebElement element = driver.findElement(By.xpath("//div[#class='col4']"));
//Print text
print(element.getText());
//Click on that element if it is clickable.
element.click();
Xpath selector for your case is: //div[contains(text(), 'This is Project:')]
. For example, if instance of webdriver is called like "driver", then code should be:
driver.findElement(By.xpath("//div[contains(text(), 'This is Project:')]")).click();
If your required text "This is Project:" always appears in first row, then you can try below xpath:-
//li[1]/div[#class='col4']
//to get text:-
driver.findElement(By.xpath("//li[1]/div[#class='col4']")).getText();
//to click on it:-
driver.findElement(By.xpath("//li[1]/div[#class='col4']")).click();
So, I have a page that runs a java applet generated through an external source. I also have some source from another site I own, that uses CSS to create drop-down menus. I am trying to implement the same drop-down style in my new java-applet-laden page.
The problem is, my menu is always layered underneath the java applet without regard for z-layers. I think this is an "answered" issue here: How to display <div> over a Java applet in Chrome. However, the "solution" is a dead link.
I tried modifying the code here: http://midgetontoes.com/blog/2014/05/02/introduction-to-iframe-shim to fit my application.
My implementation fails on multiple levels. First, whenever my shim/drop-down displays, it shifts the content of the entire page down 20-ish px. Second, the drop down menu still disappears under the plugin.
Here are the relevant sections of code:
CSS:
.iframeshim-container {
position:relative;
z-index: 100;
}
header ul.menu li.parent ul {
background:url(dropdown_bg.png) 50% 0 repeat-x #98A2A9;
display:none;
left:0;
margin:0;
padding:10px;
position:absolute;
top:1px;
width:200px;
z-index:100;
}
.iframeshim-container .content-container{
display:none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.iframeshim-container .shim-iframe{
display:none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10000;
}
header ul.menu li.parent:hover ul {
display: block;
}
header ul.menu li.parent:hover .iframeshim-container .shim-iframe {
display: block;
}
header ul.menu li.parent:hover .iframeshim-container .content-container {
display: block;
}
HTML:
<div class="container maincontainer">
<header class="clearfix">
<nav>
<ul class="menu" id="mainnav">
<li>Home</li>
<li class="deeper parent">Test
<div class="iframeshim-container">
<div class="content-container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<iframe class="shim-iframe" frameborder="0" scrolling="no"></iframe>
</div>
</li>
</ul>
</nav>
</header>
<section id="main" class="clearfix">
<div id="content" class="clearfix" style="width: 910px;">
<section id="maincontent">
<APPLET CODE="myCode"></APPLET>
</section>
</div>
</section>
</div>
Here is the situation:
Click on Import file button (this action will upload a file).
After file upload, then appears a popup (HTML popup). I used driver.switchTo().frame(1); to switch to that popup and click "Next" in that popup.
Clicking Next will navigate user to second step in that popup. Click process commission button in that second step of popup.
After clicking process commission button, then appears a new confirmation popup (HTML popup).
I am not able to click yes in that confirmation popup.
I tried using:
driver.switchTo().frame(0); - did not work
driver.switchTo().frame(1); - did not work
driver.switchTo().frame(2); - did not work
Please suggest any solution.
<form id="Form1" enctype="multipart/form-data" action="ProcessCommission.aspx?i=2115&pn=Manage+Commission&j=2345&prn=Process+Commission" method="post">
<iframe scrolling="no" frameborder="0" src="javascript:'<html></html>';" style="position: fixed; width: 400px; height: 100px; left: 431px; top: 53px; background-color: rgb(255, 255, 255); z-index: 3003;" tabindex="-1">
<div id="RadWindowWrapper_confirm1381733327500" class="RadWindow RadWindow_Windows7 rwNormalWindow rwTransparentWindow" style="width: 400px; height: 100px; position: absolute; transform: none; backface-visibility: visible; visibility: visible; left: 431px; top: 377px; z-index: 3003;" unselectable="on">
<table class="rwTable" cellspacing="0" cellpadding="0" style="height: 51px;">
<tbody>
<tr class="rwTitleRow">
<tr class="rwContentRow">
<td class="rwCorner rwBodyLeft"> </td>
<td class="rwWindowContent" valign="top">
<iframe frameborder="0" name="confirm1381733327500" src="javascript:'<html></html>';" style="width: 100%; height: 100%; border: 0px none; display: none;" tabindex="0">
<div id="confirm1381733327500_content">
<div class="rwDialogPopup">
<div class="rwDialogText">
<div>
<a class="rwPopupButton" href="javascript:void(0); "onclick="$find('confirm1381733327500').close(true);" tabindex="-1">
<span class="rwOuterSpan">
<span class="rwInnerSpan">Yes</span>
</span>
</a>
<a class="rwPopupButton" href="javascript:void(0);" onclick="$find('confirm1381733327500').close(false);" tabindex="-1">
<span class="rwOuterSpan">
<span class="rwInnerSpan">No</span>
</span>
dr.SwitchTo().Frame(dr.FindElement(By.TagName("iframe")));
dr.SwitchTo().DefaultContent();
dr.FindElement(By.XPath("your stuff goes here").Click();
dr.SwitchTo().DefaultContent();//switch back to default content of original page
Try this:
driver.switchto.frame(0)
driver.switchto.frame(confirm1381733327500)