Selenium and Xpath - accessing elements adjacent to each other - selenium

In the example below I'm trying to click on Follow Me where the adjacent(ish) <div> is equal to David. This is one of many <div class='_1m' on the page all with the same structure.(does that make sense?)
Sorry first time posting a problem and a forgot one major detail. I know that I'm looking for David but I don't know what the 'Follow Me' Value will be. It changes on each record.
<div class="_1m">
<div class="_8h"><img src="/2323.GIF" /></div>
<div class="_1j">
<div class="_1c">David<span class="_13">abc</span></div>
<div>
<span class="_1v">ABCD</span>
<span class="_1v">1234</span>
</div>
<div>7890</div>
</div>
<div class="_3h">
<div class="_n0">
<span class="_bn"><span class="_la">Follow Me</span></span>
</div>
</div>
</div>

To click on Follow Me where the adjacent <div> contains the text David you can use the following Locator Strategy:
Using xpath and following:
//div[contains(., 'David')]//following::span[3]/span
Using xpath, following and the text Follow Me:
//div[contains(., 'David')]//following::span[3]/span[text()='Follow Me']

Use below xpath //div[#class='_1c'][contains(.,'David')]/../following-sibling::div//span[#class='_la'][contains(.,'Follow Me')]
Explaination:
//div[#class='_1c'][contains(.,'David')] loate the David
/.. move to one parent node of David because follow me emement is sibling of that parent div
/following-sibling::div locate immediate following sibling div
//span[#class='_la'][contains(.,'Follow Me')] Loate the span which has Follow me text

Related

How to do AND or OR in XPATH on combined divs

I would like to get a DIV based on two conditions in children DIVs.
//div//[child::div[text()="Administrator"] and //child::div[text='No card']]
But and condition appears to be working on properties of a single element.
Kindly advise how to achieve something like above, using either Xpath or CSSSelector
HTML:
<div>
<div class="src-containers-Quo-SimpleCard-components-styles-index__carHolderRow-" style="transition: s;">
<h4 class="-shared-react-components1Lsp1">Mr.</h4>
<div class="src-containers-Quo-SimpleCard-components-styles-index__carDetails--3xMqU">
<div class="src-containers-Quo-SimpleCard-components-1bGot">bla</div>
<div class="src-containers-Quo-SimpleCard-components--1bGot">Administrator</div>
<div><button class="src-containers-Quo-simpleCard-" type="button">Edit</button><button class="src-containers-Quo-SimpleCard-" type="button">Delete</button></div>
</div>
</div>
</div>
Many thanks
Basically if you want to select div by text values of two child div elements, you can do
//div[div="Administrator" and div="No card"]
Let me know (update your question) if you faced with another issue
P.S. Note that //div[//child::div[text='No card']] means something like return FIRST div if there is a div with text 'No card' somewhere in DOM, but not what you expect

MaterializeCSS card-action can only align links, not buttons with forms

I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/

xpath not finding text inside <div><span>

.//*[contains(text(), "Apply")]
<input type="hidden" value="false" name="needsValidation"/>
<input type="hidden" value="false" name="fullValidationPerformed"/>
<div class="loadingBox hidden">
<div class="paneContent">
<div class="topButtons">
<div class="rightSide">
<div id="saveChangesButton" class="majorButton">
<div>
<div>
<div>
<span class="hidden"/>
Apply Changes
<span class="down"/>
</div>
</div>
</div>
</div>
</div>
Why is it that the xpath string I created doesn't find "Apply" here? It appears that my xpath statement only fails when the text I want to find is inside a "span" tag inside a "div" tag like this.
Can someone help me understand what I'm missing here please?
The reason that contains(text(), 'Apply') does not work is that the element has several text nodes, and the contains function in XPath 1.0 ignores all but the first. (XPath 2.0 would give you an error if there is more than one).
If you want to get an element whose string value contains 'Apply' without also returning its ancestors, the simplest way is to get the last element containing this string:
(//*[contains(., 'Apply')])[last()]

Click on button without id

How click button in webdriver without any id, values. Class of button is changing dynamically.
Sample:
<div class="d-k-l d-y-r-c g-h-f-Ck b-Qb" role="button" style="-moz-user-select: none;" tabindex="0" aria-haspopup="true">
<div class="d-k-l d-y-r-c-ha">
Мои круги
</div>
<div class="d-k-l d-y-r-c-Qa"></div>
</div>
Thx.
Show more HTML please. So that we can find something useful in the context.
Currently the only possible way is to use XPath' text()
.//*[#role='button']/*[contains(text(), 'Мои круги')]
If you are sure relevant elements are div, you can use
.//div[#role='button']/div[contains(text(), 'Мои круги')]

how to click on a button when specific image is asscoiated with it

I am using selenium for testing my application.
In my application there are 5 buttons, each have a different image associated with it.
I want to click on button which have a specific image associated.
Currently i am using a while loop to get the node of image and then replacing this node into xpath of button to select it.
is there any way either with xpath or css to do this directly.
Providing more information-this is like submit button is there and then below this image is there. submit button and images are sibling element and need to click submit button when the next element is specific image
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking2" src="someimages"/>
</div>
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking1" src="someimages"/>
</div>
Could you include a snippet of your HTML? Below is an example of an image in a form and a few ways of locating it using Selenium, but these may not be relevant depending on your implementation:
<input id="submitForm" name="imgbtn" type="image" src="images/submit.png" />
id=submitForm
name=imgbtn
//input[#src='images/submit.png']
//input[contains(#src, 'submit.png')]
css=input[src='images/submit.png']
UPDATE:
Given the HTML:
<div class="select">
<span class="submit">
<div class="marking1"></div>
<div class="select">
<span class="submit">
<div class="marking2"></div>
You can locate the 'submit' span parent of the 'marking2' div using the following XPaths:
//div[#class='marking2']/..
//div[#class='marking2']/parent::*
//div[#class='marking2']/parent::span
UPDATE 2:
Based on the HTML now included in the question, you can locate the span with the class of submit related to the image many ways, a few examples follow:
//div[//img[#alt='Marking2']/span[contains(#class, 'select')]
//img[#alt='Marking2']/../../span
//div[img[#alt='Marking2']]/preceding-sibling::span
I hope this gives you some ideas. I'd certainly recommend XPath over CSS for locating these elements as it's much better at these sorts of relationships.