Below is some HTML code, in which I need to find the element with the content win8 (last element, <div class="desc">win8</div>).
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 5002; outline: 0px none; position: absolute; height: auto; width: 800px; top: 7px; left: 537px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div class="multi-wizard instance-wizard ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 518px;">
<div class="progress">
<form novalidate="novalidate">
<div class="steps">
<div class="step setup loaded" wizard-step-id="setup" style="display: none;">
<div class="step select-iso loaded" wizard-step-id="select-iso" style="display: block;">
<div class="wizard-step-conditional select-template" style="display: block;">
<div class="main-desc">
<div class="template-select content tab-view ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<input type="hidden" value="XenServer" name="hypervisor" wizard-field="hypervisor">
<div id="instance-wizard-featured-templates" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div class="select-container">
<div class="select **even**">
<input type="radio" name="templateid" wizard-field="template" value="b0c24832-6fdf-11e4-a45f-b6eb114441ae">
<div class="select-desc">
</div>
<div class="select **odd**">
<input type="radio" name="templateid" wizard-field="template" value="7720cdb2-b81a-4839-94cd-b56b660e3324">
<div class="select-desc">
<div class="name">win8</div>
<div class="desc">win8</div>
</div>
</div>
I tried the following XPath:
.//*[#id='instance-wizard-featured-templates']/div/div[2]/input
The issue is the screen has 2 elements, even and odd. Each time it loads it swaps the values. So the XPath selects the wrong element.
Is there a way to exactly select win8?
Assuming you always want to get the element with the class named 'desc', the correct XPath is looks like this:
//div[#class="desc" and text()="win8"]
This selects all <div> elements having the class 'desc' and 'win8' as text.
Related
What is the best way to Change width of drop down in semantic UI, so that it will be responsive.
<div id="city" class="colomn ui search selection dropdown" style="min-width: 121px; white-space: nowrap; max-width: 251px;">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select City</div>
<div class="menu">
<div class="item" data-value="Ahmedabad">Ahmedabad</div>
<div class="item" data-value="Bangalore">Bangalore</div>
<div class="item" data-value="Chennai">Chennai</div>
<div class="item" data-value="Delhi">Delhi</div>
<div class="item" data-value="Hyderabad">Hyderabad</div>
<div class="item" data-value="Kolkata">Kolkata</div>
<div class="item" data-value="Mumbai">Mumbai</div>
</div>
</div>
<style>
.ui.dropdown>.text {
display: block !important;
overflow: hidden;
}
</style>
I'm testing steampowered.com and I need to find element on the form with condition that it has descendant with text "Games".
It's that element below(it locates in the div with class "store_nav") and I'm using such xpath to locate it.
//div[contains(#class,'store_nav')]/div[descendant::a[contains(text(),'Games')]]"
<div class="store_nav_bg">
<div class="store_nav">
<div id="foryou_tab" class="tab flyout_tab" data-flyout="foryou_flyout" data-flyout-align="left" data-flyout-valign="bottom" onmouseover="EnsureStoreMenuTagsLoaded( '#foryou_yourtags' );">
<div id="foryou_flyout" class="popup_block_new flyout_tab_flyout responsive_slidedown" style="visibility: visible; top: 42px; left: 0px; display: none; opacity: 0.245479;">
<div id="genre_tab" class="tab flyout_tab" data-flyout="genre_flyout" data-flyout-align="left" data-flyout-valign="bottom">
<span class="pulldown">
<a class="pulldown_desktop" href="http://store.steampowered.com/games/?snr=1_4_4__12">Games</a>
</span>
<div id="genre_flyout" class="popup_block_new flyout_tab_flyout responsive_slidedown" style="visibility: visible; top: 42px; left: 131.667px; display: none; opacity: 1;">
<div id="software_tab" class="tab flyout_tab " data-flyout="software_flyout" data-flyout-align="left" data-flyout-valign="bottom">
<div id="software_flyout" class="popup_block_new flyout_tab_flyout responsive_slidedown" style="display: none;">
<div id="hardware_tab" class="tab flyout_tab " data-flyout="hardware_flyout" data-flyout-align="left" data-flyout-valign="bottom">
<div id="hardware_flyout" class="popup_block_new flyout_tab_flyout responsive_slidedown" style="display: none;">
<div id="videos_tab" class="tab flyout_tab " data-flyout="videos_flyout" data-flyout-align="left" data-flyout-valign="bottom">
<div id="videos_flyout" class="popup_block_new flyout_tab_flyout responsive_slidedown" style="display: none;">
<a class="tab " href="http://store.steampowered.com/news/?snr=1_4_4__12">
<div class="search_area">
</div>
</div>
The problem is that this xpath points on incorrect element(firepath shows even several elements). For comparison, this xpath works properly
//div[contains(#class,'store_nav')]/div[span/a[contains(text(),'Games')]]
What am I doing incorrect with descendant element?
//div[contains(#class,'store_nav')]
This will match the div class="store_nav_bg" and the div class="store_nav"nodes.
This Xpath:
//div[contains(#class,'store_nav')]/div[descendant::a[contains(text(),'Games')]]
will match div class="store_nav" plus all div/span/a elements you're after, because div class="store_nav" has a descendant of type a. 'Descendant' matches all descendants, however far down the hierarchy they are, not just the combination you're after. If you want only the div/span/a elements, you have to specify that.
Below is the code :
I want to select the radio button which is present within the span class. Could you please help in identifying a successful xpath ?
<div id="quicklinkbox" class="col-md-2" data-position="left" data-intro="You can directly download payslip PDFs for the last 3 or 6 months. (India payslip only)" data-step="4">
<div style="background-color: transparent; margin-top: 28px;">
<div id="panel-title" ng-click="changeExpand(expand);" style="position: relative; left: 24px; cursor: pointer; font-weight: 500;">Quick Download</div>
<div id="panel-title" class="panel-body" style="text-align: left; font-weight: lighter; padding: 5px 0px 0px 50px; font-weight: 400">
<span style="margin-left: -16px;">Payslips for</span>
<form class="ng-pristine ng-valid">
<div class="form-group">
<div class="radio">
<span same-heightcol="" style="font-size: 16px;">
<input class="ng-pristine ng-valid" type="radio" ng-model="payslipselectedopt" style="cursor: pointer;" value="3" name="payslipradio"/>
<span style="font-size: 16px; position: relative; top: -5px;">Last 3 months</span>
</span>
</div>
<div class="radio">
<span style="font-size: 16px;">
<input class="ng-pristine ng-valid" type="radio" ng-model="payslipselectedopt" value="6" name="payslipradio" style="cursor: pointer;"/>
<span style="font-size: 16px; position: relative; top: -5px;"> Last 6 months</span>
</span>
</div>
<img style="margin-bottom: -12px; margin-left: -16px; cursor: pointer;" ng-click="downloadbulkpayslip()" src="appResources/images/Download-button.png"/>
</div>
</form>
</div>
</div>
</div>
</div>
You can use:
//span/input[#name='payslipradio' and #value='6']
Explanation:
//span -> Will search in all HTML al span tag
/input -> Will searth inside the span tag previous selected a input tag
[#name='payslipradio' and #value='6'] -> Will search in the previous selected tags one that the name attr is equals to 'pslpradio' and value attr equals to '6'
//*span[input#class='ng-pristine ng-valid' and #type='radio']))
The html page contains two containers. Each container has two columns, the left for selectable list items and the right for selected list items. So once you click on the list item it moves from the left column to the right column.
The first container is for associated clients.
The second container is for countries.
They both use similar code without a unique id or name.
HTML code for first container:
<div class="col-sm-12 col-md-6">
<div class="tab-section">
<h3 class="section-header"> Associated Client(s) </h3>
<div class="row">
<div class="col-sm-12">
<div id="ClientControlDiv">
<div style="margin: 0 auto; width: 450px;">
<select id="AssociatedClientList" class="multi-select" name="AssociatedClientList" multiple="multiple" style="position: absolute; left: -9999px;">
<div id="ms-AssociatedClientList" class="ms-container">
<div class="ms-selectable">
<div class="panel-heading ">
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="3ce0a0cc_378d_4477_8787_84033319940f-selectable" class="ms-elem-selectable ms-hover">
<span>(Test) 3M</span>
</li>
</ul>
</div>
<div class="ms-selection">
<div class="panel-heading ">
<div class="panel-title">Selected Client(s)</div>
</div>
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="3ce0a0cc_378d_4477_8787_84033319940f-selection" class="ms-elem-selection" style="display: none;">
<span>(Test) 3M</span>
</li>
HTML code for second container for countries:
<div class="col-sm-12">
<div id="DesignationControlDiv">
<div style="margin: 0 auto; width: 450px;">
<select id="AssociatedDesignationsList" class="multi-select" name="AssociatedDesignationsList" multiple="multiple" style="position: absolute; left: -9999px;">
<div id="ms-AssociatedDesignationsList" class="ms-container">
<div class="ms-selectable">
<div class="panel-heading ">
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="d86b9350_aa83_43c7_bc2b_5fc7f5c6ccae-selectable" class="ms-elem-selectable ms-hover">
<span>Afghanistan</span>
</li>
</div>
<div class="ms-selection">
<div class="panel-heading ">
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="d86b9350_aa83_43c7_bc2b_5fc7f5c6ccae-selection" class="ms-elem-selection" style="display: none;">
<span>Afghanistan</span>
</li>
Once selected the html code is:
<div class="ms-selection">
<div class="panel-heading ">
<div class="panel-title">Selected Client(s)</div>
</div>
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="3ce0a0cc_378d_4477_8787_84033319940f-selection" class="ms-elem-selection ms-selected ms-hover" style="">
<span>(Test) 3M</span>
</li>
Ruby code I tried both:
#b.select_list(:class => "ms-list").li(:text => "(Test) 3M").when_present.select
#b.select_list(:class => "ms-list").li.span(:text => "(Test) 3M").select
Based on the supplied HTML, there's no select_list element. For example:
b.ul(class: "ms-list").li(class: "ms-elem-selectable").span(text: "(Test) 3M").exists?
#=> true
b.ul(class: "ms-list").li(id: /selectable/).span(text: "(Test) 3M").exists?
#=> true
b.select_list(:class => "ms-list").li(class: "ms-elem-selectable").span(text: "(Test) 3M").exists?
#=> false
If you want to click on "(Test) 3M", try something like:
b.ul(class: "ms-list").li(class: "ms-elem-selectable").span(text: "(Test) 3M").click
This is a preliminary answer since you question needs more code to be able to determine what you really are trying to do:
#b.li(:id => /.*selectable/, :text => "(Test) 3M").hover
#b.li(:id => /.*selectable/, :text => "(Test) 3M").click
this assumes that your other list that you do not show in your question has the id like /.*selected/. So Watir should look for all of the li items that have an id that contains selectable and then look for the first one with the text "(Test) 3M").select.
I have a sub grid that has a status column defined. I would like to disable the Add button on its navGrid until subgrid's status column's value is 'Completed'.
Here is a snippet of the HTML that is being generated that I'm (unsuccessfuly) trying to manipulate: (I think I need to use the first and last elements)...???
<div id="USAttorneyFoldersGrid_43" class="tablediv">
<div id="gbox_USAttorneyFoldersGrid_43_t" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" dir="ltr" style="width: 826px;">
<div id="lui_USAttorneyFoldersGrid_43_t" class="ui-widget-overlay jqgrid-overlay"></div>
<div id="load_USAttorneyFoldersGrid_43_t" class="loading ui-state-default ui-state-active" style="display: none;">Loading...</div>
<div id="editmodUSAttorneyFoldersGrid_43_t" class="ui-widget ui-widget-content ui-corner-all ui-jqdialog jqmID1" dir="ltr" style="width: 300px; height: auto; z-index: 950; overflow: hidden; top: 294px; left: 136px; display: none;" tabindex="-1" role="dialog" aria-labelledby="edithdUSAttorneyFoldersGrid_43_t" aria-hidden="true">
<div id="gview_USAttorneyFoldersGrid_43_t" class="ui-jqgrid-view" style="width: 826px;">
<div id="rs_mUSAttorneyFoldersGrid_43_t" class="ui-jqgrid-resize-mark"> </div>
<div id="p_USAttorneyFoldersGrid_43_t" class="scroll ui-state-default ui-jqgrid-pager ui-corner-bottom" style="width: 826px;" dir="ltr">
<div id="pg_p_USAttorneyFoldersGrid_43_t" class="ui-pager-control" role="group">
This is my selector that doesn't appear to work:
$('#USAttorneyFoldersGrid_43').navGrid('pg_p_USAttorneyFoldersGrid_43_t', { add: false });
What am I missing here?
You posted almost no code, but I hope that my old answer with the demo gives you information which you need.