This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is anything except LI's allowed in a UL?
I was doing something like that:
<ul>
<h3><a name="titlename">Title</a></h3>
<li>Text.</li>
<li>More text.</li>
<span>Click here to go to some place.</span>
</ul>
But i get warnings in visual studio:
Warning Validation (HTML5): Element 'h3' cannot be nested within element 'ul'.
Warning Validation (HTML5): Element 'span' cannot be nested within element эul'.
I googled and found that looks like it is not a problem to have another tags but <li> inside <ul>ю
But anyway may be some one have any opinions on that. Could it break something? do put you <h> tags or any another tags inside <ul>? What is your experience with that?
<ul> denotes an unordered list, while <li> denotes a list item that belongs to that unordered list - so it only really makes sense to have <li> elements within a <ul> element. If you want to give the unordered list a title, do it outside of the list (this would be the more 'normal' way), or within an <li> element that is inside the list.
<h3>My List Title</h3>
<ul>
<li>List items in here...</li>
</ul>
It is invalid if your <h3> is a child of the <ul>. You can only have it inside a <li> but not directly in a <ul>.
You can put inside ot <UL> tag only <LI>. And then in LI you can put what you want.
<ul>
<li><h3><a name="titlename">Title</a></h3></li>
<li>Text.</li>
<li>More text.</li>
<li><span>Click here to go to some place.</span></li>
</ul>
or
<h3><a name="titlename">Title</a></h3>
<ul>
<li>Text.</li>
<li>More text.</li>
</ul>
<span>Click here to go to some place.</span>
Yes, you can put anything you want inside of UL, but it's not by W3C standarts (you can see the validation errors) and nobody will guarantie you that in all browsers it will be displayed properly.
Related
I have a navigation menu in which I wish to bold certain areas of the menu using an injection script.
I wish to use a generic xpath to bold each of the items in the menu that I want.
Problem is, the menu has some selections of the same name that I do not bolded, all in one particular sub-menu.
The menu would look something like this:
<ul class="main-menu">
<li class="sub-menu">Employees</li>
<ul>
<li>Address List</li>
</ul>
<li class="sub-menu">Clients</li>
<ul>
<li>Address List</li>
</ul>
<li class="sub-menu">Contractors</li>
<ul>
<li>Address List</li>
<ul>
</ul>
To find the 'Address list', I might use an Xpath similar to this...
//ul[#class="main-menu"]//li[text()="Address List"]
Problem is, that would highlight all "Address List" items, and I do not want anything in the Employees list.
Keep in mind, this is only a sample menu, and I need to highlight more stuff all over the menu, both in sub-menus and on the main list, but I do not want to highlight anything in the Employees sub-menu, I want to exclude just those items in that list.
I've tried 'except' and 'not' but I guess I'm not getting how to use it or am putting it in the wrong context.
Try this on your actual html and see if it works:
//ul[#class="main-menu"]//
li[not(./text()="Employees")]
/following-sibling::ul/li[text()="Address List"]
I use CKEditor within a template system where I use custom tags and then my PHP backend will replace the custom tags found in the HTML with data.
For example, on a tutorial I may have a standard set of instructions on how to do something, but certain examples require extra instructions. In a situation like that I would insert the <%Extra_Instructions%> custom tag into the html and then the php backend would replace that with the instructions for that page.
So in a list, I would do something like:
<ol>
<li>Step 1</li>
<li>Step 1</li>
<li>Step 1</li>
<%Extra_Instructions%>
<li>You are all done!</li>
</ol>
The problem is that CKeditor detects that the custom tag is not correct html and automatically moves it outside of the list. So the source would become:
<%Extra_Instructions%>
<ol>
<li>Step 1</li>
<li>Step 1</li>
<li>Step 1</li>
<%Extra_Instructions%>
<li>You are all done!</li>
</ol>
Is there a way to configure Ckeditor not to do this for certain tags?
If you want to place these tags in places like inside <ul>, then the only solution here is to use config.protectedSource. Matching fragments of data will be transformed into HTML comments during editing. This of course makes them invisible to a user, but it allows to keep them in places where other elements cannot be located. E.g. inside <ul> you can only have <li> so your custom tags can only be replaced by comments or <li>. Protected source gives you the former and the latter is a much more complicated option because you would like to make some constraints about editability of these tags.
Example usage of config.protectedSource:
config.protectedSource.push( /<%[\s\S]*?%>/g );
This is the current situation: There are several files and folders in a specific location.
Once you hover over a file or a folder, an icon appears then you can click on that icon and a menu will appear. From that menu a user can select any action(rename, move,etc). The problem is that the XPath which is provided by FirePath is broken whenever a new file/folder is created/added in the location.
This is the initial line of code which works fine until the XPath is broken:
webDriver.findElement(By.xpath("//*[#id='main_files_view']/ol/li[6]/ul/li[4]")).click();
Whenever a new item is added in the location, the index with value "6" can change to "7" (new position of the file) and the XPath generated is now slightly different:
webDriver.findElement(By.xpath("//*[#id='main_files_view']/ol/li[7]/ul/li[4]")).click();
How can I change that XPath and makes it robust so that no matter the number of items added/removed, the XPath will not break?
Below is the section of the HTML which is related to the XPath provided by FirePath.
When the XPath is provided, the last class is also highlighted.
<li class="storage_item document file_object even ui-draggable" data-thumb-translation="Translated" data-possible-actions="Rename Delete Share Move View" data-file-size="0 bytes" data-item-type="file" data-display-name="solids_A" data-name="solids_A.raas" data-id="bd48453c752043d98afb237b86ee88a3">
<a class="file_name" href="#/Item/Details?id=bd48453c752043d98afb237b86ee88a3&itemtype=File&tab=Default">
<img class="file_list_icon" width="16" height="16" src="https://api-staging.autodesk.com/content/gateway/2013.1.307595.626/z/Content/images/fileIcons/small/raas.png"/>
<div class="name_container">
<ul class="tools">
<li class="preview_trigger"/>
<li class="comment_balloon none has_tooltip" data-tooltip-contents="#comment_balloon_tooltip" data-comments="0">
<li class="categorize action has_tooltip" data-tooltip="Categories"/>
<li class="document_tools has_tooltip" data-tooltip="Actions"/>
</ul>
</li>
I am using Selenium 2.0, on Eclipse IDE.
If the data-name is unique, then you have
//*[#id='main_files_view']/ol/li[#data-name='solids_A.raas']/ul/li[contains(#class, 'document_tools')]
Css Selector is even better than XPath in this case:
#main_files_view li[data-name='solids_A.raas'] .document_tools
Try this:
By.XPath("//*[#id='main_files_view']/ol/li/ul/li[4]")
You do not have to define every index in an xpath and often if it's just one that change, removing that index will work.
In general you should avoid xpaths in your tests. Css selectors are faster (especially in IE) and more readable. If data-name is unique then this should work:
webDriver.findElement(By.cssSelector("#main_files_view li[data-name='solids_A.raas'] li.document_tools"));
If you really need an xpath the one provided by user1177636 will also do the job.
I have a webpage looks something like this:
<html>
...
<div id="menu">
...
<ul id="listOfItems">
<!--- repeated block start -->
<li id="item" class="itemClass">
...
<span class="spanClass"><span class="title">title</span></span>
...
</li>
<!-- repeated block end-->
<li id="item" class="itemClass">
...
<span class="spanClass"><span class="title">title something</span></span>
...
</li>
<li id="item" class="itemClass">
...
<span class="spanClass"><span class="title">title other thing</span></span>
...
</li>
</ul>
...
</div>
...
</html>
I would like to know what is the xpath of the titles ("title", "title something", "title other thing"). The point is that the order of the <li> elements are not specified. It could be different after every page loading. Is there any method how to discover a certain structure of the page with xpath? I have an notion about how to solve this issue, but before I'm going to write iterations with C# to discover the page I ask you.
Thanks in advance!
First of all, id's should be unique, so your portrayed webpage would not work well when it comes to testing.
I did however test, and got some XPath locators to work for selecting specific titles (although I recommend you fix your webpage instead of actually using this):
//li[#id='item']/span/span
//li[#id='item'][1]/span/span
//li[#id='item'][3]/span/span
If you're after all three titles, you could try Dimitre Novatchev's suggestion:
//span[#class='title']
This should get all titles on the page.
I would like to say one thing however, if you're getting into Selenium, I recommend you download the Selenium IDE extension for Firefox. It's a great tool for beginners. It helps you both to make your Selenium tests by recording your clicks on a website, and it also helps you auto-generate and test your XPath locators and other locators.
And again: I urge you to not make a website with duplicate id elements :-)
Does Selenium support XPath expressions like:
//span[#class='title']
If yes, than use the above XPath expression. It selects every span element in the XML document, whose class attribute has string value of "title".
I recommend to use a tool like the XPath Visualizer to play with different XPath expressions and see the selected nodes highlighted in the source XML document.
When I do this...
<li>
<a href="#">
<img src="#" width="#" height="#" alt="#" />
<ol class="#">
<li>#</li>
<li>#</li>
<li>#</li>
</ol>
</a>
</li>
It renders it in Firefox like this...
<li>
<a href="#">
<img src="#" width="#" height="#" alt="#" />
</a>
<ol class="#">
<li>a href="#">#</a></li>
<li>a href="#">#</a></li>
<li>a href="#">#</a></li>
</ol>
</li>
Seems to render properly in Webkit. Any ideas?
Although HTML5 now permits <a> elements to contain block-level elements (e.g. ol), Firefox's parser traditionally didn't accept that, instead converting them into a sequence of separate <a> inside the block level elements such that they only surrounded inline level elements, which is what you see.
Because Firefox was the only one of the major browser makes that did that, the Mozilla people accepted the HTML5 change, agreed to alter their parser to permit the <a> element to wrap block content. (It's just one of many parser changes for HTML5, although it seems to be possibly the most prominant one)
That change has happened in Firefox 4, so you won't see the problem there, but Firefox 3.x still uses the old behaviour.
Workarounds, include using a <div> with an onclick attribute instead of the <a>, and using JavaScript to wrap the block in an <a> element, but there's no non-JS solution. Given that (a) the page should still be usable as is, and (b) that Firefox 3.x should die out in the not too distant future, one reasonable option is just to accept the quirky Firefox 3 behaviour for now.
The <a> tag has a default style of display:inline; which makes it unsuitable for containing block level elements.
However, you can get around the problem by changing the display property of the <a> element to either block or inline-block, depending on how you want it to display.
(I note that you're using HTML5, so you'll be fine. Be aware that in xhtml, it is simply not allowed to enclose block-level elements inside an <a> tag. This won't affect you in this case, but it's worth knowing in case you ever have to work with code with an xhtml doctype)