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']
Related
Hej all !
As the title of the subject suggest, I wonder if it's possible to have deep linking that works on nested tabs.
I mean, if I use only one tabs container, it works fine, but I don't know how to deep link to a tab inside a parent tab. It should first open the parent tab and then display the goal child tab.
Is it possible using Foundation 6 deep-linking please (without hacks) ?
Let's say we have this code :
<div>
<ul class="tabs" data-tabs id="tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 1</li>
<li class="tabs-title">Content 2</li>
</ul>
</div>
<div class="tabs-content" data-tabs-content="tabs">
<div class="tabs-panel is-active" id="tab1">
My Content 1
</div>
<div class="tabs-panel" id="tab2">
<ul class="tabs" data-tabs id="tab2-tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 2-1</li>
<li class="tabs-title">Content 2-2</li>
</ul>
<div class="tabs-content" data-tabs-content="tab2-tabs">
<div class="tabs-panel is-active" id="tab2-tab1">
My Content 2-1
</div>
<div class="tabs-panel" id="tab2-tab2">
My Content 2-2
</div>
</div>
</div>
</div>
How can I open "My Content 2-2" using deep-linking please ?
<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 would like to undo the changes that spree_fancy theme has made to the listing products. In the original Spree, I received products with 'columns three' when I browsed a taxon.
<div data-hook="taxon_products">
<ul id="products" class="inline product-listing" data-hook="">
<li id="product_3" class="columns three alpha" itemtype="http://schema.org/Product" itemscope="" data-hook="products_list_item">
<div class="product-image">
<a class="info" title="Ruby on Rails Baseball Jersey" itemprop="name" href="/products/ruby-on-rails-baseball-jersey">Ruby on Rails Baseball Jersey</a>
<span class="price selling" itemprop="price">$19.99</span>
</li>
However, spree_fancy theme inserted another nested unordered list and set the class to "columns four". I would like to undo these changes. My first guess was to browse through the overrides, but I couldn't find the caused file.
div data-hook="taxon_products">
<ul id="products" class="inline product-listing" data-hook="">
<li class="product-row">
<ul>
<li id="product_18" class="columns four alpha" itemtype="http://schema.org/Product" itemscope="" data-hook="products_list_item">
<div class="product-image">
<a class="info" title="Sunflower Clip Arts" itemprop="name" href="/products/sunflower-clip-arts">Sunflower Clip Arts</a>
<span class="price selling" itemprop="price">$4.00</span>
</li>
The override happens here:
https://github.com/spree/spree_fancy/blob/596d11e09343a1ce716b4c34bcd3802765728c46/app/overrides/spree/shared/_products/group_products_list_by_3_in_row.html.erb.deface
If you place an empty file at app/overrides/spree/shared/_products/group_products_list_by_3_in_row.html.erb.deface and restart your web server, this override should not longer be applied.
The example from Foundation 3 explains how to set up tabs using lists but how do you use the tabs with a div layout?
<dl class="tabs">
<dd class="active">Simple Tab 1</dd>
<dd>Simple Tab 2</dd>
<dd class="hide-for-small">Simple Tab 3</dd>
</dl>
<ul class="tabs-content">
<li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
<li id="simple3Tab">This is simple tab 3s content.</li>
</ul>
<div class="tabs-content">
<div class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<div id="simple2Tab">This is simple tab 2s content. Now you see it!</div>
<div id="simple3Tab">This is simple tab 3s content.</div>
</div>
Add the divs in the list item.
<ul class="tabs-content">
<li class="active" id="simple1Tab">
<div>This is simple tab 1s content. Pretty neat, huh?</div>
</li>
<li id="simple2Tab">
<div>This is simple tab 2s content.</div>
</li>
<li id="simple3Tab">
<div>This is simple tab 3s content.</div>
</li>
</ul>
I'd just like to ask if this coding method is still valid.
<div class="one-third column">
<ul class="nav-link">
<li class="button">Going to put code here.</li>
</ul>
</div>
<div class="one-third column">
<ul class="nav-link">
<li class="button">Going to put code here.</li>
</ul>
</div>
<div class="one-third column">
<ul class="nav-link">
<li class="button">Going to put code here.</li>
</ul>
</div>
As you can see I'm repeating the unordered lists inside of the div class. This is necessary for me because I'm using Skeleton boilerplate and I need them to be in 3 columns, with the unordered lists.
I tried putting the list items inside the divs, but the validator states you cannot put div tags inside the unordered lists. So I'm asking if this method is still okay for me to use, since this website will be used as a public template. If there's an alternative way I can code this, please let me know. Thank you.