im trying to do a big dropdown menu but when i click on a main dropdown-toggle TEXT it only highlight but nothing happen... - check the picture
<li class="dropdown dropdown-large">
TEXT
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs</li>
<li class="disabled">How to use</li>
<li>Examples</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example</li>
<li>Aligninment options</li>
<li>Headers</li>
<li>Disabled menu items</li>
</ul>
</li>
</ul>
</li>
Only Highlight but do not show dropdown
I think this may be causing the problem : TEXT You don't want your toggle button to be a direct link, instead use the intended Bootstrap class
Check this JSFiddle, I think this is what you are trying to do : Answer
If this answer solves your problem, please do accept it.
Related
A parent link of a bootstrap dropdown isn't clickable by default so the link isn't working.
This is the html code:
<div class="dropdown">
<a id="item7" class="dropdown-toggle" data-toggle="dropdown" href="/mylink">MyLink</a>
<ul class="dropdown-menu">
<li class="submenuitem">
item 1
</li>
<li class="submenuitem">
item 2
</li>
</ul>
</div>
I want /myLink to clickable. How do I fix that?
Add this code to you page and parent links will work:
<script>
jQuery(function($) {
$('.dropdown > a').click(function(){
location.href = this.href;
});
});
</script>
I found that the easiest way to do it in bootstrap 4 is by deleting the "data-toggle" attribute from the parent element!
I am trying to automate a website.I am performing the following steps :
Login
LogOut.
I am able to log in successfully. After the Log in step, the Log Out option is present under a button/tab called as MyAccount. But the Log Out option is displayed when one hovers over the MyAccount button. I am trying to write the Selenium code for Log Out step. But i am consistently getting No Element Found Exception.I am using css Selector .The DOM structure of the Log Out element is :
<li class="_2sYLhZ _2mEF1S" data-reactid="31">
<a class="_1AHrFc _2k0gmP" data-reactid="32" href="/account/?rd=0&link=home_account">My Account</a>
<ul class="_1u5ANM" data-reactid="33">
<li class="_2f5Jjv" data-reactid="34">
<a class="_2k0gmP" data-reactid="35" href="/account/?rd=0&link=home_account">Account</a>
</li>
<li class="_2f5Jjv" data-reactid="36">
<a class="_2k0gmP" data-reactid="37" href="/account/orders?link=home_orders">Orders</a>
</li>
<li class="_2f5Jjv" data-reactid="38">
<a class="_2k0gmP" data-reactid="39" href="/account/wallet?link=home_wallet">Wallet</a>
</li>
<li class="_2f5Jjv" data-reactid="40">
<a class="_2k0gmP" data-reactid="41" href="/wishlist?link=home_wishlist">Wishlist</a>
</li>
<li class="_2f5Jjv" data-reactid="42">
<a class="_2k0gmP" data-reactid="43" href="/account/ebookslibrary">eBooks Library</a>
</li>
<li class="_2f5Jjv" data-reactid="44">
<a class="_2k0gmP" data-reactid="45" href="/profile?link=home_review">Reviews & Ratings</a>
</li>
<li class="_2f5Jjv" data-reactid="46">
<a class="_2k0gmP" data-reactid="47" href="/recommendations?link=home_recommendations">Recommendations</a>
</li>
<li class="_2f5Jjv" data-reactid="48">
<a class="_2k0gmP" data-reactid="49" href="/account/subscriptions?link=home_preferences">Email Preferences</a>
</li>
<li class="_2f5Jjv" data-reactid="50">
<a class="_2k0gmP" data-reactid="51" href="/account/Clickme">Click Me</a>
</li>
<li class="_2f5Jjv" data-reactid="52">
<a class="_2k0gmP" data-reactid="53" href="#">Log Out</a>
</li>
</ul>
Below is the peice of code that i am writing for the clicking the Log Out button.
driver.findElement(By.cssSelector("a[text='Log Out'])")).click();
Could someone please tell me what is the error in the css Selector code that I am using.
There is no such possibility in css selector to select element by child text node. You might use one of attributes as below:
driver.findElement(By.cssSelector("a[data-reactid='53'])")).click();
or to use search by XPath selector if you still want to use text content as identifier:
driver.findElement(By.xpath("//a[text()='Log Out'])")).click();
or by link text:
driver.findElement(By.linkText("Log Out")).click();
Try to move mouse over My Account button using selenium actions like this( Im writing c# code but am sure that methods and classes are the same in java, maybe they differ in case):
Actions action = new Actions(driver);
action.MoveToElement(myAccountElement).Perform();
Then, use webdriverwait and explicitly wait for some seconds.
Afrer waiting, find your element(logout button) and perform click.
But...instead of .click() method, use .sendKeys(keys.Enter) or .sendKeys(keys.Return)
click method sometimes do not work on elements(my personal experience on different sites)
PS: your logout link has href set to '#'.
Try this in your cssSelector:
a[href*='#'])
A drop down list appears on mouse over on a link, so there is no need to click to open a dropdown list.
<ul id="XenForoUniq4">
<li class="PrefixGroup">
<h3>some header</h3>
<ul>
<li class="PrefixOption">option 1
</li>
<li class="PrefixOption">option 2
</li>
</ul>
</li>
<li class="PrefixOption selected">
no option selected
</li>
</ul>
How to select one of the elements in such case?
There is an Actions class in Selenium that exposes a MoveToElement() method that allows you to hover the link in order to make visible the list.
I am using Bootstrap tabs in my XPage application as follows:
<div class="bs-component">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
PENDING REQUESTS
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">
ARCHIVES
</a>
</li>
</ul>
</div>
Upon clicking a given tab, I'd like to set a sessionScope variable. I tried substituting the li with an xp:panel (tagName="li") and an eventHandler attached but could not get it to write to sessionScope. I'm using Mark Leusink's debugger to check scope variables.
Would appreciate suggestions.
Thanks,
Dan
I think the best way it to add some JQuery code to add an onClick event, which triggers SSJS code. How to do this, see http://www.xpagetips.com/2011/11/running-ssjs-from-csjs-sometimes-its.html
This code should work. You must set id attribute for panel
<xp:panel tagName="li" id="XXX">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:sessionScope.XXX = "";}]]></xp:this.action>
</xp:eventHandler>
</xp:panel>
For attach to ssjs event XSP use this code(example):
XSP.attachEvent("view:_id1:_id3:_id12", "view:_id1:_id3:image2", "onclick", null, true, 2);
Where second parameter is target id attribute
Im using Selenium 2.44 library with IE 9 browser
The menubar is loaded dynamically via js.I tried to locate the element via findElement - used Xpath. It ends up in throwing nosuchElement exception. below is snippet of Dom element
<html><body class="page">
<div id="dynamicMenu" style="display: block;">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li sequence="7">
<a class="sf-with-ul" href="UserContentStart.aspx?category=17">Type
<span class="sf-sub-indicator"> ยป</span></a>
<ul style="display: none; visibility: hidden;">
<li sequence="0">
Brochure
</li>
<li sequence="1">
Direct mail
</li>
<li sequence="2">
E-mail
</li>
<li sequence="3">
Flyer
</li>
<li sequence="4">
Poster
</li>
<li sequence="5">
Presentation
</li>
<li sequence="6">
Letter
</li>
</ul>
</li>
</ul>
</div>
</body></html>
Do I need to execute the javascript before finding the element.
I dont have access to source code.All I inspect is via DOM element source from F12 dev tool.
Thanks !
//li[#sequence='5']/a should work for you. And, before that you have to make sure the element is visible.
Below Code will find the 5th element and will wait untill it gets visible for 20 sec .
Once its visible it will click the element.
In your case 5th element is the link to 'Presentation' which is in 'a' tag.
WebDriverWait Test = new WebDriverWait(driver, 10);
WebElement Fifth_Link = Test.until(ExpectedConditions.elementToBeClickable(By.xpath("//a[contains(text(),'Presentation')]")));
Fifth_Link.click();
Let me know if it does not works.