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.
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>
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.
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.
Can anyone help me how to match this element, I want to click Canada from the list of countries. Selenium (IDE/WebDriver) is not finding the element.
I have tried in Webdriver:
driver.FindElement(By.XPath(".//*[#class='slick-viewport']/*[#class='grid-canvas']/*[#class='ui-widget-content slick-row odd']/*[#class='slick-cell l1 r1 active selected']")).click();
Firepath gives this XPath:
.//*[#id='assetsTable']/div[5]/div/div[5]/div[2]
Neither of these are working. Obviously, I am not doing correctly. The ids are generated dynamically, and nested, so I'm finding it very difficult to work out. Can anyone have a look and tell me the correct way for the locator please?
Many thanks
PS: Looks like I am not allowed to upload image. So, copy pasted the content below:
<!DOCTYPE html>
<html class="dj_gecko dj_contentbox">
<head>
<body id="bodyID">
<div id="pageDiv" class="page">
<div id="header">
<div id="main">
<ul id="mainMenu" class="menuTab">
<div id="partialHost" style="height: 345.117px;">
<div id="assetsBreadcrumbDiv">
<div id="assetsGridDiv">
<ul id="assetMenu" class="menuTab">
<div id="assetsTable" class="defaultGrid slickgrid_109601 ui-widget" style="overflow: hidden; outline: 0px none; position: relative; height: 269.117px; width: 1562px;">
<div style="position:fixed;width:0;height:0;top:0;left:0;outline:0;" hidefocus="" tabindex="0"></div>
<div class="slick-header ui-state-default" style="overflow:hidden;position:relative;">
<div class="slick-headerrow ui-state-default" style="overflow: hidden; position: relative; display: none;">
<div class="slick-top-panel-scroller ui-state-default" style="overflow: hidden; position: relative; display: none;">
<div class="slick-viewport" style="width: 100%; overflow: auto; outline: 0px none; position: relative; height: 242px;">
<div class="grid-canvas" style="width: 1545px; height: 5975px;">
<div class="ui-widget-content slick-row odd" style="top:775px">
<div class="ui-widget-content slick-row even" style="top:800px">
<div class="ui-widget-content slick-row odd" style="top:825px">
<div class="ui-widget-content slick-row even" style="top:850px">
<div class="ui-widget-content slick-row odd" style="top:875px">
<div class="slick-cell l0 r0 selected">CA</div>
<div class="slick-cell l1 r1 active selected">CANADA</div>
<div class="slick-cell l2 r2 selected">Y</div>
<div class="slick-cell l3 r3 selected"></div>
<div class="slick-cell l4 r4 selected">CA</div>
</div>
<div class="ui-widget-content slick-row even" style="top:900px">
<div class="ui-widget-content slick-row odd" style="top:925px">
<div class="ui-widget-content slick-row even" style="top:950px">
//div[text()="CANADA"] should work. If you only want that particular element that is.
Don't use * , be explicit in XPath queries.
This works:
//div[#class='slick-cell l1 r1 active selected']
What do you get when you try your XPath query directly in FireBug?
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.