I have following HTML code snippet:
<div class="pagging-box status-border status-border">
<div class="left-container">
<div>
<div class="clientid-hover">
<h4>AAB52</h4>
<div class="hover-title" style="display: none;">
<p>AAB52</p>
</div>
</div>
<div class="clientid-hover-state pl-info">
<h4>CO</h4>
</div>
<div class="client-name-hover">
<h4>Daniel-old Polar-old</h4>
</div>
<p class="contacting-client">Interview Partially Co..</p>
</div>
</div>
<div class="right-container">
<div class="start-session pull-right">
<a href="javascript:void(0)");" class="login-button">
<i class="fa fa-2x fa-play-circle continue-session"></i>
</a>
</div>
</div>
</div>
I want to locate the Anchor tag on the basis of <h4>AAB52</h4> text. I have tried to locate the same with siblings like following xpath
//div[h4[contains(. , "AAB56")]]/following-sibling::div[1]
(xpath is not correct as it is locating second one div immediate of AAB52 text )
following-sibling operates on the parent of the context node, so you first need walk up to the correct context node:
//h4[. = 'AAB52']/../../../following-sibling::div[1]/div/a
Alternatively you can use:
//div[./div/div/h4 = 'AAB52']/following-sibling::div[1]/div/a
Related
I have two objects on the page with same html. Only one of the element's parent tag doesn't have same class name. When I try using not(contains()) it still shows both elements
below is the xpath I tried and still it is detecting both buttons and always clicking on the second button.
//div[contains(#class,"jss") and
not(contains(#class,"canvas-image-export"))]//button[contains(.,'Connected')]
below is the code for first button named Connected where I am interested to get
<div class="jss203">
<div class="MuiTabs-root jss244">
<div class="MuiTabs-scroller MuiTabs-fixed" style="overflow: hidden;">
<div class="MuiTabs-flexContainer" role="tablist">
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected" tabindex="0" type="button" role="tab" aria-selected="true"><span class="MuiTab-wrapper">Overview</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Data Sources</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Connected</span><span class="MuiTouchRipple-root"></span></button>
</div>
</div>
</div>
</div>
below is the code for second button named Connected which I should not click on
<div class="jss197 canvas-image-export">
<span class="" data-testid="componentContainer">
<div class="MuiTabs-root jss244">
<div class="MuiTabs-scroller MuiTabs-fixed" style="overflow: hidden;">
<div class="MuiTabs-flexContainer" role="tablist">
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected" tabindex="0" type="button" role="tab" aria-selected="true"><span class="MuiTab-wrapper">Overview</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Data Sources</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Connected</span><span class="MuiTouchRipple-root"></span></button>
</div>
</div>
</div>
</span>
</div>
TIA
Your problem here is that you are looking on the upper parent node <div class="jss197 canvas-image-export"> vs <div class="jss203"> while there is another element there <div class="MuiTabs-root jss244"> or <div class="MuiTabs-root jss244"> and it is also matching your XPath //div[contains(#class,"jss") and not(contains(#class,"canvas-image-export"))]//button[contains(.,'Connected')].
So, to make your XPath work you need to add one more detail: not contains MuiTabs-root class, as following:
//div[contains(#class,"jss") and not(contains(#class,"canvas-image-export")) and not(contains(#class,"MuiTabs-root"))]//button[contains(.,'Connected')]
To get only first div buttons, you can exclude the span tag for the second element. Using following xpath you can get that.
//div[starts-with(#class,'jss')][not(span[#data-testid='componentContainer'])]//button[contains(.,'Connected')]
Or
//div[starts-with(#class,'jss')][not(span)]//button[contains(.,'Connected')]
Want to obtain the xpath for the elements from a drop-down menu (refer the image),
Tried with the following,
.//div[#class='styles__dropDownList___1PunQ styles__dropDownList___2fbeV'] with this only the drop down is getting selected
No luck with,
.//div[#class='styles__dropDownList___1PunQ styles__dropDownList___2fbeV' and data-test-id='option_0']
//div[#class='styles__dropDownList___1PunQ styles__dropDownList___2fbeV' and text()='Hyg']
//div[#class='styles__dropDownList___1PunQ styles__dropDownList___2fbeV' and contains(#text,'Hyg')]
Element Section:
<div class="dd-menu-items">
<ul class="dd-items-center">
<div class="styles__dropDownList___1PunQ styles__dropDownList___2fbeV">
<div class="styles__optionListItem___1SA75" role="button" data-test-id="option_0" tabindex="0">
<div class="styles__optionDiv___o55ex">
<div>Hyg</div>
</div>
</div>
<div class="styles__optionListItem___1SA75" role="button" data-test-id="option_1" tabindex="0">
<div class="styles__optionDiv___o55ex">
<div>Kay</div>
</div>
</div>
<div class="styles__optionListItem___1SA75" role="button" data-test-id="option_2" tabindex="0">
<div class="styles__optionDiv___o55ex">
<div>Kay</div>
</div>
</div>
<div class="styles__optionListItem___1SA75" role="button" data-test-id="option_3" tabindex="0">
<div class="styles__optionDiv___o55ex">
<div>Perio</div>
</div>
</div>
<div class="styles__optionListItem___1SA75" role="button" data-test-id="option_4" tabindex="0">
<div class="styles__optionDiv___o55ex">
<div>Smiles</div>
</div>
</div>
<div class="styles__optionListItem___1SA75" role="button" data-test-id="option_5" tabindex="0">
<div class="styles__optionDiv___o55ex">
<div>Smiles</div>
</div>
</div>
</div>
</ul>
</div>
To click the desired element you should first open the dropdown box by clicking on it and after that to click on the element.
Since you can select it uniquely only according to the text the element contains you should use //div[contains(text(),'Hyg')] or //div[text()='Hyg']
I'm using selenium and I want to click a child element with 2 as value.
This is the full code:
<div class="dialer-keypad">
<div class="dialpad-row">
<div class="key">
<div class="value">1</div>
<div class="letters"></div>
</div>
<div class="key">
<div class="value">2</div>
<div class="letters">ABC</div>
</div>
<div class="key">
<div class="value">3</div>
<div class="letters">DEF</div>
</div>
</div>
<div class="dialpad-row">
<div class="key">
<div class="value">4</div>
<div class="letters">GHI</div>
</div>
<div class="key">
<div class="value">5</div>
<div class="letters">JKL</div>
</div>
<div class="key">
<div class="value">6</div>
<div class="letters">MNO</div>
</div>
</div>
</div>
So my question is How can I click this element?
<div class="value">2</div>
You should be able do this quite succinctly with XPath:
//*[contains(#class, 'value') and text()='2']
Alternatively, assuming that the markup was static you could target the element using specific indices. For example:
.dialpad-row:first-child .key:nth-child(2) .value
Simply use xpath
//div[contains (#class,'value') and contains (text(),'2')]
I'm trying to click on 'Recommended' input tag of a 'Samsung' label. Please find the appropriate HTML code below.
`
<div class="card-wrapper">
<a class="card-focus has-shadow" href="/app/72292">
<div class="card-container">
<div class="card-logo">
<section class="card-info">
<div class="card-name">Samsung Push Service</div>
<div class="card-publisher hidden-xs">Samsung Push Service</div>
</section>
<div class="card-rating">
</div>
</a>
</div>
<div class="hidden-xs">
<div>
<div class="app-management">
<div class="checkbox ">
<div class="checkbox ">
<label>
<input id="Recommended-72292" class="" aria-disabled="false" value="Recommended" type="checkbox"/>
<span class="cr"/>
<span class="layer-label">Recommended</span>
</label>
</div>
<a href="/mdm">
</div>
</div>
</div>
</div>`
How to achieve this?
Your input seems to be a checkbox, not a button. Try changing its checked value instead of triggering a click:
document.getElementById('Recommended-72292').checked = true;
In selenium, click() method would do your job.
if ( !driver.findElement(By.id("Recommended-72292")).isSelected() )
{
driver.findElement(By.id("Recommended-72292")).click();
}
try following:
driver.findElement(By.cssSelector("div.checkbox input#Recommended-72292")).click();
I want to identify the following element but unable to do so.
<fieldset class="ng-scope" ng-if="permissions.isEditable && (permissions.isApprover || permissions.isReviewer)">
<div class="row">
<div class="small-12 columns">
<div class="label-container">
<label>Reviewer comments <a class="tooltip-item" href="javascript:void(0);">[?]
<div class="tooltip">
<p>Contents of the comment
can be viewed by Immigration
team and employee who logged
the request.</p>
</div>
</a>
</label>
</div>
<div class="value-container">
<textarea name="Comments" class="required-on-send-back required-on-hold required-on-reject ng-pristine ng-untouched ng-valid" ng-model="requisitionRequest.request.reviewerComments" rows="4"></textarea>
</div>
</div>
</div>
</fieldset>
Note there are 3 fieldset above as well .
You can write a css selector based on the fieldset attributes like:
fieldset[ng-if*='isApprover'][ng-if*='isReviewer'][ng-if*='isEditable']
You can remove any of the [] condition block.
This xpath should help in identifying the fieldset:
//fieldset[.//textarea[#name='Comments']]