I have set up the following in my angular app
I have an image with the following ng-mouseover and ng-mouseleave events tied to the image tag
<img ng-mouseover="infoIconStyle={'height':'50px','padding':'10px'}" ng-mouseleave="infoIconStyle={'height':'0','padding':'0'}" src="images/info-icon.svg" />
These mouse over events are then sent to the following div
<div class="dataBoxInfoContent" ng-style="infoIconStyle">{{description}}</div>
Therefore when ng-mouseover is triggered the dataBoxInfoContent div opens due to the height going from 0 to 50px and when ng-mouseleave is triggered the div closes again.
However for some reason ng-mouseleave is not trigged when the mouse leaves the image and this is only in Google Chrome. All works fine in internet explorer and mozilla firefox.
Anyone know why this is the case?
I had a similar problem with Chrome and eventually tracked the issue down to a specific Chrome Extension (for me, it was the AngularJS Batarang extension).
If you have any javascript-profiling extensions, the slowness that those add to your page can sometimes cause unusual behavior in events (in particular, the mouse-movement events).
In the "Profiles" tab of the Chrome debugger, use the "Collect JavaScript CPU Profile" to find out which scripts, if any, are hogs, and then if you hover over the script on the right, it will tell you which chrome extension the hog is a part of.
Related
I am facing issue while interacting with any element in a modal popup. I am using ChromeDriver 2.46 and all tests which involves modal popup fails on Chrome 74.
I get below error
element is not clickable. Other element would receive the click
I have tried with scrollToTop, scrollToElement and visibilityOf but nothing worked. Has anyone faced similar issue?
Attach you html, and full error stack
Meanwhile here is my assumption which is 90% likely what your problem is
Lets assume your html is something like
<div>
<button></button>
</div>
your button is visible... but so is div element. BUT because wraps the button, it is above the button (has higher z-index). That's why when you click button, div gets this click, which protractor doesn't let happen. And fails
In this case just simply use js click
browser.executeScript(
"arguments[0].click();",
$element.getWebElement() // substitute $element to your elementFinder
)
this will work because element gets the click regardless of visibility and the page layout
I suspect that Driver version and chrome version incompatibility could be the reason for your problem. Since chrome driver 2.46 supports v71-73 and you are using v74. We also observed that there are many evident instances of this. I would suggest first make sure that drive and chrome browser compatibility before running any test case.
Refer this link for browser and driver compatibility
I'm trying to get a Google Chrome Extension to run as a Firefox Webextension. My original Problem is that the popup has no height. Besides that I could not for the life of me figure out how to inspect the DOM of the popup.
Btw the popup is just an HTML file and it is defined in browser_action.default_popup.
The bugs referenced in #minj's comment above are resolved in recent versions of Firefox. You can debug popups now. MDN explains it well; in brief...
enter about:debugging in the URL bar.
In the left-hand menu, click This Firefox (or This Nightly).
click Inspect next to your extension to open the "Extension Toolbox".
Check the option to "Disable Popup Auto-Hide" in the Extension Toolbox
then you select which HTML document you mean to debug (in this case it would be your popup HTML code) using the context switcher ("select an iframe as the currently targeted document")
After doing this, the popup stays on the screen and the inspector contains its HTML. I'm doing it now for the first time (in Firefox 49) and it's working well.
It's not currently possible since the popup closes automatically and there is no DOM view available. See bug 1236944 and bug 950936.
Popup sizing does not seem to work correctly in Firefox. There are a bunch of bugs related to it.
Bootstrap3 and Angular are supposed to play nicely together.... and with Bootstrap being "mobile first" I never thought I'd run into this, but I have.
I have a modal window being popped up from a button (via a standard modalService), which works just fine across the desktop browsers I've tested with (IE 10, 11, Edge, Chrome, Opera, Safari, and Firefox) but fails on mobile. Every mobile I have access to (IOS Chrome, IOS Safari, Android Internet Browser, and Android Chrome).
It also displays the same failure on Chrome emulation of mobile browsers.
In all cases on mobile, the radio buttons and checkbox fail to recognize a tap/click event.. unless I hold for a long long time (much longer than the 300ms I've seen mentioned in articles). In a couple mobile browsers that do capture it - the Angular actions which result from the change are not being executed on the mobile clients (but are on the desktops)
<input type="radio" class="form-control" ng-Model="modalOptions.rScope.selectedItem" name="purchase" ng-value="selectedItem=item" ngClick="modalOptions.rScope.selectedItem=item">
ngTouch is being added to the page to facilitate the faster ngClick event.
I have stripped out all the relevant code and created a plunk showing this : http://plnkr.co/edit/iZV6JRnHHHRwAKO2JJ06
Is this a function of how the radio buttons were defined? And if so, why is the checkbox displaying the same behaviour (I know it doesnt currently have an ngClick on it - but the behaviour is the same):
<input type="checkbox" class="form-control" width="20px" ng-model="modalOptions.rScope.xgiftfor" />
I get no errors indicating the ngTouch module is not being loaded...
The one thing that bothers me... the page for ngClick states:
A more powerful replacement for the default ngClick designed to be used on
touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-
release before sending the click event. This version handles them immediately,
and then prevents the following click event from propagating.
Is ngTouch preventing Angular from continuing to propagate updates on the form? That click event will have other consequences as the modalOption.rScope.selectedItem update occurs.
OR am I stretching to find a reason for this behaviour?
[EDIT]
I have updated the plunk to display the same data set (code slightly modified due to scope) on the main page, and the behaviour on the modal is NOT present on the main page. Run it in your fav desktop browser and it's good on the main page - but open the modal, and it just doesn't work.
http://embed.plnkr.co/WnxArMU9VUVjDwnvueV1
Does anyone have any clue what the modal introducing that is interfering with the processing (and how to work around it)?
I was running into the exact problem. Unfortunately, I only discovered that the ngClick directive is now deprecated with no workaround.
DEPRECATION NOTICE: Beginning with Angular 1.5, this directive is deprecated and by default disabled. The directive will receive no further support and might be removed from future releases. If you need the directive, you can enable it with the $touchProvider#ngClickOverrideEnabled function. We also recommend that you migrate to FastClick. To learn more about the 300ms delay, this Telerik article gives a good overview.
I have an Angular web app which have to be responsive. To do that i use Bootstrap and its responsive grid system.
In every page I have to interact with users to set app, or simply change page. For that, I use ng-click and ng-href directives.
I have tested it many times, it works great except when my device screen width is close to phone portrait's width. I noticed this issue when i use chrome dev tools phone emulator and check on my phone a Wiko.
Have you any clue about this problem ? it's kinda weird, isn't it ?
EDIT : I added ngTouch to my app, but no change.
I discovered that my ngclick item was behind div with no ng-click directive when on small screen device.
Just fixed it by revising my responsive.
I'm having a problem with IE7 when clicking on images that open up using the Lightbox 2 javascript image viewer. Instead of overlaying the image on the current page it opens the image into a separate page.
Not sure if this is an AJAX problem possibly ? Works fine in Firefox.
Anybody else come across this before ?
Your page is performing the fall-back behaviour you would expect in the following scenarios...
JavaScript is disabled
There is an error in the JavaScript that is creating the lightbox effect (look out for a very brief flash of the yellow error icon before the next page loads - or fire up some dev tools)
There is a JavaScript error on the page before the image is clicked, which has stopped execution of JavaScript on the page (look out for the yellow error icon in the status bar again!)
The only thing I can think of is that I have google toolbar amd McAfee security installed that may be blocking the overlay (????) but don't think that should make any difference.