Friday, 25 January 2013

GUI with WebStorm and JsTestDriver controlling 3 Hijacked Browser windows (Chrome, Firefox and IE)

Following from PoC - Selenium - Gui with 3 Hijacked Browser Windows and  Running JavaScript TestCase Unit Tests using JsTestDriver (in WebStorm)  here is a similar PoC, now with JsTestDriver controlling 3 Browsers in the same GUI:

image

This .NET GUI was created by Hijacking 4 windows from 4 different processes (each running natively in the background):
  • top left: WebStorm (with JsTestDriver)
  • top right: Chrome
  • bottom left: Firefox
  • bottom right: IE


The test executed is an ASyncTestCase, which does some jQuery based DOM interaction. Note (below) the animation value in all browsers:

image

What is great about this technique is that we are able to create Html elements inside the test, and access them via jQuery

image

How to create this ‘WebStorm + 3 Browsers Gui’ ?

In the O2 Platform open the Util - Win32 Window Handle Hijack (4x host panels ).h2  script (see this post for more details about this H2 script)

image


The script’s GUI will give you 4 Window Handle Hijack panels:

image

To Hijack a window drag the target into the desired process (note the Handle value that changes as you hover a particular window):

image

Click on the Hijack link to grab that link

image

Next open chrome and hijack its window

image

After clicking on Hijack, note that the window is still in its relative position (i.e. relative to the main windows Desktop)

image

To fix that,  maximize the Chrome window (now inside the O2 GUI)

image

Next open a Firefox window, and drag-n-drop the target into it (to hijack its window)

image

And finally, do the same thing for IE:

image

After this, the 4x Hijack Gui should look like this (with WebStorm and the 3 browser windows):

image

Note that at this stage there are no browsers captured by JsUnitDriver:

image

To capture the browsers (and register them into the JsTestDriver Server), all we need to do is to open the http://localhost:9876/capture on all browsers (note the link in the TextBox inside the JsTestDriver Server's WebStorm View)

Once http://localhost:9876/capture is loaded in all browsers:

image

We can run the tests

image

Which should execute OK.

In this example we are failing on purpose the test greet null for both Firefox and Chrome (see Running JavaScript TestCase Unit Tests using JsTestDriver (in WebStorm) for an explanation of the UnitTest that does this)

image

I have to say that I really like the fact that to 'capture' a browser all we need is to open the http://localhost:9876/capture web page in the target browser. This is a much better (and scalable) solution, since we don't need to install specific browser's connectors (like Selenium WebDrivers).

I'm also thinking that we could use this for remote and client debugging of issues (as in: "...ok mr client, please point your browser to http://qa-tests.teammentor.net:9876/capture and we will run the tests from there..." )

References:

See links at the end of the PoC - Selenium - Gui with 3 Hijacked Browser Windows.h2 post for detailed information on the Windows Hijack technique used to create the unified GUI.
Post a Comment