How to select the las Li with Xpath or Css Selector - xpath

I want to select the text in the last li with xpath, i can use Css Selector too.
here the value is "3"
<div class="pg">
<input type="hidden" value="1" name="PaginationForm.CurrentPage">
<input id="PaginationForm_TotalPage" type="hidden" value="41" name="PaginationForm.TotalPage">
<span class="pgPrev">‹</span>
<ul>
<li class="">
<span class="current">1</span>
</li>
<li class="">
<a>2</a>
</li>
<li class="">
<a>3</a>
</li>
</ul>
<a class="jsNxtPage pgNext">›</a>
</div>
i try this in Selenium
driver.find_elements_by_xpath('(//*[#class="pg"]/ul/li/text())[last()]')

As the method name suggests, it can only return element, not text node. You can find the target <a> element first :
a = driver.find_element_by_xpath('//*[#class="pg"]/ul/li[last()]/a')
And then you can get the inner text from a.text

Related

XPath: Select any div that contains one or more descendant divs with a specific class

Assume that following HTML snippet exists somewhere in the <body> element of a web page:
<div id="root_1000" class="root bacon">
<ul>
<li id="item_1234567" class="active">
<div class="userpost author_4281">
<div>This text should be visible.<div>
</div>
<ul><li>Some item</li></ul>
</li>
</ul>
</div>
<div id="root_2000" class="root bacon">
<ul>
<li id="item_8675309" class="active">
<div class="userpost author_3333">
<div>
This text, and as the DIV.root that contains it, should be hidden.
<div>
</div>
<ul><li>Another item</li></ul>
</li>
</ul>
</div>
<div id="root_3000" class="root bacon">
<ul>
<li id="item_7654321" class="active">
<div class="userpost author_9877">
<div>This text should be visible.<div>
</div>
<ul><li>Yet another item</li></ul>
</li>
</ul>
</div>
So here's my question: what would the XPath syntax be to select the div.root that contains info posted by author #3333 (i.e. div[class~="author_3333"])?
The following XPath statement will properly match the div.userpost element associated with author #3333 that I want to hide, but does not include the <ul><li>Another item</li></ul> node, which I also need to hide:
.//div[contains(#class, 'author_3333')]
What I want to do is select the closest div.root ancestor associated with the node that my XPath statement matches. Any help would be greatly appreciated... thanks in advance!
you need to get the parent node that has the second div as its child, something like:
//div[.//div[contains(#class, "author_3333")]]
You can use this XPath expression:
.//div[contains(#class, 'author_3333')]/ancestor::div[contains(#class,'root')][1]
Output is:
<div id="root_2000" class="root bacon">
<ul>
<li id="item_8675309" class="active">
<div class="userpost author_3333">
<div>
This text, and as the DIV.root that contains it, should be hidden.
</div>
</div>
<ul>
<li>Another item</li>
</ul>
</li>
</ul>
</div>

Sitecore Cache Issue

I set "cacheHtml=true" in web.config file and set sublayout's (ascx file) cache setting.
Whenever I reflash the page, I can see the increasing "From Cache" count in admin page. However, the sublayout(.ascx) doesn't get all its template field values on the page.
Suppose that there is CSS class name, like "nav-list", in its template field and HTML result should look like this.
<div class="nav-list">
something
</div>
But, if I check "cacheable", it shows like this. Otherwise, it shows correct style.
<div class=" ">
something
</div>
I checked:
Checked - Cacheable
Checked - Vary by Data
Checked - Vary by Parameters
Checked - Vary by Query String
What is the issue?
=================== Update ====================
This is the result when I DIDN'T check "Cacheable". (Correct Layout)
<div id="cloud-header">
<div class="navtacular-cover"></div>
<nav class="navtacular navtacular-theme-simple navtacular-variant-dark container block-center">
<h1 class="navtacular-label">
<i class="icon-reorder"></i>
</h1>
<ul class="navtacular-list">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
</ul>
</nav>
This is the result when I DID check "Cacheable". All class values which are from datasource are empty.
<div id="cloud-header">
<nav class="">
<h1 class="">
<i class=""></i>
</h1>
<ul class="">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
<li id="" class="navtacular-item">
</ul>
</nav>
This is the code for all class names which show empty.
<asp:View ID="viewNormalMode" runat="server">
<nav class='<% Response.Write(myDataSourceItem.Fields["Nav Bar Class"]); %>'>
<h1 class='<% Response.Write(myDataSourceItem.Fields["Label h1 Class"]); %>'>
<i class='<% Response.Write(myDataSourceItem.Fields["Label i Class"]); %>'></i>
<% Response.Write(myDataSourceItem.Fields["Nav Bar Label"]); %></h1>
<ul class='<% Response.Write(myDataSourceItem.Fields["ul Class"]); %>'>
<asp:Literal ID="linkObjects" runat="server"></asp:Literal>
</ul>
</nav>
</asp:View>
The class name is from another item which has different template fields, called NavBarLinkItem.
In the NavBarLinkItem templates, there are fields (url, li Class, a Class, li Id, etc...).
Again, the original nav sublayout uses datasource to get those values.

