I've been using Selenium with the product for a while.
Regular HTML pages, forms and javascript are working well with it.
Our developer just added an AJAX drop-down menu.
I can't 'record' that with selenium, how can I use it? Actually I can record that the control was initially clicked (which makes the drop-down appear) but not what option is then clicked. How can I then detect that they clicked on one of the options?
The HTML that's displayed is:
<ul id="fruit-switcher" class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle" href="#">
Change fruit…
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a rel="nofollow" data-method="put" href="/admin/fruits/23-bananas/activate"></a>
</li>
<li>
<a rel="nofollow" data-method="put" href="/admin/fruits/28-apples/activate"></a>
<li>
</li>
<li>
other options (a links)...
</li>...
</ul>
</li>
</ul>
<script>
//<![CDATA[
$(function() {
$('#fruit-switcher .dropdown-toggle').dropdown();
})
//]]>
</script>
You can always send_keys to the element.
Actually it was straight-forward selenium code:
click link="Change..."
pause 200
click //ul[contains(#id,'fruit-switcher')]//ul[contains(#class,'dropdown-menu')]/li[3]/a
click link="Change..."
pause 600
click //ul[contains(#id,'fruit-switcher')]//a[contains(text(),'Bananas')]
Related
I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
I'm making a code for download information from a website. My problem consists of access to a Href in a drop down with submenus. I have tried many codes, but any of them works.
The references with getElementById or getElementsByClassName didn't work because the functions focus, click, selecteditems ="1" are not supported by this objects. The dropdown menu has the particularity of being managed first by a click and then by focussing them. After the first click over three points, it hovers a unique option named Export and approaching it hovers another three options. I need the last one named "Download associated deductions". This is the code of the specific tag.
<a title="Download associated deductions" class="ajax" href="exportPaymentLineItems.lvp?requestUID=&reportType=xls&reportName=Payments and associated deductions&ajax=true&isDrillable=" target="_blank">
<span class="prgx-icon excel-icon"></span> Download associated deductions
</a>
This is the code I have in VBA
Dim IE As Object
Set IE = CreateObject("InternetExplorer.Application")
'...
IE.Document.getElementsByClassName("ajax").Click
Previous in HTML code, the first click to open the dropdown menu
<a class="btn btn-dots-vertical" id="dLabel" role="button" aria-expanded="true" href="#" data-toggle="dropdown" data-target="#">
</a>
<ul class="dropdown-menu multi-level dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Export</a>
<ul class="dropdown-menu dropdown-menuright">
<li><a title="Excel" href="supplierReport.lvp?requestUID=&reportType=xls&reportName=BasicClaimsPaymentReport" target="_blank"><span class="prgx-icon excel-icon"></span>Excel</a></li>
<li><a title="CSV" href="supplierReport.lvp?requestUID=&reportType=csv&reportName=BasicClaimsPaymentReport" target="_blank"><span class="prgx-icon csv-icon"></span>CSV</a></li>
<li><a title="PDF" href="supplierReport.lvp?requestUID=&reportType=pdf&reportName=BasicClaimsPaymentReport" target="_blank"><span class="prgx-icon pdf-icon"></span>PDF</a></li>
'The one I need to click, download or copy to open in another explorer tab
<li>
<a title="Download associated deductions" class="ajax" href="exportPaymentLineItems.lvp?requestUID=&reportType=xls&reportName=Payments and associated deductions&ajax=true&isDrillable=" target="_blank">
<span class="prgx-icon excel-icon"></span> Download associated deductions
</a>
</li>
</ul>
</li>
</ul>
In order to download the document I expect to click the right class, copy the Href and paste in a new explorer tab or just initiate the download with a query sector.
Try an attribute selector
ie.document.querySelector("[title=Excel]").click
ie.document.querySelector("[title='Download associated deductions']").click
Your line:
IE.Document.getElementsByClassName("ajax").Click
won't work if only because that method returns a collection. You would need an index e.g.
IE.Document.getElementsByClassName("ajax")(0).Click
querySelector returns a single node. The first match for the css selector passed to it between the ""
I created a site using Boostrap and WAMP Server and now I am trying to move it to a virtual server, so more people could use it.
The site looks fine, but when clicking a drop-down toggle for example, it doesn't display anything, it just goes to href="#"
My element looks like this:
<li class="dropdown" style="border-radius: 5px;">
<a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white;font-size: medium; background-color: #8A2BE2;border-radius: 5px;">Search <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a target="_blank" href="search_1" style="color:#601e9e;font-size: medium;border-radius: 5px;">Option 1</a>
</li>
<li><a target="_blank" href="search" style="color:#601e9e;font-size: medium;border-radius: 5px;">Other Options</a>
</li>
</ul>
</li>
Is there anything I need to change? I moved all the files and folders.
You probably missed the bootstrap JavaScript file. Make sure you add after your footer and it should be fine. Your code should have something like this:
<script src="/js/bootstrap.min.js"></script>
Make sure ti put your script after jQuery script. Additionally, you may have this script, but it can't find the file in the specified location. Check if the file exist on your server.
I am creating bootstrap dropdown menu in my page ..I need to create same dropdown for different elements...I created one dropdown as follows
<ul>
<li class="dropdown" id="menu5"><a class="dropdown-toggle" data-toggle="dropdown" href="#menu5"> Settings
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Content</li>
<li><a>Add
User</a></li>
<li><a href="" id="vwUserHier">
search</a></li>
<li>Edit</li>
</ul></li>
</ul>
one menu created correctly but i want to create other menu with the same options how should i do this ...
Is there any way to reuse the contents of dropdown-menu class...
Have you tried JQuery clone method??
You'll probably have to use it with the 'true' option.
I've got a project I'm working on and for some reason, I can't get the dropdowns to work on my menu. I've included the proper files which leads me to believe it's a problem in my code.
Here's my page in action: https://git.jobud9.com/ (try the dropdown on the right side of the menu. Also don't mind the prompt your browser will issue because my certificate approval's still pending.)
And here's the code powering it:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>hi</li>
</ul>
</li>
Thanks much in advance!
Your html code is correct. Maybe you forgot to attach a script? Look this dropdown js