I am running WebdriverJS on nodeJS to test the UI of a website. I want select and click on a submenu item in a drop down menubar. The submenu items are hidden by CSS. The menubar looks like this:
<ul class="dropdown" id="mainNavList">
<li class="active">
<span>Home</span>
</li>
<li class="">
<span>My Products</span>
<ul style="visibility: hidden;">
<li class="">
Product A
</li>
<li class="">
Product B
</li>
</ul>
</li>
<li>...</li>
</ul>
If I try to run this approach:
mydriver.executeScript("return $(\"a:contains('My Products')\").mouseover();").then(function(){
mydriver.findElement(mywebdriver.By.xpath("//a[contains(text(), 'Product B')]")).click();
});
the drop down slides down but hides directly after showing it. On the console I get an error from Webdriver:
ElementNotVisibleError: Element must be displayed to click (WARNING: The server
did not provide any stacktrace information)
Any ideas?
This is new to me as well but I would chain function calls of Click on the drop down then click the drop down item you want.
try this:
var menu = mydriver.findElement(mywebdriver.By.css('[href="/MyProducts"]'));
menu.click();
menu.findElement(mywebdriver.By.css('[href="/jkjkjk"]')).click();
As James said it's about chaining. In the snippet above the chaining is implicit (both findElement and click methods add a frame to the webdriver.controlFlow().
Related
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
Please note that I want to use JQuery for this.
This question How to trigger a click on a link using jQuery provided a solution for when only one anchor exists inside the list
However I have more than one list item and more than one anchor.
<ul id="navigation_list">
<li id="sub_menu1_tab" style="">
<span class="decorator"></span>
<a id="policies" href="#admin/menu1_list" class="admin-submenu-item"></a>
</li>
<li id="sub_menu2_tab" style="">
<span class="decorator"></span>
<a id="rules" href="#admin/menu2_list" class="admin-submenu-item"></a>
</li>
<li id="sub_menu3_tab" style="">
<span class="decorator"></span>
<a id="reports" href="#admin/menu3_list" class="admin-submenu-item"></a>
</li>
</ul>
How do I trigger a click on only one of the anchors? For example I want to trigger the second list item anchor.
I have tried the following without success
$("#sub_menu2_tab a").trigger('click');
and
$("#navigation_list #sub_menu2_tab a").trigger('click');
just try
$("#sub_menu2_tab a").click();
I've been trying to make a responsive website, most of it is sorted but I'm having difficulty with making the menu button (that shows up on devices specified by the media query) show and hide the navigation bar.
After researching it seems the only method is via JS, is this correct?
Anyway, I'm pretty awful when it comes to JS but I put it as I believed it would work. Here is the snippet of code. So the idea is, when ".menu-icon" is clicked the menu will drop down (or in this case fade in) and revert to hidden upon a second click etc.
http://jsfiddle.net/af57r1to/
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME
</li>
<li>SECTIONS
<ul>
<li>RETAIL
</li>
<li>HOTEL
</li>
<li>RESTAURANT
</li>
<li>SHOPPING
</li>
</ul>
<li>HOW IT WORKS
</li>
<li>OUR EXPERIENCE
</li>
<li>TESTIMONIALS
</li>
<li>NEWS
</li>
<li>CONTACT US
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
As this is at the moment, it seems to fade the navigation in for approximately 0.3seconds and then disappears. Not giving the user much time to choose an option from the drop down! aha.
I know it will be something obvious I've missed. Any help regarding it would be grateful.
Removing the class navbar from navbar cf solves the toggle issue, but screws up the styling. So, give an id to your navbar and toggle on that.
<div class="navbar" id='navbarID'>
<ul class="navbar cf">
<li>HOME
and
$('.menu-icon').click(function () {
$('#navbarID').fadeToggle();
});
Here is the fiddle
You have some errors in both HTML & JS.
First: You opened the inner <ul> element in a <li> element but closed it outside of the li element. The structure is wrong. It must closed inside the <li> element where it opened.
Second: The $(document).ready() function is not closed properly:
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
Below is how I created a menu links of my website using Bootstrap 3.1.0. I want the selected nag-pill to stay active/select while the link is clicked. Currently, the defined hover-colour is gone after the link is clicked. Is there a way to let the pill stay active after clicking?
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li>one</li>
<li><a id="menu_text">two</a></li>
<li><a id="menu_text">three</a></li>
</ul>
===Update===
I'm just new to JS and web development. The code that I'm trying to follow Twitter Bootstrap tutorial is here: http://jsfiddle.net/Dy9e6/
I just want the clicked nag-pill to show as 'selected' or 'highlighted' after user click on one of the pill/tab.
First you need to add default class="active" to the first element.
Second you need to add data-toggle="tab" to the <a /> element. See the docs
Your code becomes:
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li class="active">one</li>
<li>two</li>
<li>three</li>
</ul>
Demo
I am using MVC 5. I have created navigation drop down. This is my code:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="menu">
Report
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="myselector">a </li>
<li>b </li>
</ul>
</li>
Now I have same controller but different actions for a and for b.
How to move to another page while click a and b. Is there any click event available?
I think it work with some js code, but you does not attach any js here. So, you need to add something to your html code for identify your links as different links.
Something like this
<li class="myselector action-show-a"><a>A</a></li>
<li class="myselector action-show-b"><a>B</a></li>
Then you need to select your elements using .myselector and add to them specified action according to .action-show-a and .action-show-b. For this purpose you need to add eventlistners to onclick actions.