I'm clicking on a link that opens a new window with a PDF document. I switch to the new Window, which I verified that I was on by getting the URL. The window has a toolbar at the top which is visible for a few seconds when the window opens, and then hides itself unless you move the mouse again. I'm trying to click on the Download button, but anything I try gives an error that the CSS Selector can't find the element. I'm suspecting it's because of the nature of the animated toolbar, but I'm not sure. At first I was just trying a regular click:
element(by.id('download').click;
And that was not working. So I tried navigating the mouse to click on it:
browser.driver.actions().mouseMove(element(by.id('download'))).perform();
element(by.id('download')).click();
I've also tried selecting by css:
element(by.css('#download').click();
All give me -Failed: No element found using locator.
Could someone please tell me if what I'm doing is possible, and if so, how I might be able to accomplish it?
screencapture
Element
This is more of a workaround than a solution, but what works for me with elements that are for some reason not visible (covered with other elements or working only on hover) is to just inject a script. Like:
browser.executeScript(
"document.querySelector('[id=\"download\"]').click()"
);
Related
I have the following element:
And then I use jquery fadeOut(), then remove() method to remove the yellow element.
This works perfectly in every browser except in android Chrome, which looks like the picture above.
The element is supposed to be removed, yet still, it exists on the screen unless I change the phone orientation.
I used chrome inspector, through Remote debugging, to check the element, and indeed the element is removed as revealed in the element panel. I just wonder why the element still shows on the screen.
The element with class LMnwtItem clearly is left with one, with display being none, yet on the screen, still showing the element.
Any help is much appreciated.
btw, sorry for being unable to show the codes.
ONE MORE INFORMATION WHICH MAY HELP
The element, however, will disappear after hiding the parent element and then showing the parent element again, but only manually.
Ionic/cordova/angular/ios application:
I am using angular-notify to display overlay messages that have ng-click events attached. They show up fine and the ng-click events register EXCEPT when an ionicModal is open - while it's open and an angular-notify message displays, I can't click it. As soon as I click to close the modal (I have to click on my notification since it is overlaying the close button but it still closes the modal) the ng-click registers again.
I am not sure how to test this theory, but it feels like the click is getting captured or disabled by ionicModal. Is there something I can do (z-index is set to 99999) to make those clicks get registered?
-- UPDATE (Testing in Chrome w/inspector)
It doesn't appear to matter in which order the elements are loaded. Whether the modal, notification overlay or popup load in first, the issue remains.
Click events are cut off for my notification overlay until the modal and/or popup are dismissed.
When I look at the DOM inspector, I see some divs are created when the popup or modal instantiates. This one:
<div class="click-block click-block-hide"></div>
looks like it might be causing my issues but it sits lower in the DOM and when I delete the element (in Chrome Inspector) it doesn't fix my issue.
No matter what z-index I set or where I move the element in the DOM (via inspector) or what background div elements I delete, I still cant click my notification until any and all popup/modals are dismissed.
Any thoughts?
Can you explain the layout a bit better? Is the ionicModal sitting on top of the message? Or are they side by side?
If the modal is sitting above the message, then it is a matter of z-index. You need to make sure that the z-index for the class that is being used isn't overriding the z-index of 99999.
I figured it out, at least how to hack around it.
$ionicModal and $ionicPopup add a class to the body element <body class='popup-open modal-open'>. I didn't look into how, but it is blocking clicks to my notification.
So I added an interval to the angular-notify notification to remove the modal-open and popup-open classes from $ionicBody.
var notificationInterval;
notificationInterval = $interval(function() {
$ionicBody.removeClass('modal-open');
$ionicBody.removeClass('popup-open');
// console.log("removing those body classes while the notification is up.");
}, 1000)
For notification dismissal, I added to the $scope.$close function
$interval.cancel(notificationInterval)
There is an HTML object that changes after mouseover. I need to inspect the changes and copy it's code, but with firebug I cannot do that (the mouse can be only in one place).
Is it possible to freeze the html while the mouse is on an object and then check the changes in firebug?
Note that, it is not the HTML attribute that changes, it is the content that changes. Another div is added after mouseover. So, it cannot be monitored by Style tab. For example in this link: http://demo.virtuemart.net/index.php/2012-01-13-09-33-20/product-details-layout what happens when mouse is over the product image?
actually i dont have firebug .. but chrome inspector can work for you.. i hope it should be available in firebug also.. check the image
so you can try this one also..
You can stop the script execution when the HTML is changed using the Break On Child Addition or Removal option inside the context menu of the HTML panel.
To use this option you need to enable the Script panel first and reload the page.
Example:
At the page you mentioned just right-click on the <body> tag and choose the Break On Child Addition or Removal option. Then hover the product image. Doing so the script execution will stop and you'll be able to inspect the HTML for the loupe by clicking on the node inside the break notification:
If you are using Chrome you can press F8 while having the developer tools opened.
F8 pauses on next script execution. So if you hover, then press F8, then move your mouse a bit inside the element, you will be able to rightclick -> inspect it.
In Firebug Addon you can make the state permanent with the dropdown-menu at the Style tab.
http://i.imgur.com/pUaWw6b.png
If you want to change the content of an element, you can by editing the HTML directly.
http://i.imgur.com/AbW0z9D.png
If I have a link in my jQuery Mobile app, and make it a button with .button();. If I click on the text (center of the button), it will not throw the event "click".
Here is an example:
http://jsfiddle.net/9rZHg/
Run this script, and try aiming for the text. The alert popup will not show up. It will work only if you click on other parts of the button.
The same occurs while testing on the device.
Is there an easy way to avoid this, or do I have to use <button> tags everywhere in my app ?
Thank you
Developer on the jQuery Mobile project, here.
While the fix above may temporarily patch the issue for the time being, the fundamental issue is that the button() plugin is intended for button elements and inputs. Adding the data-role="button" attribute or calling the buttonMarkup() plugin instead will prevent this issue.
I have not created buttons like that before but the problem is with the z-index of the <a> element. If you add the following CSS to your page then you will be able to click on any part of the button to get the click event to fire:
/*place the hidden link on top of the button UI*/
.ui-btn-hidden {
z-index : 2;
}
This issue does not occur when you use data-role="button" on the <a> tag like so:
A tag w/ data-role="button"
Here is a jsfiddle of both of these solutions: http://jsfiddle.net/jasper/9rZHg/1/
I'm creating a firefox add-on, and I have a situation where if someone clicks on a specific item in my toolbarbutton menupopup, I want to display some text to appear beside the mouse for a couple seconds. I don't mean mouseover text, because when they click on the item, then I close the menupopup. I mean something like what's shown at this site:
http://www.kingsquare.nl/cursormessage
The normal way of doing this would be with javascript and a div that would have the text I want to show. Unfortunately, I've discovered that the toolbarbutton can't have an effect on the main window, which is where I'd need to place the div to show. I've tried getting Jquery to work and haven't been successful either.
You can use panels together with openPopup() and hidePopup(). Remember to set the attribute noautohide to true on the panel.
More info on panels - https://developer.mozilla.org/en/XUL/panel