HTML code :
<ul class="dropdown-menu" role="menu">
<li>
<a href="#/profile">
<i class="fa fa-user"></i> My Profile </a>
</li>
<li>
<a href="#/source">
<i class="fa fa-user"></i> Source </a>
</li>
<li>
<a href="/user/logout">
<i class="fa fa-user"></i> Logout </a>
</li>
</ul>
My code :
element(by.cssContainingText('i.fa.fa-user', ' My Profile ')).click();
Problem : I am trying to click on element using class and cssContaingText but am not able to it. Please help me.
please help me
You may have solved it via the by.cssContainingText also. The problem with your current approach is that you are checking the text inside the i element, which is in your case empty:
<i class="fa fa-user"></i> My Profile
The text to check is located inside the a element:
element(by.cssContainingText('ul.dropdown-menu > li > a', 'My Profile')).click();
Alternatively, you may solve it without checking the text:
element(by.css("a[href*=profile]")).click();
Though, I would agree that "by partial link text" option is a better choice in this case.
I got the answer : I tried this code, it worked nicely.
element(by.partialLinkText('My Profile')).click();
Related
First of all I am a developer, not a designer.
I am building Codeigniter project using Adminlte template. Now I face a problem. I will try to explain it using screenshots.
Screenshot 01 : This is the menu
Screenshot 02 : I am going to click User List Item
Question : When I click "User List" I am expecting that page menu also same as screenshot 02.(I mean user mangment menu should be open / collapse auto automatically). But I am getting interface like screenshot 1. How do I solve it?
Note : Please asked if you need some additional codes of my site because I don't know what codes should I put here.
<ul class="sidebar-menu">
<li><i class="fa fa-book"></i> <span>Home</span></li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>User Management</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> User List</li>
<li><i class="fa fa-circle-o"></i> Add New User</li>
</ul>
</li>
<li><i class="fa fa-book"></i> <span>Messages</span></li>
<li><i class="fa fa-book"></i> <span>Logout</span></li>
</ul>
Try adding class "active" to the list item which needs to be stayed open.
<li class="active">
I think that you have to add active class to li tag to work.
I have multiple drop down menus on the single page. I am using Materializecss.com. The Error is, I am getting values of the first drop down in every dropdown menu in the whole page. Here is the code.
#if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser'><i class="material-icons left">expand_more</i> More</a>
<ul id="dropdownUser" class="dropdown-content">
<li><i class="material-icons left">insert_chart</i>BAN</li>
<li><i class="material-icons left">delete</i>Delete</li>
</ul>
#else
The Problem is, For example, If I have the list of 5 users on the same page, I am getting values of the first user in all the dropdown menus. I don't know what's wrong.
I tried to change class to ID but not working. I am a bit new to Jquery.
UPDATE: Okay, I found the error. Here is the new code that works! Thanks for Help StackOverflow!
#if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser-{{ $user->id }}'><i class="material-icons left">expand_more</i> More</a>
<ul id="dropdownUser-{{ $user->id }}" class="dropdown-content">
<li><i class="material-icons left">insert_chart</i>BAN</li>
<li><i class="material-icons left">delete</i>Delete</li>
</ul>
#else
I Updated the working code instead of deleting the question because there might be many developers looking for the same solution!
I have faced same issue working with materialize css.
I used
$('#tag_id').material_select();
while document is getting ready.
I am trying to figure out how i can change links on a _layout.cshtml based on the requested view.
When I am on the Home/Index I want the href to be '#Unhealthy' but when im on any other page, I want it to redirect back to the home page '/Home/Index/#Unhealthy'
When on other page
<li>
<i class="fa fa-warning warning"></i>
</li>
When on Home/Index
<li>
<i class="fa fa-warning warning"></i>
</li>
How can I determine the requested view to swap this value?
*Note: I suppose if I cant do it at the server I can always change the values with javascript/jquery
use razor if your using MVC note i did this answer because you tagged MVC. If you are doing a MVC application this is by far the best way it can be done, no need for any javascript.
#if (window.location.pathname == "/"){
<li>
<i class="fa fa-warning warning"></i>
</li>
}
else{
<li>
<i class="fa fa-warning warning"></i>
</li>
}
if you did want to do it the jQuery way this would work:
Jquery:
$( document ).ready(function() {
if (window.location.pathname == "/"){
$("#Link").prop("href", "#Unhealthy")
}
else {
$("#Link").prop("href", "/Home/Index/#Unhealthy")
}
});
html:
<li>
<a id="Link" href="#"><i class="fa fa-warning warning"></i></a>
</li>
#{
var controller = ViewContext.RouteData.Values["controller"].ToString().ToLower();
var action = ViewContext.RouteData.Values["action"].ToString().ToLower();
}
<li><i class="fa fa-warning warning"></i></li>
The answer by Josh Stevens should work using MVC razor code but you could use same code on each page using #Html.ActionLink overloads
A quick search finds this link that is old syntax but concept correct
Without Testing try
#Html.ActionLink("Link Text", "Index", "Home", null, null, "Unhealthy", null, null)
I have the following code:
$.getJSON('json/sites.json', function(data) {
$.each(data, function(index,element){
$('#menu').append('\
<li class="treeview">\
<a href="#">\
<i class="fa fa-dashboard"></i> <span>Dashboard 2</span> <i class="fa fa-angle-left pull-right"></i>\
</a>\
<ul class="treeview-menu">\
<li><i class="fa fa-circle-o"></i> Dashboard v1</li>\
<li class="active"><i class="fa fa-circle-o"></i> Dashboard v2</li>\
</ul>\
</li>\
');
});
});
Although it does what it has to do, the output of the HTML is messed up. Something like:
<div id="menu" class="sidebar-menu"> <li class="treeview">
<a href="#"> <i class="fa fa-dashboard"></i>
<span>Europe</span> <i class="fa fa-angle-left pull-right"></i>
</a> <ul class="treeview-menu"> <li><i class="fa fa-circle-o"></i> Germany</li>
<li class=""><a href="index2.html"><i class="fa fa-circle-o"></i>
Greece</a></li> </ul> </li> <li
class="treeview"> <a href="#"> <i
class="fa fa-dashboard"></i> <span>Dashboard 2</span>
...
I know that it is a minor "problem", but the JSON has about 200 objects and it makes things more difficult to debug for someone other than me. Is there any way to append html code to element object keeping the desired structure?
Aside from the fact that you have no dynamic data from the JSON object in that HTML chunk, which makes me wonder why would you even want to inject it with JavaScript in the first place, it's worth noting that browser-generated output is only debugabble using something like Chrome Developer Tools which makes the formatting completely irrelevant, as the code can be easily viewed using the DOM browser.
On the other hand, if you must format that code properly, I'd suggest using a templating engine like mustache.js or handlebars.js.
Let me begin by saying that this problem is specific to TabPanel in ExtJS library.
I can successfuly simulate clicks on other ExtJS components using jQuery("#id").click() function.
But I cannot simulate user click on a given tab of TabPanel in ExtJS using jQuery. I see that the dom structure behind tabs looks like this:
<ul class="x-tab-strip x-tab-strip-top" id="ext-gen15">
<li id="ext-comp-1009__ext-comp-1001" class="x-tab-strip-active">
<a class="x-tab-strip-close" id="ext-gen18"></a>
<a href="#" class="x-tab-right" id="ext-gen19">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text">Submarine</span>
</span>
</em>
</a>
</li>
<li id="ext-comp-1009__ext-comp-1003" class="">
<a class="x-tab-strip-close" id="ext-gen20"></a>
<a href="#" class="x-tab-right" id="ext-gen21">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text">SpaceShuttle</span>
</span>
</em>
</a>
</li>
<li class="x-tab-edge" id="ext-gen16">
<span class="x-tab-strip-text"> </span>
</li>
<div class="x-clear" id="ext-gen17"></div>
</ul>
I've tried various methods of selecting the first tab using jQuery:
jQuery("#ext-comp-1009__ext-comp-1001").click();
jQuery("#ext-gen18").click();
jQuery("#ext-gen19").click();
but none of it seem to work.
If you take a look at the source (search for onStripMouseDown in particular) you'll see that it's expecting an Ext.EventObject. It'll fail straight away because e.button isn't 0.
Presumably you could patch it with your own onStripMouseDown.