I am facing an issue with slider button link, when I right-click on button it's working fine but not on left-click. I have tried many things, yet do not find any solution.
here is button code:
<a class="wow bounceInUp" data-wow-offset="10" href="https://www.google.com" style="visibility: visible; animation-name: bounceInUp;">Shop Now</a>
I put your button code into a codepen. It does seem to work for me. make sure to start and end your button with <a> </a>
<a class="wow bounceInUp" data-wow-offset="10" href="https://www.google.com" style="visibility: visible; animation-name: bounceInUp;">Shop Now</a>
https://codepen.io/Leeroy-J/pen/podVRvy
Related
I have a Bootstrap 5 nav bar with stick-top. I have a search icon in the toolbar that opens a full width google search bar right below the nav bar. When I make the search bar sticky it is always available when the search icon is clicked. The problem is that the results are populated in the same div, over the main content, so they run off the bottom of the screen until you scroll to the end of the page and the search results scroll. If I don't make the search bar sticky the results populate between the search bar and the content of the page and works like it should. The problem is that unless the page is scrolled to the top the search bar is off the top of the page.
I need to have the search bar always visible when they search icon is clicked and the results to appear as part of the page, a separate scrollable container with a close or a new window.
Any help greatly appreciated.
my nav bar code
<nav class="navbar sticky-top navbar-expand-xl start-0 end-0 p-1">
my google search code
<div id="target2" class="text-center hidden w-100" style="padding-top:0px; position:absdolute; top:50px; background-color:#3048e9; width:90%;">
<script async src="https://cse.google.com/cse.js?cx=*****************"></script>
<div id="cse" style="width: 100%; margin:0 auto; padding:5px; padding-top:0;">
<div class="gcse-search"></div>
</div>
</div>
I am developing an automation script and a part of it requires me to hover over a navigation bar to display a dropdown menu. The script is written using NodeJS and the browser used is Internet Explorer.
Navigation source code
...
<ul class=navigation " data-dojo-attach-point="nonmMenu ">
<li class= "dropdown ">
<i class="fa fa-clipboard nav-icon " aria-hidden="true "></i><span>Accounts</span>
<div class='fulldrop i3">..</div>
</li>
</ul>
...
NodeJS code:
let xPathButton = "//span[text()='Accounts']";
//Find button to hover over
let buttonWithDropDown = driver.findElement(By.xpath(xPathButton));
//Hover
driver.actions().mouseMove(buttonWithDropDown).perform();
However, this does not work. The end goal is to click a link once the dropdown menu appears, which I have tried doing but as the element is not visible I get the exception ElementNotInteractableError: Cannot click on element. I would appreciate some pointers in the right direction to sort this out.
Update:
Been looking at this a bit more; Could the aria-hidden attribute in the anchor tag be causing the selenium driver to not detect the element?
Please note that changing the browser is not an option.
Try to hover over an a or li element. Also you can try click:
By.xpath("//a[span[.='Accounts']]")
By.xpath("//li[.//span[.='Accounts']]")
You can try open menu without opening menu with javascript:
executeJavaScript("arguments[0].click();", yourDropdownMenuElement);
I am trying to simulate double clicking on an object in internet explorer.
Here is the HTML code:
<tr class="selected lead" style="height: 19px;">
<td class="sort-column" style="width: 1200px; line-height: 17px; text-indent: 19px;">
<img class="bi-tree-view-expand-icon" alt="" src="/resource/image/bid/triangle_collapsed_16.png">
<img class="icon" alt="" src=" /resource/image/bid/folder_closed_16.png">
My Content</td>
<td class="horizontal-filler" style="width: 100px;"> </td></tr>
And the VBA code (which is currently working):
For Each Btn In IE.document.getElementsByClassName("sort-column")
If Btn.innerText = "My Content" Then
Btn.Click
Exit For
End If
Next Btn
I can see the code pressing my button, but what I need is a double click of the button. Any help is greatly appreciated. Thanks!
I spent some time on this and couldn't find a universal answer. It seems any particular method that fires synthetic events may not work depending on a browser's preferred method, control inheritance, and other factors.
Assuming the event is supported, initialized, and has a listener then one of these may work for you.
If your using Chrome, Firefox, or IE 9 and below
Btn.FireEvents("ondblclick")
Except IE 8 which reportedly wants focus on the object
Btn.Focus
Btn.FireEvents("ondblclick")
And if you're on IE 10+ and above then you'll be more successful with:
Btn.dispatchEvent("ondblclick")
I'll be back after building a project to try these out. In the meantime I hope this points you in a helpful direction.
(Working with Python 3 and Selenium. Trying to interact with Buffer.com's alert window after pressing "Shuffle" link.)
After pressing a button on the main browser frame, an alert pops up with two buttons. I want to press one of them.
I am trying to change the focus to this iframe that contains the alert, but I can't see it to have a name. Here's the code of said alert iframe:
<iframe src="https://js.stripe.com/v2/m/outer.html#referrer=https%3A%2F%2Fbuffer.com%2Fsignin&title=Buffer&url=https%3A%2F%2Fbuffer.com%2Fapp%2Fprofile%2F55e5cd556321154607cc5244%2Fbuffer%2Fqueue%2Flist&muid=c7aa769e-c41c-4e86-b75f-99771764f6a5&sid=26221bdc-c091-42c2-8965-8ea3e84267e2&preview=false&" frameborder="0" allowtransparency="true" scrolling="no" tabindex="-1" aria-hidden="true" style="width: 1px !important; height: 1px !important; position: fixed !important; visibility: hidden !important; pointer-events: none !important;"></iframe>
The element CONTAINING this iframe, in turn, has a name, but it is dynamically generated. The code of the upper level iframe containing the iframe I want is:
<iframe name="stripeXDM_default441361_provider" id="stripeXDM_default441361_provider" aria-hidden="true" src="https://js.stripe.com/v2/channel.html?stripe_xdm_e=https%3A%2F%2Fbuffer.com&stripe_xdm_c=default441361&stripe_xdm_p=1#__stripe_transport__" frameborder="0" style="position: absolute; top: -2000px; left: 0px;"></iframe>
The "stripeXDM_default441361_provider" is dynamic and changes every time the alert pops up.
I have tried switch_to.frame but could not get it right.
I also tried to select the dynamically-generated iframe with "Xpath containing" but did not work either.
Any suggestions on how I can select this iframe with no name?
To select the iframe, you could use the xpath. For example, if we consider this html:
<!DOCTYPE html>
<html>
<body>
<span id="n2">
<span id="n6">
<a class="cn" name= "A1" >One</a>
</span>
<span id="n7">
<a class="cn" name= "A2" >Two</a>
</span>
<span id="n8">
<a class="cn" name= "A3" >Three</a>
</span>
</span>
</body>
</html>
You can do this:
driver.find_element_by_xpath(("//span[#id='n2']/span[#id='n6']/a[#name='A1' and text()='One']"))
to identify the element with name 'A1' and text 'One'.
But also:
driver.find_element_by_xpath(("//span/span[1]/a[#name='A1' and text()='One']"))
So, in your case you can find the "external" iframe element and after the "internal" one (I assumed there aren't other iframe). Something like this:
//iframe/iframe
After you select the iframe you have to switch to it.
It turns out I was overcomplicating things. I did not need to change focus or anything else.
I just assume that it was all html and I tried to select the element directly with xpath, like so:
#do something
#press shuffle button
#once the button appears in the iframe, blurring everything else, use this line:
button = browser.find_element_by_xpath('//*[#id="modal-buttons"]/a[2]')
button.click()
That's what I did and worked perfectly.
I use the "SB Admin 2" Theme for a project.
The integratet Metis Menu works very well on desktop, also on tablet.
But when I visit the page with my phone, the menu doesn't hide completely.
Only when I scroll the page.
You can visit https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html to test ist.
If you shrink the browser as far as its like a mobile screen, the menu does not hide.
I tried to do it on the bottom of my index.html file with $('#side-menu').metisMenu('collapse'); but it does not work. This is also defined in the sb-admin-2.js file. But it doenst work either.
Can you help me to get the menu hide completly, even on mobile devices?
Try downgrading the JQuery version to 2.1.3:
https://code.jquery.com/jquery-2.1.3.min.js
There are issues with metismenu with newer Jquery versions:
https://github.com/onokumus/metismenu/issues/128
You can do this with hiding it with css only
.navbar-top-links {
display: none
}
Or if you don't want to hide it always only on button click. Create a new button with these attributes before your current unordered list (ul)
<button type="button" class="collapse-2" data-toggle="collapse" href="#collapse2" aria-expanded="true">
And replace this code
<ul class="nav navbar-top-links navbar-right">
With this code
<ul class="nav navbar-top-links navbar-right navbar-expand-sm navbar-collapse panel-collapse collapse" id="collapse2">
I managed to get it working like this only you have to style the button and place it in the correct position.