We have tabs called Community, Resources and Support which have the same section class Div Class and Span Class attributes as seen in the html code below.
How to "select" or choose one of the tabs and then traverse down the path to the links.
<section class="s-fn-item">
<div class="s-fn-wrapper-item">
<h5 class="s-fn-title-item">
<span class="s-fn-item-link">Community</span>
</h5>
<div class="s-fn-wrapper-sub-menu bg-base bg-shadow-down-medium fn- offscreen" style="display: block; height: 245px;">
<ul class="s-fn-sub-menu-item">
<li class="s-fn-promo-sub-menu-item">QA Community Home
</li>
<li class="s-fn-promo-sub-menu-item">Community Home
</li>
<li class="s-fn-promo-sub-menu-item">Community Events
</li>
</ul>
</div>
</div>
</section>
<section class="s-fn-item">
<div class="s-fn-wrapper-item">
<h5 class="s-fn-title-item">
<span class="s-fn-item-link">Resources</span>
</h5>
<div class="s-fn-wrapper-sub-menu bg-base bg-shadow-down-medium fn-offscreen" style="display: block; height: 227px;">
<ul class="s-fn-sub-menu-item">
<li class="s-fn-promo-sub-menu-item">Articles and How-Tos
</li>
<li class="s-fn-promo-sub-menu-item">Blog
</li>
Storymakers
Support
Support Home
Contact Us
Installation and Licensing
I agree with #user1433852 for using relative xpaths as they make life easier.. :) . I have formulated relative xpaths below to find the menu Community/Resources and then the xpath for a sub-menu item under them:
//span[.='Community']
This will select the 'span' element with the exact inner HTML or text as 'Community'.
//span[.='Community']/ancestor::div[#class='s-fn-wrapper-item']//a[#title='QA Community Home']
This will select the 'a' element with title 'QA Community Home' under the div element with class 's-fn-wrapper-item' which is the ancestor of the 'span' element with the exact inner HTML or text as 'Community'.
Similarly,
//span[.='Resources']
This will select the 'span' element with the exact inner HTML or text as 'Resources'.
//span[.='Resources']/ancestor::div[#class='s-fn-wrapper-item']//a[#title='Articles and How-Tos']
This will select the 'a' element with title 'Articles and How-Tos' under the div element with class 's-fn-wrapper-item' which is the ancestor of the 'span' element with the exact inner HTML or text as 'Resources'.
So, in both the cases above I am using the the primary items, i.e., Community and Resources to get to their submenu items, that are, QA Community Home and
Articles and How-Tos, respectively.
Related
Here's my code and I want to add another css class toggleable-content to the existing code:
<sly data-sly-resource="${'item' # resourceType='components/header'}"></sly>
This code would look something like this:
<section aria-label="aria label">
<ul class="row">
<li class="col">
<div class="body px-3">
<h2 class="h3">
body
</h2>
<p>body text</p>
</div>
</li>
</ul>
</section>
I want to remove section tag and add another css class toggleable-content to the <ul> tag. Below is what I'd like to achieve:
<ul class="row toggleable-content">
<li class="col">
<div class="body px-3">
<h2 class="h3">
body
</h2>
<p>body text</p>
</div>
</li>
</ul>
I was wondering how to use slightly to achieve the above? I tried something below but it doesn't work:
<sly data-sly-resource="${'item' # resourceType='components/header', cssClassName='toggleable-content'}"></sly>
Assuming the section markup is managed by the included resource (components/header) then you cannot do it directly. Indirectly, with AEM, you can pass a parameter (through request attributes) and retrieve it in the components/header model, then add the section conditionally (using data-sly-unwrap for example).
Or you re-organize your code and switch from resource inclusion to template calling and pass the parameter directly using data-sly-call.
I have adapted a code taken from example 2 on http://schema.org/ItemList
How do I use it together with Product? On frontpage and some other pages I have a list of products for which I would like to have a better markup.
The following code gives the error
A value for the position field is required.
but Product doesn't have a position, so if there is a value for position it gives different error.
<ul itemscope itemtype="http://schema.org/ItemList">
<meta itemprop="numberOfItems" content="10" />
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
<!-- <meta itemprop="position" content="1" /> -->
<a href="#" itemprop="url">
<img src="asdf.jpg" itemprop="image">
<div class="product-list__title" itemprop="name">
Product name
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div itemprop="price">
$12
</div>
<link itemprop="availability" href="http://schema.org/InStock" />
</div>
</a>
</li>
</ul>
The itemListElement property has three expected values:
ListItem
Text
Thing
ListItem is also a Thing, but it’s listed explicitly because it has a special role here: ListItem provides the position property. If you need to convey the position of the list items, you have to provide ListItem values.
Note that not every ItemList needs this. Your example with using Product values is fine (apart from the meta element which can’t be a child of ul), and unless you try to qualify for Google’s rich result (this is what the error message is about), you could keep it like that.
If you do want to provide the positions, an itemListElement could look like this:
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<meta itemprop="position" content="1" />
<div itemprop="item" itemscope itemtype="http://schema.org/Product">
<!-- your Product -->
</div>
</li>
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 have some slightly awkward markup and need to reference some elements from a separate container, and prevent those elements from appearing under the parent in their hierarchy. How can I do this?
Here's my (simplified) markup:
<body itemscope itemtype='https://schema.org/AboutPage'>
<div itemscope itemtype="https://schema.org/ProfessionalService">
<ul>
<li><img id="photo-emp1" itemprop="image" src="..."/></li>
<li><img id="photo-emp2" itemprop="image" src="..."/></li>
<li><img id="photo-emp3" itemprop="image" src="..."/></li>
<li><img id="photo-emp4" itemprop="image" src="..."/></li>
</ul>
<div id="tab-emp1" itemprop="employee" itemscope itemtype="https://schema.org/Person"
itemref="photo-emp1">
<h1 itemprop="name">John Doe</h1>
<h2 itemprop="jobTitle">Vice President, Finance</h2>
<div itemprop="description">John is...</div>
</div>
<div id="tab-emp2" itemprop="employee" itemscope itemtype="https://schema.org/Person"
itemref="photo-emp2">
<h1 itemprop="name">Jane Roe</h1>
<h2 itemprop="jobTitle">Vice President, Operations</h2>
<div itemprop="description">Jane is...</div>
</div>
...
</div>
</body>
The structure is required for a tab control, so I can't rearrange the markup.
The itemref attribute on the Person correctly drags the image 'under' the https://schema.org/Person node.
However, the image elements ALSO appear as properties under the https://schema.org/ProfessionalService node, which is not correct or desired.
How can I keep the image elements in their current location, reference them under Person, but prevent them from appearing under ProfessionalService?
Just add the itemscope attribute to the ul element. You'll get an extra, disconnected, item, but the images will no longer be part of the ProfessionalService item.
Strange issue, I am struggling for couple days. I have a simple knockoutjs sortable page that binds to 2 lists as below. I would like to move copy an item from list A to B. I tried passing helper: 'clone' in options as in documentation, but it doesn’t create a copy and moves the original item.
Here is the http://jsfiddle.net/a5FL5/13/, that shows the problem. Try moving item from list A to B, and it moves the original item, and no copy is created.
I haven’t been able to figure out what the issues. Any help is appreciated.
<div class="A">
<ul data-bind="sortable: { data:stagingList.filteredTodos , options: {helper: 'clone', connectToSortable: '.okay'}}">
<li data-bind="text: itemlist"> </li>
</ul>
</div>
<div class="B">
<ul data-bind="sortable: { data: dayList.dfilteredTodos }">
<li class="okay" data-bind="text: itemlist"> </li>
</ul>
</div>
Regards
Srini