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
Related
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
I have a Material-UI <Dialog> element that has worked perfectly for a long time, including in Chrome using device emulation. Recently I noticed that for some reason, when using device emulation in Chrome, the dialog opens, and then immediately closes. The same thing is happening with my <Drawer> element. Looking at the call stack, I can see a topClick event is triggering dispatchEvent and is closing the elements -- even though I've clicked nothing except the UI element that opens the Dialog or Drawer.
When I am not using device emulation, everything runs as expected.
The same anomaly is seen when I access the web app from my iPhone. I have updated to the latest versions of all my React plugins, including react-tap-event-plugin, but the anomaly is still here.
What could be causing this?
Thanks very much in advance to all for any info!
Material-UI has dropped its dependency on react-tap-event-plugin. It now uses onClick instead of onTouchTap.
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.
I have this weird issue with my angular app. It doesn't happen every time but I've been able to consistently reproduce it if I click to it as quickly as I can as soon as my angularjs app loads.
Basically my right pane directive will sometimes render a blank page. This page however appears when I resize the browser window a little bit.
I'm not even sure where to begin looking to resolve this bug. I tried messing around with $timeout and $scope.$apply but it didn't seem to do anything.
Has anyone seen anything like this before and if so, how did you resolve it?
Note the directive I use does use ng-include with a value that is dynamically generated from the custom directive's associated controller.
P.S. Another oddity, if I move my mouse over the allow main dock then it loads the page too. (I assume it's doing an unfocus action on the browser window.) I wanted to see if this was a browser specific issue because of this. Looks like it's only Chrome where this is a problem, as I can't reproduce the problem on firefox.
Same problem caused by CSS - display: table, found a solution by changing it to display: inline-block, so check if you have a such.
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.