In RC0 we also built a cool little feature that was not really planned. Although this feature is not critical to performing automated testing, it can help many automators follow their test execution visually and figure out what their test code is doing step-by-step.
The Annotator can easily be enabled by setting the AnnotateExecution flag to true. This flag is part of WebAii's Settings object so it can be set both in app.config or programmatically using the Settings object. Once this flag is set, each automation action will be annotated on your browser surface. For example, the following two lines:
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Lucida Console;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf11 // Set Google's search text to 'ArtOfTest'\par ??\cf0 Find.ByName<\cf10 HtmlInputText\cf0 >(\cf13 "q"\cf0 ).Text = \cf13 "ArtOfTest"\cf0 ;\par ??\par ?? \cf11 // Click Google's search button\par ??\cf0 Find.ByName<\cf10 HtmlInputSubmit\cf0 >(\cf13 "btnG"\cf0 ).Click();\par ??}
-->
// Set Google's search text to 'ArtOfTest'
Find.ByName<HtmlInputText>("q").Text = "ArtOfTest";
// Click Google's search button
Find.ByName<HtmlInputSubmit>("btnG").Click();
Will annotate as follows:
If you wish to output your own annotations per Html element or simply output messages to the browser you can easily do that using the Actions object. The following lines:
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Lucida Console;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf11 // Output a custom message by the search textbox.\par ??\cf0 Actions.AnnotateElement(Find.ByName(\cf13 "q"\cf0 ), \cf13 "This is the google search text box"\cf0 );\par ??\par ?? \cf11 // Output a general message to the browser window.\par ??\cf0 Actions.AnnotateMessage(\cf13 "Now running Find.Byxx tests"\cf0 );\par ??}
-->
// Output a custom message by the search textbox.
Actions.AnnotateElement(Find.ByName("q"), "This is the google search text box");
// Output a general message to the browser window.
Actions.AnnotateMessage("Now running Find.Byxx tests");
Output annotations as follows:
And last but not least, this feature won't be complete if the developers didn't get the option to format their own annotation styles and colors :). You can easily customize the colors/fonts to your liking by using the Settings off each annotator object.
For example I can customize my message as follows:
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Lucida Console;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 ActiveBrowser.Annotator.Settings.FontemSize = 12;\par ?? ActiveBrowser.Annotator.Settings.FontStyle = System.Drawing.\cf10 FontStyle\cf0 .Bold;\par ?? ActiveBrowser.Annotator.Settings.BackColor = System.Drawing.\cf10 Color\cf0 .AliceBlue;\par ?? ActiveBrowser.Annotator.Settings.Color = System.Drawing.\cf10 Color\cf0 .DarkKhaki;}
-->
ActiveBrowser.Annotator.Settings.FontemSize = 12;
ActiveBrowser.Annotator.Settings.FontStyle = System.Drawing.FontStyle.Bold;
ActiveBrowser.Annotator.Settings.BackColor = System.Drawing.Color.AliceBlue;
ActiveBrowser.Annotator.Settings.Color = System.Drawing.Color.DarkKhaki;
Which will output:
If anyone has feedback on what else they would like to see added to this feature, feel free to send us a note or leave us a comment on our blog.
HINT: You should use this feature while setting the ExecutionDelay off the (Settings) also to some value so that you can slow down the execution of tests and follow the execution easier. Place the following two lines of code at the beginning of your tests to get annotation going.
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Lucida Console;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 Manager.Settings.AnnotateExecution = \cf2 true\cf0 ;\par ?? Manager.Settings.ExecutionDelay = 500;\par ??}
-->
Manager.Settings.AnnotateExecution = true;
Manager.Settings.ExecutionDelay = 500;