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);
Related
I have angularJS application.There are two components left nav bar and right side content pane.When I go to the end of the right side content pane with tab(keyboard) it gives the focus to the browser URL bar.But I need to give the tab(keyboard) focus to the left nav bar or just need to stop focus getting in to url.
..below is the end of the content pane
<div>
<ul>
<li class="seperater">
test navigate
</li>
</ul>
</div>
What I tried is when focus came to the final element on the content page ,call a method 'navigateToTop' and there I set focus to left nav.
below is the method
this.navigateToTop = function () {
console.log("in navigateToTop");
$('#left-nav').focus();
};
But it is not working and still focusing to the URL.Pls help..
After spending some time I found the solution by doing some changes to my html code of the right content pane.
<div>
<ul>
<li class="seperater">
<a href="" ng-focus="isFocused = true" ng-blur="isFocused = false">
test navigate </a>
</li>
</ul>
<div ng-if="navigateToTop(isFocused);"></div>
</div>
I am developing a test suite for my AngularJS app using Protractor as my testing framework.
The app's menu is displayed at a fixed location across all pages of the site- when the user hovers the cursor over any of the buttons on the menu, the cursor changes to a pointer, to indicate that that button can be clicked. Each button in the menu represents a particular page of the app- if there are sub-pages belonging to a page when the user hovers the cursor over the menu button for that page, a sub-menu is displayed, with text-buttons for each of the sub-pages.
I am currently working on a test that will test the functionality of the menu- hovering the cursor over one of the buttons on the menu, checking that the sub-menu is displayed, and then hidden again when the cursor is no longer hovering over that menu button, checking that clicking any of the menu buttons/ sub-menu buttons take you to the right page, etc.
The HTML for the menu is written as follows:
<ul id="nav"
class="nav"
data-slim-scroll
data-collapse-nav
data-highlight-active>
<li data-ng-mouseenter="setMenuTop($event)" ng-show="menu.pages.length > 0 || menu.upages.length > 0 || canCreatePage">
<i class="ti-layers"></i><span data-i18n="Pages"></span>
<ul class="text-capitalize">
<li ng-repeat="page in menu.pages"><i class="ti-angle-right"></i><span data-i18n="{{page.title}}"></span></li>
<li ng-repeat="upage in menu.upages">
<div class="nav-menu-divider" data-ng-if="$index === 0"></div>
<a href="#/{{upage.location}}" target="_self">
<i class="ti-angle-right"></i><span data-i18n="{{upage.title}}"></span>
</a>
</li>
<li data-ng-show="canCreatePage">
<div class="nav-menu-divider"></div>
<a href="#/pages/create" target="_self">
<i class="ti-angle-right"></i><span data-i18n="Create Page"></span>
</a>
</li>
</ul>
</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li data-ng-mouseenter="setMenuTop($event)">
<i class="ti-settings"></i><span data-i18n="Config"></span>
<ul>
<li ng-repeat="page in menu.config"><i class="ti-angle-right"></i><span data-i18n="{{page.title}}"></span></li>
<li ng-show="platform._id"><a ng-href="#/config/platform/{{platform._id}}" target="_self"><i class="ti-angle-right"></i><span data-i18n="Platform"></span></a></li>
<li ng-show="system._id"><a ng-href="#/config/system/{{system._id}}" target="_self"><i class="ti-angle-right"></i><span data-i18n="System"></span></a></li>
<li><i class="ti-angle-right"></i><span data-i18n="Users"></span></li>
<li><i class="ti-angle-right"></i><span data-i18n="Backup / Restore"></span></li>
<li ng-show="systemActions.dateTime"><i class="ti-angle-right"></i><span data-i18n="Date / Time"></span></li>
</ul>
</li>
<li class="nav-footer">
<span>{{currentTime.localTDZFormat}}</span>
</li>
</ul>
As shown, there are two menu items which have 'sub-menus' associated with them.
I want to test that when the user hovers their cursor over one of the menu-items that have an associated sub-menu, the sub-menu is displayed correctly, and when the cursor leaves the menu-item, the sub-menu is no longer displayed: I have tried to do this with the following test:
it('should display the Pages menu', function() {
browser.waitForAngularEnabled(false);
browser.actions().mouseMove(pagesMenuBtn).perform();
expect(pageVarBrowserBtn.isDisplayed()).toBeTruthy();
browser.actions().mouseMove(userCircle).perform();
expect(pageVarBrowserBtn.isDisplayed()).toBeFalsy();
browser.waitForAngularEnabled(true);
});
The variables used in this test are defined with:
var pagesMenuBtn = element(by.id('pagesMenuBtn'));
var pageVarBrowserBtn = element.all(by.id('menu.pages')).get(0);
var userCircle = element(by.id('icon-user-circle'));
The pageVarBrowserBtn is the first menu-item in the sub-menu displayed when the user hovers their cursor over the pagesMenuBtn.
Currently, when I run the test, the browser opens, navigates to the root page of my app, and hovers the cursor over the pagesMenuBtn element, so that the sub-menu is displayed (I can see it displayed in the browser window that was opened up by the test).
But, I then get an error in the console that says:
Failed: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator By(CSS selector, *[id="menu.pages"])
I don't understand why I'm getting this error...? How can I get a single element from the sub-menu that's being displayed, in order to check that it is the correct item and that clicking it takes the user to the correct location? I can't specify the exact element's ID because it is being created by the ng-repeat, so that's why I'm trying to get it by its position/ array index - 0.
First of all, There may be two reasons why you are getting the above error.
1. Either the locator you are using is wrong.
2. Your script is not waiting until the element is displayed in DOM.
In your case, you have mentioned a wrong locator as element.all(by.id('menu.pages')) because there is no element with id menu.pages is present in your HTML.
Instead of using element.all(by.id('menu.pages')), change it to element.all(by.repeater('page in menu.pages')).get(0) to get the 1st element from the menu list. Also kindly refer Element locators in Protractor to find the list of all available locating strategies that is supported by protractor.
Hope this might help solve your problem!
Did you try using element.all(locator).first() to get the first element form the selector
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();
I want to add isActive class to an item menu when user click on this item, and remove isActive class from all others items.
I am trying to compare the id, this is the angularJS code:
$rootScope.isActive = function(idVal, event){
return idVal === event.target.id;
}
This is a part from Menu Html code:
<ul class="sidebar-nav">
<li>
<a ui-sref="" id='101' ng-class="{active: isActive($event, 101)}">
<span class='glyphicon glyphicon-ban-circle glyph-sidebar'></span>
Rules
</a>
<ul class='dropdown sidebar-nav-dropdown' >
<li>
Transaction Mapping
</li>
<li>
File Setup
</li>
<li>
Code Setup
</li>
</ul>
</li>
<li>
<a href="#" id='102' ng-class="{active: isActive($event, 102)}">
<span class='glyphicon glyphicon-ban-circle glyph-sidebar'></span>
Administrative Rules
</a>
<ul class='dropdown sidebar-nav-dropdown'>
<li>
<a ui-sref="admin.mapping-rules">Transaction Mapping</a>
</li>
<li>
<a ui-sref="admin.mapping-rules">File Setup</a>
</li>
<li>
<a ui-sref="admin.mapping-rules">Code Setup</a>
</li>
</ul>
</li>
</ul>
Thanks,
First of all, you shouldn't use the root scope. You should use the scope of the controller associated to that view.
Second, your code doesn't make much sense. $event can be used as a parameter of a function called... to react to an event:
ng-click="doSomething($event)"
But with ng-class, there is no $event.
All you need to have in your scope is the ID (or name, or whatever identifies a menu item) of the selected menu item:
$scope.selectedMenuItem = null;
When an item is clicked, you need to change the selected menu item:
ng-click="selectMenuItem(101)"
$scope.selectMenuItem(item) {
$scope.selectedMenuItem = item;
}
Then to associated a css class with the selected menu item, you simply need
ng-class="{active: selectedMenuItem === 101}"
That said, if all your links navigate to a given router state, you don't even need that selectedMenuItem. All you need is to add the active class if the current router state is the one the that the link allows navigating to (assuming $state is on your scope):
ng-class="{active: $state.includes('admin.mapping-rules')}
i'm using Java/Selenium-webdriver/Eclipse
i want to click on an element which is in a menu of a webapp.
So i have to click on Menu and it shows a list and then i clik on an item.
i try to select the item "Chaine" with linkText and sometimes it's working
When i select with xpath it's working but i think it's not safe.
So i want to select by id or class.
How can i select "Chaine" by Id or class.
Or what is the best way to select this item.
THank you
So the html code is here:
<ul class="list">
<li class="component-panel-item" data-component="bar-graph">
<a>
Bar graph
</a>
</li>
<li class="component-panel-item" data-component="line-graph-ch">
<a>
Chaine
</a>
</li>
<li class="component-panel-item" data-component="line-graph-en">
<a>
En Graph
</a>
</li>
You can try out below code.
IWebElement ul = ie.FindElement(By.ClassName("list"));
ul.Click();
foreach (IWebElement li in ul.FindElements(By.ClassName("component-panel-item")))
{
if (li.Text.Equals("Chaine"))
{
li.Click();
}
}