In the past I have explored multiple solutions, for example the use of CefSharp (see here and here). But that was never the real thing, and there was always a couple issues (caused by the fact that the ‘real’ chrome wasn't being used).
For a while, in the back on my mind the solution was simple and obvious: Use the real Chrome process in a way that it can be programmatically accessed from an O2’s C# repl environment!
Well, the good news is that is exactly what I have done :)
I just created the Gui you can see below, which uses the Window-Hikacking technique to inject an (Selenium's ChromeDriver started) Chrome process' window in a Panel, and pass its reference (as a variable) to an O2 REPL environment.
The script is called Util - Chrome Browser with REPL.h2 and it has:
- The cmd.exe window from the ChromeDriver.exe process in the bottom right
- The Chrome window (started by the ChromeDriver) in the top right
- A C# REPL (with the CromeDriver object passed in as a parameter) in the left
- Open (in Chrome) the http://www.google.com web page
- Find the ‘q’ element (the search text input)
- Send the Keys ‘O2 Platform’ to that element
- Find the element ‘btnG’ (the search button)
- Click on that element
Automating an AngularJS page
The next example is more interesting where we are going to open AngularJS page and programmatically change a $scope variable
Lets look at the code to see what is going on.
The first line opens up an the Url with the sample AngularJS example described here and here
... next I create a number of variables with the url and commands to execute:
It will probably be easier if I break these commands individually:
And this is all programmed in a nice REPL environment, which makes it really easy to try thing out.
For example, here are a couple interesting two way data exchange between the C# script and the
1) get an int value
2) get an string value:
3) get an simple object (converted into dictionary)
4) get an array
5) get the document.location object
6) get the ‘this’ object
7) get the first document.element
8) get the html of the first document.element
9) show an alert
10) getting and using an Html element via ExecuteScript
which will populate the search text value and click on the search icon
What is cool about all these examples is that we are running the code on the local installation of Chrome, ie it is the actually chrome process that we are using, which is great for testing, debugging and developing :)
Scripts used in this post
A) C# code that created the GUI (start chromeDriver and chrome processes and hijack they main window)
B) first code example (open Google and do a search)
C) 2nd code example, open AngularJS page and programmatically change a $scope variable
D) last example where search filed was retrieved using two different techniques: