How to check if a web element does not have another inner web element - selenium

I am using Selenium and Java to write a test, I need to check if a web element does not have another web element inside it, for example:
<div><span>bla bla</span></div>
<div><g></g></div>
<div><li></li></div>
I need to select the div tags which does not have <span> inside them, so do we have something like:
//div[not(.//span[text()='bla bla'])]
Please do not tell me how to do it in other ways as I already know, I am just wondering if I can do it in a way like the one above.

Your XPath should've done what you wanted. It will select <div> element that doesn't contain, either direct child or nested, span element with text equals "bla bla". See the demo online : http://www.xpathtester.com/xpath/be01362aa9bb1385da6dcf819cf69376
input :
<div>
<div>
<span>bla bla</span>
</div>
<div>
<g/>
</div>
<div>
<li/>
</div>
</div>
output :
<div>
<g/>
</div>
<div>
<li/>
</div>

Related

Selenium and Xpath - accessing elements adjacent to each other

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

Vue.js not compatible with CSS Grid tables [duplicate]

List item
<ul>
<li>language</li>
< v-if= "tree()"> //which tag I may use or any other process
<li>home</li>
<li>about</li>
<>
< v-else> //which tag I may use or any other process
<li>accounts</li>
<li>listing</li>
<>
</ul>'
In the V-if which html tag i may use or any other vue.js process to work with this.
You can use template:
<template v-if="condition">
</template>
<template v-else>
</template>
Template will not be rendered in the browser. But it will parse the contents inside of this to the html.
you can sometimes use the <slot> element to make what you want. Have a look at the slot documentation here

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

How to allow nested accordions but manage top level as accordion (and not collapsable) with materializecss?

I'm using nested accordions with Materializecss. I want to be able to have nested accordions, but to let each level to only have 1 item of the accordion opened (as of data-collapsible='accordion').
I can't get it to work: if I set data-collapsible='accordion' I cannot open nested accordions, and if I set data-collapsible='collapsible', I can open any number of items per accordion.
Any workaround?
Thanks!
If you are managing the inner elements of the collapsibles dinamically, then you need to "initialize" them using a jquery method included in "materialize.js". This is written in the "materializecss" documentation here.
I'll provide a practical example.
Given the next HTML:
...
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">
My nested collapsible
</div>
<div class="collapsible-body">
<ul class="nested collapsible" data-collapsible="accordion">
<!-- No data initially -->
</ul>
</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">
<p>Normal data...</p>
</div>
</li>
</ul>
...
I suppose the problem comes because you are appending data into the ".nested" div, and it's not working as an accordion as expected.
You should then do something like:
// ... Your handler code ...
// ... Data appended into $('.nested')
$('.nested').collapsible({accordion: true});
// ...
The {accordion: true} option is not mandatory, as it will be treated as an accordion by default.
It should work in this case. Good luck.

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