Invoking jQuery from O2
jQuery is an amazing javascript API and since O2 has a two-way communcations with the hosted IE object, there is a new O2 API that allows the managed (ie. in O2) manipulation of jQuery.
Here is an exampe of this api in action:
var topPanel = "PoC - jQuery IE Automation example".popupWindow(600,700); var ie = topPanel.add_IE().silent(true); ie.open(<a href="http://jquery.bassistance.de/autocomplete/demo/">http://jquery.bassistance.de/autocomplete/demo/</a>); var jQuery = new IE_JQuery(ie); jQuery.id("suggest1") // getting reference to html element with id 'suggest1' .border(12) // seeting the border value to 12 .value("London") // setting the 'value' attribute to 'London' .keydown(); jQuery.wait(200) // wait 200 ms to give time for the '.ac_over:first' to exist .element(".ac_over:first") // get reference to '.ac_over:first' element .parent() // invoke the jQuery 'parent' method .click(); // invoke the jQuery 'click' method jQuery.wait(1000).id("suggest1").border(2); // wait 1s before removing the border</pre> return "ok"; //O2File:IE_JQuery.cs //O2File:WatiN_IE_ExtensionMethods.cs //using O2.XRules.Database.Utils.O2 //O2Ref:WatiN.Core.1x.dll
Here is a longer version of the above script (the following code samples are not ‘standalone *.h2 scripts and will need to be executed inside the ‘Quick Development Environment’ or ‘IE Automation’ scripts (since they need the ‘panel’ variable):
panel.clear(); var ie = panel.add_IE().silent(true); ie.open("http://jquery.bassistance.de/autocomplete/demo/"); var jQuery = new IE_JQuery(ie); jQuery.id("suggest1") // getting reference to html element with id 'suggest1' .border(12) // seeting the border value to 12 .value("London") // setting the 'value' attribute to 'London' .keydown(); jQuery.wait(200) // wait 200 ms to give time for the '.ac_over:first' to exist .element(".ac_over:first") // get reference to '.ac_over:first' element .parent() // invoke the jQuery 'parent' method .click(); // invoke the jQuery 'click' method jQuery.wait(1000).id("suggest1").border(2); // wait 1s before removing the border return "ok"; // here is a more verbose version of the above script ie.wait(1000); jQuery.element("#suggest1").border(12); jQuery.id("suggest1").attr("value","Lond").keydown(); ie.wait(200); jQuery.element(".ac_over:first").parent().click(); // here is a version using much more raw jQuery manipulations and experiements ie.invokeEval("jQuery(\"#suggest1\").attr('value','mode 1')"); ie.wait(1000); jQuery.invokeJQuery("'#suggest1').attr('value','mode 2'"); ie.wait(1000); jQuery.element("#suggest1").invokeJQuery("attr","'value' , 'mode 3' "); ie.wait(1000); jQuery.element("#suggest1").attr("value","L"); ie.wait(1000); jQuery.id("suggest1").invokeJQuery("trigger", "'keydown'"); ie.wait(1000); jQuery.element(".ac_over:first").invokeJQuery("parent","").invokeJQuery("click",""); return "done"; //O2File:IE_JQuery.cs //O2File:WatiN_IE_ExtensionMethods.cs //using O2.XRules.Database.Utils.O2 //O2Ref:WatiN.Core.1x.dll
Here is the Script provided by an Daniel (an O2 user) which inspired the creation of this script:
panel.clear(); var ie = panel.add_IE().silent(true);</pre> ie.open("http://jquery.bassistance.de/autocomplete/demo/"); //ie.invokeEval(incJquery); ie.field("suggest1").value("London"); //entering value inside first autocomplete control ie.invokeEval("$('#suggest1').trigger('keydown')"); //triggering keyboard event ie.wait(100); ie.invokeEval("$('.ac_over:first').parent().click()"); //choosing first value from autocomplete return ie.fields(); //O2File:WatiN_IE_ExtensionMethods.cs //using O2.XRules.Database.Utils.O2 //O2Ref:WatiN.Core.1x.dll
this is how Daniel was injecting jQuery into the page (note that the IE_JQuery.cs api also does this)
var incJquery = "var script = document.createElement('script');"; incJquery += "script.src = 'http://code.jquery.com/jquery-latest.pack.js';"; incJquery += "script.type = 'text/javascript';"; incJquery += "document.body.insertBefore( script, document.body.firstChild );"; ie.invokeEval(incJquery);