I have many web elements like this
<a data-control-name="browsemap_profile" href="/in/quyen-nguyen-63098b123/" id="ember278" class="pv-browsemap-section__member ember-view"> <img width="56" src="https://media-exp1.licdn.com/dms/image/C5603AQFHZ41UPexTLQ/profile-displayphoto-shrink_100_100/0?e=1599091200&v=beta&t=lkoiKVK58W1tciUEc5UUohvEsa99lLTv66a1PJ4hp5k" loading="lazy" height="56" alt="member_name" id="ember279" class="lazy-image pv-browsemap-section__member-image EntityPhoto-circle-4 ember-view">
<div class="pv-browsemap-section__member-detail">
<h3 id="ember280" class="pv-browsemap-section__member-detail--has-hover actor-name-with-distance ember-view"> <span class="name-and-icon"><span class="name">Quyen Nguyen</span>
<span class="distance-and-badge">
<span data-test-distance-badge="" id="ember281" class="distance-badge separator ember-view"><span class="visually-hidden">
2nd degree connection
</span>
<span class="dist-value">2nd</span>
</span><!----> </span>
</span>
</h3>
<p class="pv-browsemap-section__member-headline t-14 t-black t-normal">
<div style="line-height:2rem;max-height:4rem;-webkit-line-clamp:2;" id="ember282" class="inline-show-more-text inline-show-more-text--is-collapsed inline-show-more-text--is-collapsed-with-line-clamp ember-view">I'm looking for IT Director/Admissions Director/Training Head/Marketing Director
<!---->
<!----></div>
</p>
</div>
</a>
I want to get a list of data like this /in/quyen-nguyen-63098b123/? How many way to select then get this data?
I also want to get a list of id in pattern: ember278, ember279 , ember238 , etc.
Use
IEnumerable<IWebElement> connectionBlocks = driver.FindElements(By.XPath("//a[#id[starts-with(., 'ember') and string-length() > 5]]"));
Then use regular expression for next parsing.
Related
I'm trying to build a "Team Member" page from JSON data.
I can create the page with basic things like firstName, lastName, position.
Each team member has their own page with a little more information
What I cant figure out is how to include the team members url to my [routerLink].
My router link would look like this which I have setup in my routes
<a [routerLink]="['./glenn']">
And this is how I'm attempting to use it
<div class="team-members" *ngFor="let teammember of teammembers" >
<div class="clearfix">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">
<a [routerLink]="['./"{{teammember.firstName}}"']">
<div class="member-pic-holder">
<img alt="" src='{{teammember.photo}}' />
<div class="member-overlay"></div>
</div>
<h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4>
<p class="company-position">{{teammember.position}}</p>
</a>
</div>
</div>
</div>
Any thoughts on this one please?
It's also breaking when I'm trying to include the team-members photo
<img alt="" src='{{teammember.photo}}' />
However one thing at a time!
Thanks
GWS
You are using the {{ foo.bar }} binding incorrectly, the {{ }} syntax allows you to do one way binding, what you want is to use regular js expressions when binding to your objects properties.
When binding to an html element attribute, you can use the [attr.{id|href|etc}] binding, in your case, for the href of the image you can use:
<img alt="" [attr.href] = 'teammember.photo' />
And for the router, simply use [routerLink] = "[teammember.firstName]" (not sure why you need the ./, if you do need it, you could append it using a getter on your team member class, as shown bellow.
For your routes, you could do something along the lines of:
Team Member Class
export class TeamMember {
// ...properties and constructor
private memberUrl: string = "foobar"
get MemberRoute(){
return `./${this.memberUrl}`;
}
}
Template:
<div class="team-members" *ngFor="let teammember of teammembers" >
<div class="clearfix">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">
<a [routerLink]="[teammember.MemberRoute']">
<div class="member-pic-holder">
<img [attr.href] = 'teammember.photo' />
<div class="member-overlay"></div>
</div>
<h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4>
<p class="company-position">{{teammember.position}}</p>
</a>
</div>
</div>
</div>
Hope this helps!
can you try like this:
['./',teammember.firstName]
for img use
<img alt="" [src]="teammember.photo" />
I'm trying to do the right mikrodaty layout for the site. Do I understand how to act . For example I go to https://schema.org/Organization and go through the list to the bottom . Opt for each tag (name, adress, streetAddress and so on ) . If possible, I need to fill out all the tags , am I right?Now I got something like this:
<div itemscope itemtype="http://schema.org/Organization">
<div class="historyb" id="historyb">
<span class="historyh2" itemprop="name">MyName</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">
Street & number of house
</span>
<span itemprop="addressLocality">City</span>,
<span itemprop="postalCode">111111</span>
</div>
<a href="mailto:MyEmail#gmail.com" itemprop="email">
MyEmail#gmail.com
</a>
<span itemprop="foundingDate">Date</span>
<span itemprop="foundingLocation">City</span>
<span itemprop="legalName">Full Name</span>
<a itemprop="url" href="#"><img itemprop="logo" src="http://www.mysite.ru/images/logo.png" /></a>
</div>
This is valid according to Google's test tool but you might want to include addressCountry and addressRegion for https://schema.org/Place
Hi I got this piece of html and i want to get text elements from it
<span id="product_description" itemprop="description" class="">
<h1>Toltec Lighting 216-BRZ-508 Leaf Collection Traditional Potrack With Italian Marble Glass In Bronze</h1>
<br class="">
<span style="font-weight: bold;" class="">MANUFACTURE: </span>
Toltec Lighting
<br class=" xh-highlight">
<span style="font-weight: bold;" class="">COLLECTION: </span>
Leaf
<br class=" xh-highlight">
</span>
I want to get list of values. In this case it will be "Toltec Lighting" and "Leaf"
You can try this :
//span[#id='product_description']/text()
or if you need to also make sure no empty text nodes selected :
//span[#id='product_description']/text()[normalize-space()]
You may try using this:
//*[text()='Toltec Lighting']
NB - This question is very similar to the other one I asked - Xpath Expression to select nodes based on presence of child node? - however, I'm trying to extend it, and failing.
I have a HTML page listing products.
I'm trying to use Xpath to distinguish between available and sold-out products.
Available products look like this:
<div class="product-widget-container">
<article itemscope="" itemtype="http://schema.org/Product" class="product grid_4 full space omega large " data-productid="1996364" data-name="Daily Wrinkle Defence Essential Skin Reviver Cream Cleanser - 100ml" data-actual-price="5.99" data-is-available="true" data-low-stock="" data-popularity="6" data-smallimgsrc="https://staging.foo.com.au/site_media/uploads/product_image/2014/1/16/pd1996364_94d4a520-7e4a-11e3-930f-000c29c9a057_image_310x434.JPG" data-largeimgsrc="https://staging.foo.com.au/site_media/uploads/product_image/2014/1/16/pd1996364_94d4a520-7e4a-11e3-930f-000c29c9a057_image_310x434.JPG" data-sizes="[]" data-available-sizes="[]" data-categories="[119977]" data-brand="That Natural Source" data-discount="83" data-default-order="9">
<figure>
<div class="product-img-container ">
<img itemprop="image" class="lazy product-img" src="https://staging.foo.com.au/site_media/uploads/product_image/2014/1/16/pd1996364_94d4a520-7e4a-11e3-930f-000c29c9a057_image_310x434.JPG" data-original="https://staging.foo.com.au/site_media/uploads/product_image/2014/1/16/pd1996364_94d4a520-7e4a-11e3-930f-000c29c9a057_image_310x434.JPG" alt="Up to 85% off Summer Looks Daily Wrinkle Defence Essential Skin Reviver Cream Cleanser - 100ml " style="display: inline;">
<span class="arrow arrow-up"></span>
<div class="quick-buy" style="display: none;">
<span class="arrow-down-trans"></span>
<div class="select-size">
<form class="express-buy" action="/basket/add/1996364/" method="post">
<input type="hidden" id="id_quantity_1996364" class="purchase-quantity" name="quantity" value="1">
<input type="hidden" value="" name="addbasket.x">
<span>
<input class="add-to-basket btn btn-primary btn-large " type="submit" value="ADD TO BASKET">
</span>
</form>
</div>
</div>
</div>
<a itemprop="url" class="overlay-link" href="/event/outlet/up-to-off-summer-looks/1996364-daily-wrinkle-defence-essential-skin-reviver-cream-cleanser-100ml/" title="Daily Wrinkle Defence Essential Skin Reviver Cream Cleanser - 100ml"></a>
<figcaption>
<h2 itemprop="name" class="mason name">
That Natural Source: Daily Wrinkle Defence Essential Skin Reviver Cream Cleanser - 100ml
</h2>
<small itemprop="brand" class="bed"> Up to 85% off Summer Looks</small>
<small class="bed shoes-price">
$5.99
<del>$34.95 RRP</del>
<span class="discount">(83% discount)</span>
</small>
</figcaption>
</figure>
</article>
</div>
Sold-out products look like this:
<div class="product-widget-container">
<article itemscope="" itemtype="http://schema.org/Product" class="product grid_4 full space omega large " data-productid="1996526" data-name="#T58 When Monkeys Fly! - Oz The Great And Powerful Collection By OPI" data-actual-price="10.99" data-is-available="" data-low-stock="true" data-popularity="1" data-smallimgsrc="https://staging.foo.com.au/site_media/uploads/product_image/2014/1/16/pd1996526_d0402efe-7e4a-11e3-930f-000c29c9a057_image_310x434.jpg" data-largeimgsrc="https://staging.foo.com.au/site_media/uploads/product_image/2014/1/16/pd1996526_d0402efe-7e4a-11e3-930f-000c29c9a057_image_310x434.jpg" data-sizes="[]" data-available-sizes="[]" data-categories="[119968]" data-brand="OPI" data-discount="0" data-default-order="39">
<div class="stock-status be_sprites sold-out">Sold Out</div>
<figure>
<div class="product-img-container ">
<img itemprop="image" class="lazy product-img" src="https://staging.foo.com.au/site_media/uploads/product_image/2014/1/16/pd1996526_d0402efe-7e4a-11e3-930f-000c29c9a057_image_310x434.jpg" data-original="https://staging.foo.com.au/site_media/uploads/product_image/2014/1/16/pd1996526_d0402efe-7e4a-11e3-930f-000c29c9a057_image_310x434.jpg" alt="Up to 85% off Summer Looks #T58 When Monkeys Fly! - Oz The Great And Powerful Collection By OPI " style="display: inline;">
<span class="arrow arrow-up"></span>
</div>
<a itemprop="url" class="overlay-link" href="/event/outlet/up-to-off-summer-looks/1996526-t58-when-monkeys-fly-oz-the-great-and-powerful-collection-by-opi/" title="#T58 When Monkeys Fly! - Oz The Great And Powerful Collection By OPI"></a>
<figcaption>
<h2 itemprop="name" class="mason name">
Opi: #T58 When Monkeys Fly! - Oz The Great And Powerful Collection By OPI
</h2>
<small itemprop="brand" class="bed"> Up to 85% off Summer Looks</small>
<small class="bed shoes-price">
$10.99
</small>
</figcaption>
</figure>
</article>
</div>
I was thinking I can go on either the "sold-out" class on the , or the Sold Out text within it.
I've tried all of the following, and none of them seem to work - they all give me the full set of products:
//div[#class="product-widget-container" and not(div[#class="stock-status be_sprites sold-out"])]
//div[#class="product-widget-container" and not(div[contains(#class, "sold-out")])]
//div[#class="product-widget-container" and not(div[contains(., "Sold Out")])]
Any thoughts on what I'm doing wrong in my XPath expression?
Cheers,
Victor
Your expressions have the right idea, but you don't need to nest [ ] brackets. Once you open them, you are in a conditional statement: everything you write will be part of the statement. So when you want to check an attribute of a child node, you just need to select it: node[child/#attribute].
You also need to check for the div at any depth since it isn't the first child node. If you write div[div/#class="foo"], you are checking for <div><div class="foo"></div></div>. If you write div[.//div/#class="foo"], you are checking for <div><anything><bar><div class="foo"></div></bar></anything></div>.
Something like
//div[#class="product-widget-container" and not(.//div/#class="stock-status be_sprites sold-out")]
should work !
try
//div[#class='product-widget-container' and not(#class='stock-status be_sprites sold-out')]
you should remove div[ and ] in the predicate
I have this weird problem.
When i wrap a anchor tag around a div, the html markup completely changes.. cleared cache and everything.
Its about the anchor with the class outgoing link
Html in the code editor (correct code):
<a class="outgoing-link" href="#">
<div id="content-element">
<div class="top-info">
<span class="title-provider">Vodafone</span>
<img src="phone-placeholder.png"
alt="placeholder"
width="58px"
height="50px"/>
<div class="bg-circle"></div>
<span class="dur-discount">1e 3 maand</span>
<span class="price-discount">€ 16,50</span>
<span class="dur-normal">Daarna</span>
<span class="price-normal">€ 20,00</span>
</div>
<h3>iPhone 4GS abonnement</h3>
<p><span>100</span> min & sms <span>500</span> mb</p>
<p><span>2 jr</span>telefoon abonnement</p>
<p>Prijs telefoon: <span>Gratis</span></p>
<div class="hover-extra-info">
<p>Aansluitkosten: <span>€ 24,95</span></p>
<p>Vodafone abonnement</p>
<p>aanbieder: Student Mobiel</p>
<p>Totale kosten over 2 jaar</p>
<p>€ 547,22</p>
</div>
</div><!-- end content-element-->
</a>
Code in the browser:
<a class="outgoing-link" href="#"></a>
<div id="content-element">
<a class="outgoing-link" href="#">
<div class="top-info">
<span class="title-provider">Vodafone</span>
<img src="phone-placeholder.png"
alt="placeholder"
width="58px"
height="50px"/>
<div class="bg-circle"></div>
<span class="dur-discount">1e 3 maand</span>
<span class="price-discount">€ 16,50</span>
<span class="dur-normal">Daarna</span>
<span class="price-normal">€ 20,00</span>
</div>
</a>
<h3>iPhone 4GS abonnement</h3>
<p><span>100</span> min & sms <span>500</span> mb</p>
<p><span>2 jr</span>telefoon abonnement</p>
<p>Prijs telefoon: <span>Gratis</span></p>
<div class="hover-extra-info">
<p>Aansluitkosten: <span>€ 24,95</span></p>
<p>Vodafone abonnement</p>
<p>aanbieder: Student Mobiel</p>
<p>Totale kosten over 2 jaar</p>
<p>€ 547,22</p>
</div>
</div><!-- end content-element-->
It adds another link and puts them at the wrong places.
Any ideas as to what's going on? Or am i just missing something.
Any help would be appreciated :)
i think its because nested anchor tags are illegal
see: http://www.w3.org/TR/html401/struct/links.html#h-12.2.2
it should be easy to do without the nested anchor tag while keeping the functionality the same.
Could be a try to automatically fix invalid HTML ( => Quirksmode ?), as an achor-tag should not contain -Tags.
Try to add a DOCTYPE statement at the beginning of the file, does that change the behavoir?
The Doctype-Statement (must be on the first line HTML file / output) could be like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">