In my Rails 3.2.16 app with a Bootstrap 2.3 navigation list, I want to write a test that confirms that a specific item is active and that it has the right icon. I'm using rspec 2.14.1 and capybara 2.1.0.
I assume the way to do this is with a capybara has_xpath test, but the classes that I need to check ("active" and "fa-folder-open") as well as the actual text ("Inbox") are at different levels of the HTML hierarchy.
Given this HTML:
<ul class="nav nav-list" role="navigation">
<li class="active">
<a href="/messages/my/inbox">
<i class="fa fa-folder-open fa-fw">
</i> Inbox</a>
</li>
<li class="">
<a href="/messages/my/draft">
<i class="fa fa-folder fa-fw">
</i> Draft</a>
</li>
</ul>
is there an XPath that will confirm that the link with text "Inbox" is "active" and has the "fa-folder-open" icon?
EDIT
I copied the example HTML above the XPath tester, where the Format button not only did some pretty formatting, it removed the closing </i> tags. The raw HTML isn't as pretty:
<ul class="nav nav-list" role="navigation">
<li class="active">
<a href="/messages/my/inbox">
<i class="fa fa-folder-open fa-fw"></i> Inbox
</a> </li>
<li class="">
<a href="/messages/my/draft">
<i class="fa fa-folder fa-fw"></i> Draft
</a> </li>
</ul>
Try with:
expect(page).to have_xpath("//li[contains(#class, 'active')//i[contains(text()='Inbox' and contains(#class, 'fa-folder-open')]")
Nicolas' answer was helpful in suggesting that I use contains.
This SO answer helped me see that I can nest the brackets to find nested nodes.
With some trial and error at www.xpathtester.com, I came up with this XPath:
//li[contains(#class,'active') and a[text()=' Inbox' and i[contains(#class,'fa-folder-open')]]]
EDIT
My XPath above wasn't working on the raw HTML (see edited question). The XPath wasn't finding the " Inbox" text, probably due to the line breaks before the <\a> tags. With thanks to this answer's example of normalize-space() without the text() argument, this XPath works:
//li[contains(#class,'active') and a[normalize-space()='Inbox' and i[contains(#class,'fa-folder-open')]]]
Note that it must look for 'Inbox', not ' Inbox'. normalize-space() strips leading and trailing whitespace (including the line breaks that were causing problems), so the leading space must be removed from the text that it is looking for.
Related
I have a context path /userlist and using server side pagination which results in URI like this: http://localhost:8080/userlist/?pageSize=10&page=2.
I am trying to append class to this tag using Thymeleaf dynamically.
<li class="nav-item">
<a class="nav-link" th:with="urls=${new String[]{'/userlist','/userlist/*'}}"
th:classappend="${#arrays.contains(urls, #httpServletRequest.getRequestURI()) ? 'active' : ''}" href="/userlist"
th:href="#{/userlist}">
<span class="nav-icon">
<i class="fas fa-users"></i>
</span>
<span class="nav-link-text"> Manage Users</span>
</a>
</li>
Above works perfectly fine for userlist only. But not for http://localhost:8080/userlist/?pageSize=10&page=2.
Question: What I am missing here?
I wrote the following code to populate a menu item:
<li class="dropdown">
Wallets <span class="caret"></span>
<ul class="dropdown-menu">
{{#if: !wallets}}
<li><a><i class="fa fa-spinner fa-pulse"></i> Loading...</a></li>
{{/if}}
{{#foreach: wallets}}
<li>
{{linkText}}
</li>
{{/foreach}}
<li role="separator" class="divider"></li>
<li><i class="fa fa-fw fa-edit"></i> Add new</li>
</ul>
</li>
I'm using knockout.punches as I'm more into curly braces than data-binding every element. wallets is an observable array loaded and kept up-to-date by SignalR.
Ok so far, but this is the way the code is rendered before the wallets observable is defined:
I'm new to knockout so maybe there's some clue I don't know about, but in general I've found little information on punches extension. Where am I wrong?
I use Html.MenuItem helper in asp .net mvc. I want to use html inside link instead of text only. The helper below:
#Html.MenuItem("Announcement", "Index", "Announcement")
generates in html =>
<li> Announcement </li>
but I want to generate an html like =>
<li>
<a href="/Announcement">
<i class="icon-announcement"></i>
<span>Announcement</span>
</a>
</li>
How can I do that?
You can't do that immediately, because the HTML gets stripped if you pass it in as the parameter.
I suggest you do something like the following:
<li>
<a href='#Url.Action("Announcement", "Index")'>
<i class="icon-announcement"></i>
<span>Announcement</span>
</a>
</li>
I found this html for add_filter menu:
<li class="dropdown" style="float:right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Add filter
<b class="caret"></b>
</a>
<ul class="dropdown-menu" id="filters" style="left:auto; right:0;">
<li>
<a data-field-label="Title" data-field-name="title" data-field-options="" data-field-type="string" data-field-value="" href="#">Title</a>
</li>
<li>
<a data-field-label="Book type" data-field-name="book_type" data-field-options="" data-field-type="string" data-field-value="" href="#">Book type</a>
</li>
<li>
<a data-field-label="Category" data-field-name="category" data-field-options="" data-field-type="belongs_to_association" data-field-value="" href="#">Category</a>
</li>
<li>
<a data-field-label="Detail" data-field-name="detail" data-field-options="" data-field-type="text" data-field-value="" href="#">Detail</a>
</li>
</ul>
</li>
When I click on Add Filter the console logs:
Uncaught TypeError: Object [object Object] has no method 'tooltip'
When I create a new empty project and install rails_admin gem, it works.
My project is using bootstrap for css and js.
Please give me some advice for this issue.
Oh, Sorry for noise, I has found out my problem
The gem twister-bootstrap-rails isn't compatible with rails_admin. Just remove this line in GEMFILE, then rake assets:clean, and finally run bundle again, the javascript worked.
My answer is found at Github
I use a lot of anchor links in my webpage because its only one page that scrolls down by clicking the menu.
Also I made al my pages in sections.
Now I'm busy with making my sitemap.xml for google but i'm not sure if i need to put in all the sections/anchor-links.
my menu is like:
<nav id="nav" role="navigation">
<ul class="clearfix">
<li>
<a class="selected firstnav" href="#home" tabindex="-1">
Home
</a>
</li>
<li>
<a href="#watdoenwij" tabindex="-1">
Wat doen wij
</a>
</li>
<li>
<a href="#portfolio" tabindex="-1">
Portfolio
</a>
</li>
<li>
<a href="#werkwijze" tabindex="-1">
Werkwijze
</a>
</li>
<li>
<a href="#uwwebsite" tabindex="-1">
De Website
</a>
</li>
<li>
<a class="lastnav" href="#contact" tabindex="-1">
Offerte & Contact
</a>
</li>
</ul>
</nav>
as you can see I only use links to #contact/#portfolio etc etc.
Do i have to put all the links in my sitemap?
http://www.domain.com/index.php#contact
http://www.domain.com/index.php#uwwebsite
http://www.domain.com/index.php#portfolio
Doesn't seem right to me?
Maybe google is seeing it as double content...
And if I have to add it to my sitemap what link do i have to use?
http://www.domain.com/index.php#contact
http://www.domain.com/#contact
No, you shouldn't include anchor links. They refer to the same page and the sitemap specifies how often that content changes, but it's all one page.