This site requires JavaScript to be enabled
IE BUMPER

We're currently experiencing some technical difficulties with our Chat channel. To resolve those issues please clear your browser cache and reload the page. Further information: Atricle NEW0000472

Product
Version
Incident
Language
How can we help?

Solution Suggestions

Please enter your question to get suggestions.
  Help
IE BUMPER
Categories
Boolean Operators
OR or vertical bar symbol (|)
Finds a match if either the terms exist in a document (a union using sets).
AND
Finds a match if both terms exist in a document (an intersection of sets).
NOT, minus (-), or exclamation point (!)
Excludes documents that contain the term after NOT (a difference of sets).
Wildcards
Asterisk (*)
The asterisk symbol performs a multi character wildcard search.
Percent sign (%)
The percent sign performs a single character wildcard search.
Phrases
Quotation marks (")
Use quotation marks to search for an exact phrase with multiple terms.
For examples and more information look at our Knowledge Base: Advanced Search On The Support Portal

Scanning Disappearing HTML Elements

A quick way to scan of most kinds of disappearing elements.


Situation

A tooltip, dropdown, custom combobox or other kind of control that requires your mouse to be in a certain place to be visible can make scanning hard when they disappear. The following approach will allow you to work with most javascript based UIs.

Note: This approach does not work for elements inside iframes. For a method that works inside iframes for tooltips see KB0014196

Solution

Open developer tools in your browser of choice (F12), navigate to the console and input the following code:

var fulldoc='';
var scrollX=0;
var scrollY=0;

document.addEventListener("keydown",function(event){
	if(event.key=='q' && event.altKey){
		fulldoc=document.body.outerHTML;
		scrollY=window.pageYOffset;
		scrollX=window.pageXOffset;
	}
	if(event.key=='w' && event.altKey){
		document.body.outerHTML=fulldoc;
		document.body.scrollTo(scrollX,scrollY);
	}
});

 

Close developer tools and do whatever you need to in the user interface to trigger the expected element.

When the window looks the way you would want to scan, press 'Alt+q', then press 'Alt+w'. If any scrolling in the viewport was nested inside other containers you may need to scroll in order to re-align things.

You should now be able to scan the page.

Once you're done scanning, you'll need to refresh to restore functionality to your page.

 

What's going on here?

The controls used here are:

  • ALT+Q - Save the current html and scroll parameters of the page to memory
  • ALT+W - Replace the html and scroll on display with what's currently stored in memory.

This makes a copy of the page when you use the first command, and inserts it back in when you use the second, with one critical difference: There are no javascript event listeners below the body level on the page anymore. This will freeze all interactivity that isnt tied to the document body, allowing for an easy scan.

0 0

Nikita Illarionov

Created: 2019-09-12 18:43:41 , Updates: 1, Last Update: 2019-09-12 19:10:47

Hey Louis,

this is really useful and I wanted to try it for my project. I opened the developer tools, pasted this snippet in "Console", closed the developer tools, but it didnt work out. The javascript alert still fades away. I tried with IE 11.1331 and Chrome 76.0.3809.132.

When I press "Alt + W", the javascript alert disappears. Thx.

0 0

Christian Mark Mangulabnan

Created: 2020-08-25 09:33:43

I pasted this and it says "undefined". 

Pasquale Porziungolo

2020-08-26 10:50:10

me too

0 0

Vishal Chaudhry

Created: 2020-10-12 07:03:56

var fulldoc='';
var scrollX=0;
var scrollY=0;

document.addEventListener("keydown",function(event){
    if(event.key=='q' && event.altKey){
        fulldoc=document.body.outerHTML;
        scrollY=window.pageYOffset;
        scrollX=window.pageXOffset;
    }
    if(event.key=='w' && event.altKey){
        document.body.outerHTML=fulldoc;
        document.body.scrollTo(scrollX,scrollY);
    }
});
undefined

 

Getting undefined

1 0

Bernard Kessens

Created: 2021-01-05 15:41:35

Hi all. 
I had the same problem, scanning a 'tooltip' that appears after a 'mouseover' of a menu item.

I also got the 'undefined' message and I googled how to declare variables and found a solution!

If you create a funtion with the code above and then call the function, it worked for me.

Declare the function as follows in the Console, for example call it 'freezeScreen':


function freezeScreen() { 

[CODE FROM SOLUTION ABOVE IN GREY TEXTBOX]

}

And click: ENTER

Then 'call' the function as follows: freezeScreen();

And click: ENTER. Then go to the screen with the disappearing element.

And follow the steps with Alt-Q and ALt-W.

I have to say: it did not work always, but I managed to 'freeze the screen' and scan the tooltip after a few tries!

Good luck!

0 0

Nidhi Bihani

Created: 2021-06-09 05:26:27 , Updates: 1, Last Update: 2021-06-09 05:27:25

Hi All,


None of the above solutions worked for me. I tried below and it worked.


I executed below command in console to get into debugger mode.

setTimeout(function(){debugger;}, 5000)


I paused the debugger and through inspect element in Elements section noted the object properties like tag is span / div and the class name. Then I closed the developer mode and my object also disappeared. Then I started scanning the page through Tosca and added similar span object. Then manually edited the class name that I had captured above while inspecting the element.


Then executed my test case in from start till verifying the message and then Tosca was able to verify the flyout message. Below is my test step, first I waited for that object and then verified.