Selenium: How can I click through a transparent overlay? - html

I have an element that fires some javascript on click.
Partially covering the element is a mostly-transparent graphic, which passes all events to that element. This way, regardless of if the overlay or the element is clicked, the element gets the events.
I'm trying to write a test in selenium that clicks the element under test and verifies the behavior, however the chrome webdriver tells me it can't click the element because the overlay will get the click event.
That is fine, though... How do I tell selenium that I don't care, to click anyways? I don't want to specifically click the overlay (in this test), the overlay is just eye-candy so the test should still work even if I remove the overlay.
edit:
To make clear... I want it to click in wherever it would have, if the overlay wasn't there. this way it'll click the element if there is no overlay, but click the overlay if covered.


You will not be able to click on the object under the overlay as Selenium has been written to only access what a user can access. If a manual user cannot click through then neither can Selenium.
You could either fire JavaScript directly on that object via the javascript_executor method, or alternatively, perform the interaction which will remove the overlay in your test


I could resolve this issue: In my application top header was visible and i clicked on one of the top elements (which was visible) and could continue with rest of the script execution


I solved this issue by clicking the coordinates of the close button.
Check out this answer. I showed how to click on the little "x" there, without needing to know the name of the actual button. Sometimes its easier to find the class of the image, for example.
Worst case, find the closest element to the button and change the last method to move_to_element_with_offset(element,x, y) to go from the element you found to the coordinates of the button on screen.
Once you do that, the overlay disappears and you can click as normal.

Related

Google Tag Manager Image Clicks

I am using Google Analytics on a Sharepoint site. On the main page, we have an image in an image carousel that once clicked will bring you to a different page on the site. I have tried everything to track clicks on this image in GTM - click url, click ID, css selector, etc. I can not figure out why my trigger never fires. I have attached the
image, what pops up when I click inspect, and variables that show up with the click in GTM preview... (This is the second half of the variables in preview).Three images total.

Good job on including all the relevant debugging info.
Judging from your inspect, you're looking at the image.
However, judging from your click event inspection, the click lands on an a.
I don't see the a in your DOM on the screenshot, but it may be either dynamically added, or just outside of the screenshot.
No matter. Let's start to carefully debug it. Make a trigger that would be triggered on anything that matches a. That's just a debugging trigger. Make sure it triggers on your image clicks.
Now, let's just make a simple CJS variable that would console.log({{Click Element}}). No need to use it anywhere, just make it. Go to the debug view again, try clicking the banner again and look in the console for something that would look like this:
See that pretty element? Now the wonderful dev console allows you to copy JS path to this element and do whatever you want with it. Mainly, comfortably and quickly test CSS selectors against this element. I suggest changing the selector JS console generated. It should work (unless the page is too dynamic), but it would be fragile. Having the element, however, you'll be able to make your own selectors.

how to stop webpage click events from like firefox/chrome developer console inspector tools?

Question #1:
I am working on a chrome extension where it requires an inspector like tool to let user hover on a webpage. And to show outline on hover on a DOM element.
When user clicks on any element, I need to show a popup besides the element.
But at the same time that elements click event must not execute. It is very similar to developer consoles inspector tool. Can you please help how to do this ?
Question #2:
Can you please suggest why Chrome developer console's inspector tool does not work in this case ?
To reproduce:
1. Go to https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjQ377A-8vQAhUHQY8KHUHxCv0QFggaMAA&url=https%3A%2F%2Fconsole.developers.google.com%2F&usg=AFQjCNF0eH059mv86nMIlRmfsf42kde-wA&bvm=bv.139782543,d.c2I
2. Click on "products & services" menu (3 horizontal lines icon) in left top. A slide menu will open.
3. Start developer console (click F12).
4. Select anything on this menu.
Actual result: Side menu closes.
Expected result: Side menu should not have closed and developer console should have shown its html.

I got a solution to this. I created a div (of size 4x4 px). I move
this div with the mouse move event. I set the div coordinates so
that mouse tip is exactly at the middle of the div.
Div background is kept transparent, so that it is not visible to
users. So when user clicks on element, he is actually clicking on
the div.
And inside the div mouse down event, I stop event propagation.
Please let me know if anyone reading need any more pointers.

You may have tried this already, but I'd suggest adding a click listener to any clickable items, by adding these lines:
$(document).click(function() {
event.stopPropagation();
event.preventDefault();
});
Though because of the way things bubble up in the DOM, events attached to children may still fire, depending on the browser.

"Inspect" a hover element?

Note: I've read similar threads, but none quite my issue - I can right click on it fine, it just then disappears.
I find 'Inspect Element' an invaluable tool in Chrome, however I'm having trouble using it for sub-menu for an element on my nav bar, which pops up below on hover of its parent item.
The popup (or down) isn't quite styled how I'd like, so I right-click > inspect element to see what's coming from where exactly, and get a better idea of how to achieve my desired effect.
However, as soon as I move my mouse away from the menu, it's gone; thus I can't select different elements in the inspection pane, and see which area is highlighted at the same time.
Is there a way around this, without changing the menu, so that it stays 'popped up' once activated?

