I want find the numberof lis items (li) in html below:
<div class="li-control-block">
<div class="inner">
<a class="scroll-left" href="?slideId=7">
<img width="59" height="30" alt="btn-hero-promo-slider-left" src="/c/images/btn-hero-promo-slider-left.png">
</a>
<ul class="slides-8">
<li class="first">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="">
6
</li>
<li class="">
7
</li>
<li class="last on">
</ul>
<a class="scroll-right" href="?slideId=1">
</div>
</div>
I have tried code below but that comes back with "12345678" which gives me size of 1.
So how can I get the size to be equal to 8 ?
List<WebElement> list=null;
list = driver.findElements(By.cssSelector(".slides-8"));
int length = list.size();
Try doing
WebElement temp = driver.findElement(By.classname("slides-8"));
List<WebElement> list = temp.findElement(By.xpath(".//li"));
System.out.println(list.size());
Your example works as expected; your code requests the number of elements which have a class of "slides-8", which is the list container. Then you ask for how many elements that is, and it's one -- just one container.
Either apply a CSS class to each list element, or ask the container for the count of its elements.
you can try using cssSelectors as well,
List<WebElement> list = driver.findElements(By.cssSelector(".slides-8 > li"));
int length = list.size();
Related
<ul class="products-grid">
<li class="item">
<div class="product-block">
<div class="product-block-inner">
<img src="#/producta.jpg">
<h2 class="product-name">Product A</h2>
<div class="price-box">
<span class="regular-price" id="#">
<span class="price">Rs 1,849</span>
</span>
</div>
</div>
</div>
</li>
<li class="item">
<div class="product-block">
<div class="product-block-inner">
<img src="#/productb.jpg">
<h2 class="product-name">Product B</h2>
<div class="price-box">
<span class="regular-price" id="#">
<span class="price">Rs 1,849</span>
</span>
</div>
</div>
</div>
</li>
</ul>
I am at this moment scraping the item in a loop.
products = response.xpath('//ul[#class="products-grid"]//li//div[#class="product-block"]//div[#class="product-block-inner"]').extract()
After getting the product-block-inner node, I save it into products and then I will have to loop like
for product in products:
// parse the div.product-block-inner further deep down
// to get name, price, image etc
// and save it to a dict and yeild
pass
Is this possible that i get text, href for all div.product-block-inner in the final list without looping
Yes, but it's very confusing, for example you could try this:
products = response.xpath(
'//ul[#class="products-grid"]//li//div[#class="product-block"]//div[#class="product-block-inner"]'
).css(
'.product-name a::attr(href), .product-name a::text, .price::text'
).extract()
but I would suggest to always loop (btw, why do you call extract() when you assign it to products?)
products = response.xpath(
'//ul[#class="products-grid"]//li//div[#class="product-block"]//div[#class="product-block-inner"]'
)
for product in products:
yield {'name': product.css('.product-name a::text').extract_first()
'url': product.css('.product-name a::attr(href)').extract_first()
'price': product.css('.price::text').extract_first()}
(I've used css selectors in this case because the equivalent xpaths are longer, but the same can also be achieved using xpath)
I am trying to choose an element("Classic") from a dynamic dropdown list. Problem is that word Classic contains 2 elements.
Html page is:
<ul id="dynamic-14" class="results" role="list">
<li class="results-dept result">
<div dynamic-102" class="results" role="option">
<span class="match"/>
</div>
</li>
<li class="results-dept result">
<div dynamic-12" class="results" role="option">
<span class="match"/>
Classic
</div>
</li>
<li class="results-dept result">
<div dynamic-1022" class="results" role="option">
<span class="match"/>
Classic numbers
</div>
</li>
I tried to do it with xpath using:
//ul[#class="results"] //div[contains(.,'Classic')]
but it gives me back 2 values so robot framework can't choose one I need.
user normalize-space() function to get rid of the leading and trailing whitespace.
//ul[#class="results"] //div[ normalize-space(.)='Classic']
I do not know how to set even spacing in my navbar:
there is a bigger gap between Articles and User Profil than User Profil and Admin.
There is a bigger gap between Admin and DB than User Profil and Admin.
My code is:
<li class="blog-nav-item">
<a class="blog-nav-item" href="#" class="blog-nav-item active" data-toggle="dropdown" role="button" aria-expanded="false">Articles<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>All</li>
<li>Create New</li>
</ul>
</li>
<a class="blog-nav-item" href="/accounts/profil/">User Profil</a></li>
<a class="blog-nav-item" href="/admin/">Admin</a></li>
<li class="blog-nav-item">
DB<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>DB: JSON</li>
<li>DB: XML</li>
</ul>
</li>
That is because, by default, there is different margin spacing for a simple list element and a drop down menu.
Override the settings by:
.blog-nav-item > a{
margin-right:10px;
}
.blog-nav-item > .dropdown-menu{
margin-right:10px;
}
Adding these classes to the css will help
It is possible to display on screen 'ul' list like this?:
<ul>
<li> a </li> <li> f </li> <li> k </li>
<li> b </li> <li> g </li> <li> k </li>
<li> c </li> <li> h </li> <li> l </li>
<li> d </li> <li> i </li> <li> m </li>
<li> e </li> <li> j </li> <li> n </li></ul>
I need to be everything in one ul and li in blocks (for example 5 elements).
You can do this with column-count CSS3
Try
ul {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}
SEE DEMO
ul {width: 120px;}
li {margin: 0; padding:0; float: left; width: 40px;}
try looking into display: table-cell. I'm almost certain its what you want.
CSS-Tricks Display Property
You use CSS3 multi-column layouts. Apply following style to the UL:
UL {
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
}
(you may need to rearrange your LI as needed)
Demo: http://jsfiddle.net/2N7rB/
I have a list of items with each having a like button and number of likes. I need to order then based off the number of likes. Any ideas how to accomplish this?
<div>
<h1>Ranking</h1>
<!-- The list -->
<ul>
<li>
<h4>Item 1</h4>
<p>200 likes</p>
<p>♥ like?</p>
</li>
<li>
<h4>Item 2</h4>
<p>100 likes</p>
<p>♥ like?</p>
</li>
<li>
<h4>Item 3</h4>
<p>50 likes</p>
<p>♥ like?</p>
</li>
<li>
<h4>Item 4</h4>
<p>25 likes</p>
<p>♥ like?</p>
</li>
<li>
<h4>Item 5</h4>
<p>1 likes</p>
<p>♥ like?</p>
</li>
</ul>
</div>
You can try this code:
function sortAlpha(a,b){
// here we take the number of likes
var aLikes = parseFloat($(a).children("p").first().html());
var bLikes = parseFloat($(b).children("p").first().html());
return aLikes > bLikes? 1 : -1;
};
$('div ul li').sort(sortAlpha).appendTo('ul');