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
Related
I´d like to change a HTML snippet stored in database.
Let's assume there is only one table called table with columns id and content. In content column are stored HTML snippets
It has this kind of format
<div class="header">etc etc </div>
<div class="content"> content </div>
<div class="footer"> footer </div>
(and possibly more complex html structure).
The goal is to replace the content div (so div with class content, there is guaranteed that there is just one div with this class identifier) from stored string with some text, for example "TEXT" using SQL on PostgreSQL.
So in this case the result would be
<div class="header">etc etc </div>
TEXT
<div class="footer"> footer </div>
Thank you
I'd use REGEX_REPLACE() for this:
demo:db<>fiddle
SELECT
REGEXP_REPLACE(html, '<div class="content">.*?</div>', 'MY TEXT')
FROM t
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
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>
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.
How can I insert something just below a certain div?
I have a jwplayer on my page which usually have an id of jwplayer-1 being inserted by jwplayer plugin for wordpress.
What I want to be able to do is to insert a div just below that if it exist.
So for example, if my page has a player, somewhere on the page there will be
<div id="jwplayer-1>Player will appear here</div>
What I want to be able to do is to check if that line exist, if it does, insert another div so the code will be like this.
<div id="jwplayer-1>Player will appear here</div>
<div id="viewcount">Total Views: <?php showviews()?></div>
Thanks
You can do:
$('<div id="viewcount">Total Views: X</div>').insertAfter($('#jwplayer-1'));
You could use jQuery's append method if you were to put your div within another div as such:
html:
<div id="container">
<div id="jwplayer-1>Player will appear here</div>
</div>
javascript:
$('.container').append('<div id="viewcount">Total Views: <?php showviews()?></div>');
sources:
http://api.jquery.com/append/