I've been using zen coding and I love it. There's just one thing I can't figure out how to do (or if it's even possible.)
Say I typed:
ul#navigation>li*3
Which would output:
<ul id="navigation">
<li></li>
<li></li>
<li></li>
</ul>
How would I apply a class to a specific numbered element? Such as add a class called 'hello' to the second <li>?
You can‘t apply specific class for repeating element in this case.
However, you can insert specific class name (or any other attribute) by wrapping text with abbreviation. For example, you can wrap this text:
one
two
three
with the following abbreviation: ul#navigation>li[class=$#]*. It will produce the following output:
<ul class="navigation">
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
</ul>
Read more on https://github.com/sergeche/zen-coding/wiki/Release-Notes
Related
I want <li></li> or <li aria-current="page"></li> depending on some condition.
I tried:
<li #(current == Model.CurrentPage ? #"aria-current=\"page\"" : "") ></li>
Which gives the incorrect result:
<li aria-current=""page""></li>
There have been many changes in Razor over the years. In v7, is there an easy one-liner way to do this? (Without multiline if/else statements, tag helpers, etc.)
(Note that the boolean attribute rendering trick doesn't work here, as I want <li></li> rather than <li aria-current=""></li>.)
I tried as below:
<li aria-current=#(current==Model.Page? "page":null )></li>
The result:
Is this what you want?
I have the following html (view):
<li>
<b>Institute:</b> Length: ${institutes.length}
<ul>
<li repeat.for="el of institutes">
${el.institute}: ${el.terminalCount}
</li>
</ul>
</li>
I see the following in the browser:
As seen, the array institutes has 2 elements, but in list I see 4 more rows - with empty values.
What is it? How I can fix it?
Thanks in advance.
You definitly have something else on that array apart from the elements. Otherwise it would be just two LI tags.
If you look # the source
there are number of repeater strategies in aurelia templating. Depending on the type of the object you want to iterate over.
If you are actively developing something with aurelia, I suggest you join the official aurelia discourse
And the gitter channel
I have a link that hidden the element when the page is resized, so im trying to get that element, by previous element.
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="icon icon-doc-new"></i>
<span class="hidden-sm dropdown-label">Create</span>
<span class="caret hidden-sm"></span>
</a>
To get the "normal" element i use the Xpath :
.//*[#id='main-menu']/li/a/span[contains(text(), 'Create')]
then i would like to get element <i class="icon icon-doc-new"></i>
something like this
.//*[#id='main-menu']/li/a/span[contains(text(), 'Create')]/precending-sibling::i[0] //(also tried different indexes]
Have tried a couple of other methods but with no go either.
Any tips`?
Try to use below XPath:
.//*[#id='main-menu']/li/a[span[text()="Create"]]/i
So, you actually need parent element if I'm correct and not preceding sibling.
Try with .//*[#id='main-menu']/li/a/span[contains(text(), 'Create')]/parent::a
If you want preceding sibling then try with .//*[#id='main-menu']/li/a/span[contains(text(), 'Create')]/precending-sibling::i
Try any of these below mentioned xpath
//span[#class='caret hidden-sm']/..//preceding-sibling::span[text()= 'Create']
Explanation of xpath:- Use class attribute of <span> tag and move ahead with another <span> tag along with text method using preceding-sibling keyword.
OR
//span[#class='caret hidden-sm']/..//preceding-sibling::span[#class='hidden-sm dropdown-label']
Explanation of xpath:- Use class attribute of <span> tag and move ahead with another <span> tag along with class attribute using preceding-sibling keyword.
My supervisor has recently switched us from HP-UFT to Robot with the Selenium Webdriver and I'm finding it extremely difficult to figure out how to use the driver and/or keyword framework to expand a folding tree ul/li webelement.
Below is a stripped out example of the code on the page:
<ul>
<li class="node-class open" id="i1454430045821320">
<a class="" style="" href="">
<ins> </ins>Location Header 1</a>
<ul>
<li class="node-instance leaf" id="i1454430058247421">
<a class="" style="" href="">
<ins> </ins>Location 1</a>
</li>
<li class="node-instance last leaf" id="i14545337159411690">
<a class="" style="" href="">
<ins> </ins>Location 2</a>
</li>
</ul>
</li>
<li class="node-class closed " id="i14544407827351156">
<a class="" style="" href="">
<ins> </ins>Location Header 2</a>
</li>
What I'm trying to do should be extremely simple: I want to expand a specifed closed tree structure if it's classed as closed. Beneath each branch is an optional nested branch, or a selection checkbox. My end goal is to be able to drill down to a location in the tree that the tester specifies and click the end leaf.
Using "Click Element|xpath=/ul/li[a[contains(text(),'Location Header 2')]" does expand the branch but it also selects all of the child node checkboxes.
In UFT, if I hit this kind of problem I'd simply change the parent <li> class to force it open (if I couldn't click or use any of the other methods to drill down and select).
In Robot, I can use the keyword "Get Element Attribute" to READ the class, but I don't see a keyword to CHANGE it so that idea is out. What I'm looking for is a way to expand the tree branches without inadvertently selecting all of the child nodes.
The drilling down through the tree portion I can deal with once I figure out how to open the nodes correctly but opening up the branch without potentially selecting all of the sub-items is making me pound my head into my desk.
I keep thinking that maybe I'm missing something simple. Any assistance on something that I could try would be greatly appreciated.
Figured it out! Thank you all so much for the ideas.
Click Element At Coordinates | xpath=//ul/li[a[contains(text(),'Location Header 2')] | -100 | 0
Luckily all of the ul element columns on the page have the same css style which sets them at 200px width. I figured through trial and error that the "At Coordinates" option clicks from the center of the object (and not the top left as I originally thought). I figured I'd share this in case anyone else ever has a similar problem.
Am newbie to selenium (java).
I have to click on the menu item which is under <ul> tag as <li> items. I can able to get it with //*[#id='MainMenu']/li[5]/span xpath.
I do not want to hard code [5] of the list item, because item's position may change. It may not at 5th position all the time.
I wanted to get xpath for the particular item under particular tag with an id.
Edit:
This is how my html looks like. List item text will be loading dynamically.
<ul id="sfMainMenu" class="sf-menu ui-selectable">
<li class="ui-selected ui-selectee">
<span subnav="0" param="cmd=desk" filesrc="/Dashboard/Index"></span>
</li>
<li class="ui-selectee"></li>
<li class="ui-selectee"></li>
<li class="ui-selectee"></li>
<li class="ui-selectee">
<span subnav="18" param="cmd=desk" filesrc="../myFile.aspx"></span>
</li>
</ul>
Kindly suggest the approach with an example.
I suggest trying this:
//*[#id='MainMenu']/li[normalize-space() = 'The text you want']/span
Though if you could show us what the HTML in question actually looks like, we can provide a more reliable answer. XPath doesn't have any concept of "visual text", so if you have some text that's hidden within the li you're trying to retrieve, that could be considerably trickier.
I have solved by using filesrc attibute of span tag in the list item.
Xpath is:
//span[contains(#filesrc, 'myFile.aspx')]
As my .aspx file will be the same for any page, so I used filesrc attribute which contains the actual file name and is the only file name in that html page.
You can use the following
driver.FindElement(By.XPath("//li[contains(Text(),'Expected Text']")).Click();
Or you can avoid xpath all together by running a foreach loop on the relevant Class tag
foreach (IWebElement e in driver.FindElements(By.ClassName("ui-selectee")))
{
if (e.Displayed && e.Text == "Expected Text")
e.Click();
}