I have this url tag
<a id="day-{{$index+1}}"
#click="console.log($event.target.getAttribute('id'))"
<p class="uppercase font-Lato">
Day {{$index+1}}
</p>
</a>
but if I click on the url I get "undefined" because it will try to log the child element id, I want to get the "a" element id
Assuming your {{$index+1}} is server side code.
You do not need to do a getAttribute() on the $event.target ...
You are looking for the .parentNode
<a id="day-{{$index+1}}"
#click="console.log($event.target.parentNode.id)"
<p class="uppercase font-Lato">
Day {{$index+1}}
</p>
</a>
I find it useful to console.log the entire object and then look at the details of the object in the console to find the "attributes" I'm looking for.
Related
I have the following microdata HTML code:
<div itemscope itemtype="http://schema.org/PerformingArtsTheater">
<h2 itemprop="name">The Old Vic</h2>
<div itemscope itemtype="http://schema.org/TheaterEvent" itemprop="http://schema.org/event">
<h3 itemprop="name">Endgame</h3>
<div itemprop="startDate">2020-01-27</div>
</div>
</div>
I.e. : A PerformingArtsTheater called "The Old Vic" has an event, the TheaterEvent called "Endgame".
When an event is at a PerformingArtsTheater, which is a Place, I would think that is is obvious that the TheaterEvent's location is that same `PerformingArtsTheater`` ?
But Google's Structured Data Test Tool finds an error in the TheaterEvent: "A value for the location field is required.".
How come? Wouldn't a location field here be redundant at best, and a contradiction at worst?
(Like "February at The Old Vic: Endgame by Samuel Beckett at The Old Vic.")
Is there a way to please Gogle here, without introducing redundancy?
Thing > Event > TheaterEvent
TheaterEvent (Theater performance.) - location property expected Type place or more specific object like PerformingArtsTheater:
Thing > Place > CivicStructure > PerformingArtsTheater
In your case the PerformingArtsTheater is The Old Vic - the correct data structure outline:
Location (Required property for event snippet)
https://developers.google.com/search/docs/data-types/event
<div itemprop="location" itemscope="" itemtype="http://schema.org/PerformingArtsTheater">
<span itemprop="name">Theater name</span>
<meta itemprop="address" content="London, UK"/>
</div>
Put the location as PerformingArtsTheater property (Nested object)
<section itemscope="" itemtype="http://schema.org/TheaterEvent">
<h2 itemprop="name">Event Name</h2>
<div itemprop="startDate">2020-01-27</div>
<address itemprop="location" itemscope="" itemtype="http://schema.org/PerformingArtsTheater">
<p itemprop="name" content="Theater name">Theater name</p>
<meta itemprop="address" content="Bennelong Point, Sydney NSW 2000, Australia"/>
</address>
</section>
Result ==> No errors:
Google snippet preview (Add image, description and so on)
By the way this is great example of nesting schema.org objects.
Based on the Microdata example in http://schema.org/HowTo and extrapolating syntax from the Microdata vs RDFa example in http://schema.org/hasOfferCatalog (there seem to be so few actual examples of RDFa to find?), I put together something like so:
<main vocab="http://schema.org/" typeof="HowTo">
<h1><span property="name">How to do the Hokey Pokey</span></h1>
<ol property="steps">
<li property="itemListElement" typeof="HowToStep">
<img alt="step 1" src="step1.jpg" align="left">
<p property="itemListElement" typeof="HowToDirection">
put your left hand in</p></li>
<li property="itemListElement" typeof="HowToStep">
<img alt="step 2" src="step2.jpg" align="left">
<p property="itemListElement" typeof="HowToDirection">
put your left hand out</p></li>
But, when put into Google's Structured Data Testing Tool, I get:
The property itemListElement is not recognized by Google for an object of type HowTo.
Yandex's validator also says:
WARNING: http://schema.org/itemListElement field not specified in http://schema.org/HowTo
What am I doing wrong?
You missed to specify the HowToSection (or HowToStep) type as value for the steps property.
The Microdata example uses:
<div id="steps" itemprop="steps" itemscope itemtype="http://schema.org/HowToSection">
The equivalent RDFa would be:
<div id="steps" property="steps" typeof="HowToSection">
If you aren’t providing an ItemList/CreativeWork value for the steps property, you are providing a Text value (this is what you are doing in your example markup). But you can’t add properties (like itemListElement) to a Text value.
For on my test i need to verify highlighted text (Lexington, KY) using my protractor test.
<li id="address" class="list">
<div class="content">
<small class="mb-1">
<span>
Suite # 278
<br>
</span>
**Lexington, KY**
</small>
</li>
How to verify highlighted text using css OR cssContainingText locator?
Actually Protractor creators have put great documentation in place , and pls read it thoroughly to gain good knowledge on usage of css & cssContainingText. I will answer your question in short here - Use element(by.cssContainingText('.content','Lexington'))
UPDATE 1:
In case you want to add an assertion .. do this - expect(element(by.cssContainingText('.content','Lexington'))).toContain('Lexington, KY')
For one I am confused because it seems like you are never closing the content div...is it closed after the li is closed?
Anyway...I would simply change the HTML so that you don't need some crazy convoluted mess of a selector. I would do it like this:
<li id="address" class="list">
<div class="content">
<small class="mb-1">
<span>
Suite # 278
<br>
</span>
<cityState>Lexington, KY</cityState>
</small>
</li>
function checkCityState(){
return element(by.tagName('cityState')).getText();
}
expect(checkCityState()).toBe('Lexington, KY');
I'm struggling to correctly add microdata to events on my page. The Google Structured Data Testing tool can read the data but it isn't displaying it correctly. I'm getting confused.
I am trying to tag it for a sports league that has a single event on one night that consists of three games all taking place at the same location.
<div itemscope itemtype="http://schema.org/SportsEvent"><!--microdata week 1 event-->
<meta itemprop="name" content="Week 1 Lacrosse Games">
<meta itemprop="location" content="Street, Town, NY">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <!--column-->
<h3>Week 1<br><span itemprop="startDate" content="2014-06-27T18:00">Friday, June 27</span></h3>
<br>
<div itemprop="subEvent" itemscope itemtype="http://schema.org/subEvent">
<h4><span itemprop="name">Game 1</span> - 6:00 PM</h4>
<p><span itemprop="performer">Team 1 vs.Team 2</span></p>
</div>
<div itemprop="subEvent" itemscope itemtype="http://schema.org/subEvent">
<h4><span itemprop="name">Game 2</span> - 7:00 PM</h4>
<p><span itemprop="performer">Team 3 vs. Team 4</span></p>
</div>
<div itemprop="subEvent" itemscope itemtype="http://schema.org/subEvent">
<h4><span itemprop="name">Game 3</span> - 8:00 PM</h4>
<p><span itemprop="performer">Team 5 vs. Team 6</span></p>
</div>
</div><!--end column-->
</div><!--microdata week 1 event-->
I'm not sure what sort of problems you're having with the rich snippets displaying, but I did notice a couple of things that I'd recommend you change. Since all of these events are sporting events, I would probably recommend that you use the SportsEvent type for them all. You also need to specify all of the start times in ISO 8601 format. Additionally, the expected value of the "performer" property is either an Organization or Person, and SportsTeam is an extension of the Organizaton type. So I would recommend using that property twice within each event so that you could specify the two different teams that are playing, along with the SportsTeam type, like this:
<div itemprop="subEvent" itemscope itemtype="http://schema.org/SportsEvent">
<h4><span itemprop="name">Game 1</span> - <meta itemprop="startDate" content="2014-06-27T18:00" />6:00 PM</h4>
<p><span itemprop="performer" itemscope itemtype="http://schema.org/SportsTeam">
<span itemprop="name">Team 1</span></span> vs</p>
<p><span itemprop="performer" itemscope itemtype="http://schema.org/SportsTeam">
<span itemprop="name">Team 2</span></span></p>
</div>
I hope that helps.
Because I was using subevents, Google required that I have the microdata URL called out for each event. They have a rule that says if you have multiple events on the same page, you need to have a URL for each one.
Since I used the same page for all of them, I gave each subevent a unique ID and I linked that ID in the address.
I want to link to a specific page for a content author but my RDFa seems to get misinterpreted.
In the example below I want to define a Photograph with an author property, which itself is Person with a name. And I want the name to be a link to a page with all of the contributor's content.
<div typeof="Photograph" resource="/photo/5" vocab="http://schema.org/">
<p property="author" typeof="Person">
Contributed by:
<a href="/contributor/5" title="Contributions from Weston">
<span property="name">Weston</span>
</a>
</p>
</div>
But trying to validate I get the following Turtle format results from the W3C Validator
#prefix ns1: <http://www.w3.org/ns/rdfa#> .
#prefix ns2: <http://schema.org/> .
<> ns1:usesVocabulary ns2: .
</contributor/5> ns2:name "Weston" .
</photo/5> a ns2:Photograph;
ns2:author [ a ns2:Person ] .
Which looks to me like the name is not associated with the Person, but with the resource /contributor/5.
You need to have the href attribute (the one containing your Person URI) in the same HTML element as property and typeof, like this:
<div typeof="Photograph" resource="/photo/5" vocab="http://schema.org/">
<p>
Contributed by:
<a property="author" typeof="Person" href="/contributor/5" title="Contributions from Weston">
<span property="name">Weston</span>
</a>
</p>
</div>
For testing your markup, I highly recommend http://rdfa.info/play/ for live debugging :)
As you noticed the href causes describing a new resource.
There is another possibility to solve it: keep your code like it is and simply add an empty property attribute to the a element:
<div typeof="Photograph" resource="/photo/5" vocab="http://schema.org/">
<p property="author" typeof="Person">
Contributed by:
<a href="/contributor/5" title="Contributions from Weston" property="">
<span property="name">Weston</span>
</a>
</p>
</div>
This will be the turtle result:
#prefix ns1: <http://www.w3.org/ns/rdfa#> .
#prefix ns2: <http://schema.org/> .
<> ns1:usesVocabulary ns2: .
</photo/5> a ns2:Photograph;
ns2:author [ a ns2:Person;
ns2:name "Weston" ] .
I found this solution in some official guides like the HTML Data Guide:
http://www.w3.org/TR/html-data-guide/