I am very new to webdriver, and got stuck on below.
I want to click highlighted href (Volunteering), and i am not able to do it.
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse full-upper-navbar">
<div class="tabs primary-tabs col-sm-11">
<ul class="nav navbar-nav navigation">
<li class="selected active home icon">
<li>
<li>
<li>
**Volunteering**
</li>
I have used below things -
driver.findElement(By.xpath("..//*[#id='bs-example-navbar-collapse-1']/div[1]/ul/li[4]/a")).click();
driver.findElement(By.xpath("//a[#href='/uservol/application/overview']")).click();
driver.findElement(By.linkText("Volunteering")).click();
nothing is working out for me, any help will be greatly appreciated.
It might be timing issue. Try using explicit wait to wait for the element to be visible
WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(".//*[#id='bs-example-navbar-collapse-1']/div[1]/ul/li[4]/a")));
element.click();
Related
I have a really weird problem. I am using $interpolateProvider in my Angular app as I am passing some variables with Node which is "{{ }}" by default so I have set Angular's symbols to be: "{[ ]}".
See below:
mainApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[');
$interpolateProvider.endSymbol(']}');
});
Now, this works everywhere except in one part of my app. See the HTML below:
<ul class="nav navbar-nav navbar-right" ng-controller="navBarController">
<li>Profile</li>
<li>
<notification-icon count="{[notificationsCount]}"><i class="fa fa-envelope-o fa-2x"></i></notification-icon>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Settings<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
Profile Settings
</li>
<li class="divider"></li>
<li>
Logout
</li>
</ul>
</li>
{[notificationsCount]}
</ul>
The bit that doesn't work is:
count="{[notificationsCount]}"
The bit that does work is right at the end:
{[notificationsCount]}
On the browser, I get this error from Angular and when I inspect the element, it is in plain text like: {[notificationsCount]} and doesn't get converted to the number which is does on the 2nd last line of the HTML code.
I suspect this might be due to the 3rd party module I am using, which is angular-notification-icons but I can't be sure.
I have no idea how to proceed with this. Any input will help.
Thanks a lot!
You need write without {[]} in place where the code doesn't work
<notification-icon count="notificationsCount"><i class="fa fa-envelope-o fa-2x"></i></notification-icon>
look carefully at the examples from https://github.com/jacob-meacham/angular-notification-icons , notificationsCountused directly such as directive attributes.
I want to create a set of pills with all the states with their number of electors and I want the pill that is clicked becomes active. So, my unsuccesful attempt for this matter is as follows:
<ul class="nav nav-pills">
<li ng-class="{ active:tab.isSet(x.name) }" ng-repeat="x in states">
<a href ng-click="tab.setTab(x.name)">{{x.name}} <span class="badge">{{x.elector}}</span></a>
</li>
</ul>
And, inside my controller I have this piece of code for that matter:
$scope.tab = "Alabama";
$scope.isSet = function(checkTab) {
return $scope.tab === checkTab;
};
$scope.setTab = function(activeTab) {
$scope.tab = activeTab;
};
By the way, at first I tried to make the pills active by comparing their indices but that didn't help. It would be even better if you can help me with a way to do this using the indices. I apologize if there is already a posted solution to this but I couldn't find it.
Thanks in advance!
<ul class="nav nav-pills">
<li ng-class="{ 'active':tab.isSet(x.name) }" ng-repeat="x in states">
<a href ng-click="tab.setTab(x.name)">{{x.name}} <span class="badge">{{x.elector}}</span></a>
</li>
</ul>
Note the quotes around active
I found it, I should've deleted the "tab"s in "tab.isset(...)".
Is there a way to have content above slicknav menu when responsive? Im trying to move it from being at the top of the page, im trying to get:
====CONTACT DETAILS====
====LOGO====
====SLICKNAV====
Not sure what you have already tried - but you would normally use the prependTo property to place where the menu goes.
e.g.
<div id="d1">Before</div>
<div id="d2">some other content</div>
<div id="d3">third row of content</div>
<div>
<ul style="display:none">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
<div id="d4">4th row of content</div>
and script
$('ul').slicknav({
prependTo:'#d3'
});
Please see this JSFIDDLE for an example of the above
Mouse hover menu’s does not work. Please see further details below:-
When I click start --> I get the submenus.
When I click customer submenu--> element not clickable
a. I should be able to go to “Search for Customers” or “Create Top level Customer”
<div class="TidyMenu Horizontal" id="mainNav">
<ul class="level1">
<li><a class="popout level1" href="#" onclick="__doPostBack('ctl00$mainNav','Start')">Start</a>
<ul class="level2">
<li><a class="popout level2" href="#" onclick="__doPostBack('ctl00$mainNav','Start\\Customers')">Customers</a>
<ul class="level3">
<li><a title="Search for Customers" class="level3" href="#" onclick="__doPostBack('ctl00$mainNav','Start\\Customers\\3')">Search for Customers</a></li>
<li><a title="Create Top level Customer" class="level3" href="#" onclick="__doPostBack('ctl00$mainNav','Start\\Customers\\8')">Create Top level Customer</a></li>
</ul>
</li>
</ul>
</li>
<div>
Use Actions utility to first mouse hover on Start and then click on the desired sub menu. Sample code should look like below:
using OpenQA.Selenium;
using OpenQA.Selenium.Interactions;
using OpenQA.Selenium.Interactions.Internal;
using OpenQA.Selenium.Support.UI;
//create Actions object
Actions builder = new Actions(driver);
IWebElement menuHoverLink = driver.FindElement(By.XPath("//a[text()='Start']"));
builder.MoveToElement(menuHoverLink);
IWebElement subLink = driver.FindElement(By.LinkText("Customers"));
builder.MoveToElement(subLink);
builder.Click();
builder.Build().Perform();
Lemme know if this helps!
We can use the keys to move over and click, instead of trying with the mouse coordinates this is with the keyboard.
Please try this
Mousehover:
String hover=Keys.chord(Keys.DOWN);
driver.findElement(By.linkText("the text which has to be clicked")).sendKeys(hover);
Click:
String clickdown=Keys.chord(Keys.ENTER);
driver.findElement(By.linkText("sub menu which has to be clicked")).sendKeys(clickdown);
For my angular application , i have created left nav menu. On click of link ,corresponding page is opening. My problem is I want to change active link color to blue whereas other links are in white color. When I click another link from menu ,that link should be in blue and remaining are in white.
I do not know how to do this in angular. With Jquery , its easy for me. But angular makes me nervous.
My left nav is
<div class="leftNavList">
<div class="leftNavManageHeading"><span "mSans300 font14">Manage</span></div>
<ul class="nav manageNav">
<li ng-click="isCollapsed2 = !isCollapsed2">
<div class="listOuterWrapper">
<div class="listInnerWraper">
<span class="mSans300">Usage</span>
</div>
</div>
</li>
<li ng-click="isCollapsed3 = !isCollapsed3">
<div class="listOuterWrapper">
<span class="mSans300">Payment</span>
</div>
<div class="listInnerWraper">
<div collapse="!isCollapsed3">
<ul class="paymentNav mSans30 font14">
<li>PaymentMethod</li>
<li>PaymentHistory</li>
</ul>
</div>
</div>
</li>
<li ng-click="isCollapsed4 = !isCollapsed4">
<div class="listOuterWrapper">
<div class="listInnerWraper">
<span class="mSans300">Account</span>
</div>
</div>
</li>
</ul>
</div>
Step 1: In ng-init declare a variable.
ng-init="activelink=0"
Step 2: Now in ng-cick of link change the value of activelink.
<li><a href="" ng-click="activelink=1"</a></li>
<li><a href="" ng-click="activelink=2"</a></li>
Step 3: Declare a class linkcolor that defines the color of the active link.
Step 4: Now use ng-class="{ 'linkcolor' : activelink==1 }" expression for both the link.
Step 5: The links will change to
<li><a href="" ng-click="activelink=1" ng-class="{ 'linkcolor' : activelink==1 }" </a></li>
<li><a href="" ng-click="activelink=2" ng-class="{ 'linkcolor' : activelink==2 }"</a></li>
The expression activelink==1 will return true or false depending on the value of activelink.
I would recommend looking into ui-router , it has active states (these are the pages of your app) which do all these css and state changing from the view rather than having the logic in your controller and there are many powerful tools to make your app function better in less code..
In your nav:
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="route1">route1</a>
</li>
</ul>
And thats it! Your currently active state/ view will apply the ui-sref-active="active" class to that li element. where "active" is the class name which is applied.