How to fill my html with json object?

I am new in ajax.
I am trying to get value and want to fill in html code snippet.
I have html code and json object that has value.
Now I want to show the specific value in the different-different part of html code.
Here is my html code:-
<div>
<div class="borb clearfix">
<div class="profileholder fleft">
<img src="images/users/1.png" class="userpic">
<div class="icon state green"></div>
</div>
<div class="remainder">
<div class="padl10">
<div class="username">Anurag Shivpuri</div>
<div class="desig">Cheif Information Officer</div>
<div class="loc">Credit Operation | Pune</div>
</div>
</div>
</div>
<ul class="userdata">
<li>
<span class="lbl">Employee Code :</span>
<span> 2007</span>
</li>
<li>
<span class="lbl">Role_Designation :</span>
<span> Senior HR</span>
</li>
<li>
<span class="lbl">Department :</span>
<span> HR</span>
</li>
<li>
<span class="lbl">Sub_Department :</span>
<span> Talent Acquisition</span>
</li>
<li>
<span class="lbl">Official E-mail Id :</span>
<span> atul.gupta#bajajfinserve.co.in</span>
</li>
<li>
<span class="lbl">Mobile No :</span>
<span> 9844333932</span>
</li>
</ul>
<div class="footbar">
Reward
Incentive
Movement
Leaves
LnD
</div>
On success of ajax I am getting the value now I want to fill it in my html code.
Please help me.
You can use a library (like knockout) to do that, or you can use jQuery to create the elements:
$("<div>").append("some text").appendTo("body"); //creates a div, append some text and...
If you already have a success event in your ajax, you could grab an empty DOM element and set its content.
document.getElementById('placeholder').innerHTML = jsonData.myProperty;
You should use innerHTML in javascript.
Set some ID on the element you need to update:
<li>
<span class="lbl">Employee Code :</span>
<span id='employeeCode'> 2007</span>
</li>
Then update it with your json value:
document.getElementById('employeeCode').innerHTML= yourJsonObject.employeeCodeValue;

hide specific child element from an html using prototype

using prototype, I am trying to hide the specific children element of a particular element.
From the html below, I want to hide child ul and all of its element:
<ul>
<li id="category_1" class="active">
<strong id="img_1" class="cat_plus"></strong>
<input type="checkbox" name="cat_id[]" value="1">
<ul>
<li id="category_3">
<strong id="img_1" class="cat_plus"></strong>
<input type="checkbox" name="cat_id[]" value="3">Root Catalog
</li>
</ul>
<li>
</ul>
i tried:
$('category_1 ul').hide();
I think this is what you are looking for.
$$('#category_1 ul').first().hide();
See fiddle
I hope it helps.

xpath syntax for selecting the text after <strong> tag

<div class="article_details">
<h1>Product name is</h1>
<div class="left">
<ul class="article_list">
<li>
<strong>art. nr.:</strong>
VS7896
</li>
<li>
<b>Shipping time</b>
: 1-3 Days
</li>
</ul>
</div>
I used //DIV[#class='left']/UL[1]/LI[1] but the result is "art. nr.: VS7896".
Please help me with the correct XPath to select just "VS7896".
To select the text after <strong>, use
//strong/following-sibling::text()[1]

Resources