If the hover element is triggered by JS (if triggered by CSS :hover, see gmo's answer), you can inspect it if you pause script execution. This is a much simpler way of freezing the DOM than the other answers suggest. You can pause script execution without losing the hover element as follows:
1. Via a keyboard shortcut
Here's how you do it in Chrome. I'm sure Firefox has an equivalent procedure:
Open up Developer Tools and go to Sources.
Note the shortcut to pause script execution—F8 (there may also be another depending on your OS).
Interact with the UI to get the element to appear.
Hit F8.
Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.
2. Via a delayed debugger statement
Some web pages attach keydown / keypress / keyup event listeners which interfere with the shortcut above. In those cases, you can pause script execution by triggering a debugger statement while the hover is open:
Open the JS console, and enter:
// Pause script execution in 5 seconds
setTimeout(() => { debugger; }, 5000)
Trigger the hover and wait for the debugger statement to execute.

If the hover effect is given with CSS then yes, I normally use two options to get this:
One, to see the hover effect when the mouse leave the hover area:
Open the inspector in docked window and increase the width until reach your HTML element, then right click and the popup menu must be over the inspector zone... then when you move the mouse over the inspector view, the hover effect keep activated in the document.
Two, to keep the hover effect even if the mouse is not over the HTML element, open the inspector, go to Styles TAB and click in the upper right icon that says Toggle Element State...(dotted rectangle with an arrow) There you can manually activate the Hover Event (among others) with the checkbox provided.
If it's not clear at all, let me know and I can add a few screenshots.
Edited: screenshot added.
And finally and as I say at the begining, I only be able to do this if the hover is set with CSS:HOVER... when you control the hover state with jQuery.onMouseOver for example, only works (sometimes), the method One.
Hope it helps.

What worked for me is selecting the specific a tag I wanted to inspect and configure it to break on attribute modification:
After doing the above, I would again normally select that a tag then the dropdown will automatically stay as-is even when I mouseover to other places like Inspect Element, etc.
You can just refresh the browser when doing inspecting the menu dropdown elements to go back to normal state.
Hope this helps. :)

You can also do this in the javascript console:
$('#foo').trigger('mouseover');
An that will "freeze" the element in the "hover" state.

Here's how I do it with no CSS changes or JS pausing in Chrome (I am on a Mac and do not have a PC in front of me if you are running on Win):
have your developer console open.
do not enable the hover inspection tool yet, but instead open up your desired sub menu by moving your mouse over it.
hit Command+Shift+C (Mac) or Ctrl+Shift+C (Win/Linux)
now the hover inspection tool will apply to the elements you have opened in your sub-nav.

Open Inspect element
Now go to elements now on right side and select hover
It will show all hover effects

Not sure if it was present in previous browser revisions, but I just found out this extremely simple method.
Open the inspector in chrome or Firefox, right click on the element you are interested in, and select the appropriate option (in this case: hover).
This will trigger the associated CSS.
Screenshots from Firefox 55 and chromium 61.

I needed to do this, but the element I was trying to inspect was added and removed dynamically based on hover state of another element. My solution is similar to this one, but that didn't quite work for me.
So here's what I did:
Add simple script to enter debugger mode upon mouseover of the element that triggers the hover event you're concerned about.
$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
debugger;
});
Then, with the dev console open in Chrome, hover over your element, and you will enter debugger mode. Navigate over to the sources section of the dev tools, and click the "Resume script execution" button (the blue play-like button below).
Once you do that, your DOM will be paused in the hover state, and you can use the element inspector to inspect all the elements as they exist in that state.

I found a very simple way to do this if for some reason you have problems with script pausing:
Open Dev Tools on "inspect"-tab.Hover to make the pop-up appear.Right-click on the desired element in your pop-up and press 'Q' (in Firefox) to inspect that element.Use keyboard to navigate: Arrow Up/Down: Move between elementsArrow Left/Right: Collapse/ExpandTab/Shift+Tab: Move between inspector and CSS rules and inside CSS RulesEnter: Edit CSS Rule

Excellent stuff!
Thank you to gmo for that advice. I did not know about those attribute settings massively helpful.
As a small revision to the wording I would explain that process as follows:
Right Click on the element you would like to style
Open 'Inspect' tool
On right hand side, navigate to the small Styles tab
Found above CSS stylesheet contents
Select the .hov option - This will give you all the settings
available for the selected HTML element
Click and Change all options to be inactive
Now Select the state that you would like to tweak - On activation of any of these, your Stylesheet will jump you directly to those settings:
Styles - Tweaking Filters - Interactive elements
This information was a lifesaver for me, cannot believe I have just heard about it!

Change the CSS so that the property which hides the menu isn't applied while you work on it is what I do.

Is there a way to prevent a button to move "down" when I click it?

When using a HTML <button> whenever you press the button it moves a little. A small animation to show it's actually a button.
I'm looking for a way to have it stay exactly the way it is, and force my animation using mouse Events.
I started off just placing an <img> and use mouse events to swap the picture. This worked fine, except that it has some side effects I can't seem to get rid of. For starters, pictures can be dragged, which just looks odd if just press the button - hold - and decide you want to leave the button. I can turn off "draggable" but then it will show a blue square selection box, which is very unwanted.
My solution was to place it on a <button> element instead (with hidden background and border). This solves all the problems, except that it's slightly wiggling to the side.
I tried disabling it, but that also disables the javascript events.
How can I force a button to stay in place even if it's clicked?

So you have to use another tag than button (for instance span) and manipulate it's behaviour with javascript.

popup in Chrome browser action only if click on down arrow on right side of the icon

I am developing a Chrome extension with browser action. I want to make some action on clicking on browser action icon (it is easy, not a problem), and show popup if user clicks on down arrow at the right side of the icon (that is a problem). So, we will receive a functionality similar to the firefox toolbarbutton from XUL. Is it possible to do such thing with Google Chrome?
Just want to make button, like that:
button
If it is pressed on the main part - it will do something, if on the right "drop-down" part - it will show quick settings page.
But I see only single button possibility.

The entire browserAction button works as a single button. There is no way to detect if a specific area was clicked. The best you can do is either have multiple extensions each having their own button for different actions or have options in the popup that the user selects with a second click.