Selenium Element Locators - nested div class - xpath

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?

Related

How to get YouTube thumbnail image aspect ratio to be 21:9

<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet"/>
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--primary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter"><h3 style="color: black; text-align: center;">Be Part of It</h3>
<p style="color: black; text-align: center;">Choose an innovative degree that has been designed with your employability at its core.</p>
</div>
</div>
</div>
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div></a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I've got a modal on my site, and use the following to display a thumbnail image:
http://img.youtube.com/vi/DxwrdB7A6-I/maxresdefault.jpg
The problem is the video has an aspect ratio of 21:9. I've used the following styles, but still get the black letterbox on both the top and bottom of the image. Is there a way to just display the YouTube thumbnail without the black letterbox?
&__container {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
margin-bottom: 1rem;
a img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
I've modified your sample code to add two new CSS rules to correspond to a class your HTML already had with no styles:
.m-modal-video__container--cinemascope defines the container around your cinemascope-ratio image, using the padding-bottom trick you'd previously tried implementing.
.m-modal-video__container--cinemascope img defines the sizing and positioning of the image inside the above container. Knowing you want this image to maintain its aspect ratio and not stretch, I've removed the height: 100% rule (so the height is automatically calculated) and vertically centered the image with the top: 50% and transform: translateY(-50%) trick.
This is all needed because YouTube still produced a 16:9 JPG thumbnail for your video despite its 21:9 ratio, so we're essentially using this trick to hide the black bars in the image. I still see a tiny sliver poking through, but you slightly adjust your padding-bottom ratio if you were worried about that, or increase your img's width past 100%.
.m-modal-video__container--cinemascope {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
}
.m-modal-video__container--cinemascope img {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet" />
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div>
</a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

Finding element via xpath with axes

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.

Xpath for input tag(radio button) inside a span class

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']))

Need to identify element

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.

JQGrid Disable Add Button in SubGrid Based on Status Column in SubGrid

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.

Resources