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')]
Related
I am trying to select an element using CSS selector (and have tried XPath also).
<div data-sheetstartpoint="1">
<div class="booking">
<div class="startsheet two">
<div class="title">
<div class="time">Time</div>
<div class="cols">
<div class="hidden-xs two">Team 1</div>
<div class="hidden-xs two">Team 2</div>
<div class="visible-xs two">Teams</div>
</div>
</div>
<div class="slot" data-startpointno="1">
<div class="time" id="timelabel"> 07:30 </div>
<div class="cols">
<div class="timeslot " data-roundteamid="" data-slotno="1" data-time="17/04/2021 06:30:00" data-startpointno="1" data-offset="0" data-bookingname="">
<span class="available-to-book">Available </span>
</div>
<div class="timeslot " data-roundteamid="" data-slotno="2" data-time="17/04/2021 06:30:00" data-startpointno="1" data-offset="0" data-bookingname="">
<span class="available-to-book">Available </span>
</div>
</div>
</div>
I have made a CSS selector (and have also looked using Chropath)
I am getting an element not found error.
The selectors I am using
FindElementByCss(".timeslot[data-slotno*='1'][data-time*='17/04/2021 06:30:00']")
FindElementByXPath("//*[#id='hdidbookingcontent']/div[2]/div[1]/div/div[3]/div[2]/div[1]")
I see further up the page there is a class "container" - is this something that would impact selection?
Working with bs4. When trying to find html info inside <div data-reactroot> I am never able to locate it.
Inside <div data-reactroot> I am going to have to loop through each text entry and split it. I get how to find a normal tags but data-reactroot seems to be giving me a lot of trouble.
<div data-reactroot="">
<div>
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div class="_1p3joamp">Entire guest suite</div>
<div class="_36rlri">
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">2 guests</div>
</div>
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">1 bedroom</div>
</div>
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">1 bed</div>
</div>
<div class="_36rlri" style="margin-right:0">
<div class="_czm8crp">1 bath</div>
</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Self check-in</span></div>
<div class="_czm8crp">Check yourself in with the keypad.</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Sparkling clean</span></div>
<div class="_czm8crp">9 recent guests said this place was sparkling clean.</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true"></span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Michael & Tammy is a Superhost</span></div>
<div class="_czm8crp">Superhosts are experienced, highly rated hosts who are committed to providing great stays for guests.</div>
</div>
</div>
</div>
<div style="margin-top:24px;margin-bottom:24px">
<div class="_7qp4lh"></div>
</div>
</div>
</div>
I have tried:
data_soup.find_all("div data-reactroot")
data_soup.get('data-reactroot')
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 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
I have a problem at aligning columns inside rows in bootstrap. I have the following structure:
<section class="container-fluid centerP">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-10 col-xs-offset-1">
<h1></h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
</section>
It should look like a 1-2-2-1 (vertically aligned boxes of cntent). Currently they are centered but too far apart because of the overset of 2. I found a solution that mentioned using classes of "row-centered" and "col-centered" and it worked untill i modified the classes to "col-xs" and "col-lg". So what i was trying to do for the last two days was to bring them closer together but with no success.
I started coding a couple of weeks ago so please bear with me if the question is stupid
Each row should split to 12 col.
for exemple:
<div class="row">
<div class=col-md-6>
something
</div>
<div class=col-md-6>
something
</div>
</div>
A few suggestions:
I think you mean to use <div class="container-fluid centerP"> rather than <section class="container-fluid centerP>. Check out What is the difference between <section> and <div>? for more on why you should probably use a div rather than a section here.
A simple 1-2-2-1 block of vertically aligned central columns could be written like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 id="headerBox">Dolloping doubloons!</h1>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="footerText">Dolloping doubloons!</h3>
</div>
</div>
`
You can then use the ids and classes to set the text's padding and margin properties in CSS, which in turn will offer you more precise control over where the text displays. For example, if you wanted to centre the text within its respective box, you could use margin: 0 auto;.