In selenium IDE, I need to click on the nth link that has text 'XXX'. How can this be done?
<tr>
<td>clickAndWait</td>
<td>//a[text()='XXX'][${link}]</td>
<td></td>
</tr>
The above code says [error] Element //a[text()='XXX'][9] not found even though it's valid,
For unstructured links, you might try something like //body/descendant::a[text()='a link'][9]. The descendant axis will flatten all the descendant 'a' tags so position() will take the order they appear in the document rather than being based on the previous siblings of each a tag.
If the links are semi-structured as below, then something like
//div[#id='fu']//a[text()='a link']/../following-sibling::*//a[text()='a link']/../following-sibling::*//a[text()='a link']/../following-sibling::*//a[text()='a link']/../following-sibling::*//a[text()='a link']/../following-sibling::*//a[text()='a link']/../following-sibling::*//a[text()='a link']/../following-sibling::*//a[text()='a link']/../following-sibling::*//a[text()='a link']
can find you the 9th matching link with the given structure.
<p>a segment, outside the containing div, with a link.</p>
<div id="fu">
<p>some text a link.</p>
<p>some text a link.</p>
<p>some text a different link.</p>
<p>some text a link.</p>
<p>some text a link.</p>
<p>some text a link.</p>
<p>some text a link.</p>
<p>some text a link.</p>
<p>some text a link.</p>
<p>some text a link.</p>
<p>some text a link.</p>
<p>some text a link.</p>
<p>some text a link.</p>
<div></div></div>
Related
Using Thymeleaf th:each loop, whitespace is removed (or can't be added).
Thymeleaf code:
<div>
</div>
I expected:
<div>
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
but html rendered below.
<div>Link 1Link 2Link 3Link 4Link 5</div>
How to add whitespace (in html file new line) using Thymeleaf th:each?
My Thymeleaf version is 3.0.12.RELEASE
If you want the links to be arranged horizontally with a single white space between them (as opposed to arranging them vertically using display:block) then you can use the Thymeleaf synthetic <th:block> element (documented here):
<div>
<th:block th:each="item : ${items}">
</th:block>
</div>
This will give you the same layout as you show in your question, when you run the first code snippet.
Update:
You can also use <span> instead of <th:block>, if you prefer:
<div>
<span th:each="item : ${items}">
</span>
</div>
This will give you the same end result (links arranged horizontally with a space between them), but the HTML generated to produce this layout will, of course, be slightly different.
I don't have any idea to get last locator from div
I try to count elements by Get Element Count in div but it got just 1
example html
<div class="add-product"
<p data-aura-rendered-by="188:14729;a">
<span data-aura-rendered-by="191:14729;a">01-January</span>
<p data-aura-rendered-by="195:14729;a">
<span data-aura-rendered-by="198:14729;a">02-February</span>
<p data-aura-rendered-by="230:14729;a">
<span data-aura-rendered-by="233:14729;a">07-July</span>
</p>
</div>
I need to count all elements in div or get last position in div (07-July) but each time the div contains a different number of elements (it depends on test data).
Use the following xpath it will identify the last element 07-July.
(//div[#class='add-product']//span)[last()]
I am trying to remove all the empty nodes but the code also detects nodes with image tag as empty. I need the nodes with img tag to remain. Also I don't need nodes with whitespaces and other non printable characters. This is my current code:
$empties= $xpath->query('//*[not((*))]');
foreach($empties as $empty){
$empty->parentNode->removeChild($empty);
}
I need this to go:
<div class='blah'> </div>
and these to stay
<div class='blah'><img src='bla'/></div>
<div class='blah'>some text</div>
I'm not sure you've fully specified which nodes you want to stay, but the following XPath is consistent with your stated needs:
//*[not(self::img) and not(*) and not(text()[normalize-space()])]
(Building on Martin's comment.)
This will select for removal all elements that are not <img>, and have no element children, and have no direct text node children that contain more than just whitespace.
First, let's clear up the ambiguity by using a more comprehensive example:
<div id="d1">
<div id="d2"/>
<div id="d3" class='blah'><img src='bla'/></div>
<div id="d4" class='blah'>some text</div>
<div id="d5" class='blah'> </div>
<div id="d6" class='blah'>
</div>
</div>
Then
//*[not(*) and text()[not(normalize-space())]]
says
select
elements without child elements but with child text
consisting of only whitespace.
For the above XML, it selects the d5 and d6 divs, not the img, and not the d1 through d4 divs.
Trying to deal with irregular content in div elements. Namely what comes after the h3 titles. There is no set content under the h3 headings. However, I need to associate whatever text is there with the heading. There could be a ul or just a span or both. The main thing is not combining all the text under the h3 headings.
I have been able to navigate to my div using the .css operator. Each div contains one or more of 4 h3 headings followed by a comment or a list if there is more than one comment.
How can I separate whatever follows a h3 tag ending before the next tag (if there is one)?
You can see a sample of the div I'm working with here (I can grab whatever is between the h2 because its the same for every div):
<div class="inspection_container">
<h2 class="inspection_date_title">
<div class="calendar_list">
<span>Mar</span><strong>4</strong>
</div>Routine Inspection<small>Inspected Mar. 4, 2014</small>
</h2>
<h3>Actions taken by inspector</h3>
<ul>
<li class="Comment">
<strong>Consultation / Technical Assistance</strong><p>Instructions are given to the owner/operator to assist them with taking the proper actions to meet regulations.</p>
</li>
</ul>
</div>
<div class="inspection_container">
<h2 class="inspection_date_title">
<div class="calendar_list">
<span>Sep</span><strong>4</strong>
</div>Re-inspection<small>Inspected Sep. 4, 2013</small>
</h2>
<h3>Not in compliance</h3>
<ul>
<li class="X">
<strong>Premise is clean/sanitary</strong><p>Food premise is to be maintained in a clean and sanitary condition.</p>
</li>
</ul>
<h3>Actions taken by inspector</h3>
<ul>
<li class="Comment">
<strong>Consultation / Technical Assistance</strong><p>Instructions are given to the owner/operator to assist them with taking the proper actions to meet regulations.</p>
</li>
</ul>
</div>
<div class="inspection_container">
<h2 class="inspection_date_title">
<div class="calendar_list">
<span>Aug</span><strong>30</strong>
</div>Routine Inspection<small>Inspected Aug. 30, 2013</small>
</h2>
<h3>Not in compliance</h3>
<ul>
<li class="X">
<strong>Washrooms are cleaned regularly</strong><p>Washrooms are to be kept clean, sanitary, in good repair and must be supplied with liquid soap in a dispenser, single service/paper towels, cloth roller towel or hot air dryer and hot and cold running water.</p>
</li>
<li class="X">
<strong>Building interior is well-maintained</strong><p>Walls, floors and ceilings are to be maintained and in good repair.</p>
</li>
<li class="X">
<strong>Premise is clean/sanitary</strong><p>Food premise is to be maintained in a clean and sanitary condition.</p>
</li>
</ul>
<h3>Actions taken by inspector</h3>
<ul>
<li class="Comment">
<strong>Consultation / Technical Assistance</strong><p>Instructions are given to the owner/operator to assist them with taking the proper actions to meet regulations.</p>
</li>
</ul>
</div>
Provided that:
You only have intertwined h3 and ul elements till the end of the wrapping div
no other element can appear in this structure instead of ul
no other element can appear in this structure instead of h3
and that your example is representative, this should do the trick.
//ul[count(following-sibling::h3) = count(following-sibling::ul)]
If you have other elements in the same place as the ul but there is always only one between the h3s, you can use this expression
//ul[count(following-sibling::h3) = count(following-sibling::*[not(local-name() = 'h3')])]
As for grouping the h3 elements and the ul elements following them immediately, I don't think this is feasible in XPath alone. You'll need to do this in Ruby. I suggest searching for the div elements and parsing them imperatively, while counting the nodes and grouping the odd and even h3s and uls together
I want to display a div alongside a portait picture, but I want the div to fill all the remaining gap between the picture's right side and the edge of the webpage.
Here is the scheme:
xxxxxxxxxxxx
x| P || |x
x| i || |x
x| c || D |x
x| t || i |x
x| u || v |x
x| r || |x
x| e || |x
xxxxxxxxxxxx
Where xxx are the edges of the webpage.
I am not able to get the picture size, because I use the same webpage structure for many other portrait pictures, with not the same ratio, height/width....
What I have been able to do is:
<body>
<img style="float:left; height:100%;" src="portraitpictures_url" >
<div style="width: 100%;background:blue;color:white; border-radius:10px;" >
<p>The div text</p>
</div>
</body>
But this not what I want to have, because my div has a 100% width and so my div border is hiding partly behind the picture.
If I put my <img> tag between <div> and </div>, my picture's height overflows from the body and so is not "screen height".
I am quite sure, it is possible to do better, but here I am stuck...
Here is the full code in Django template style:
<body>
<img style="float:left; height:calc(100% - 45px);" src="{{ MEDIA_URL }}{{ A.picture.name }}" >
<div style=" width: 100%; margin-top: 2%;background:red ;color:blue; border-radius:10px;" >
<p>The div text</p>
</div>
</body>
You should add width:auto to your second div and set overflow to hidden ,like I've done here : http://jsfiddle.net/h5CU3/ . You can also add horizontal margin to the first block (margin :0 5px 0 0) in case you don't want it to look merged.
<body >
<div style="float:left; height:100%;">
<img src="portraitpictures_url" >
</div>
<div style="overflow:hidden;width:auto;overflow:hidden;background:blue;color:white; border- radius:10px;" >
<p>The div text</p>
</div>
</body>
Just add float:left to your div as well.
Does this do what you want? (the left margin should be set to the width of the img.
<body>
<div style="width:100%;">
<img style="float:left; height:100%;" src="portraitpictures_url">
<div style="margin-left:100px;background:blue;color:white; border-radius:10px;">
<p>The div text</p>
</div>
</div>
</body>
you need to add style
overflow: hidden;
Flexbox can do the trick, I have not tried this out yet, but I have read about it.
I'm sure this is what you are looking for.
Flexbox is an ongoing project that makes it easy to place 's on the exact spot you want it to be.
It has a built in function to fill up remaining space automaticaly.
http://learnlayout.com/flexbox.html (source: http://learnlayout.com/)