General Requirement:

• Design and build a useful Internet Explorer plug-in to record the user actions and turn it to a Watir test script.

Detailed Requirement:

• Create an Internet Explorer Plug-in that has a tool bar that looks like Webmetric’s Script Recorder but I will implement just two buttons: Start and STOP buttons.

  

• When the START button is clicked, all user actions will start being recorded.
• When the STOP button is clicked, the recording will stop. And a window will pop up with where the script has been saved to.
• Limitation
  
  • The recording will always be saved to the same file called “MyRecording.rb”.

Required Development Tools and Libraries:

• Ruby
• Watir
• Asynchronous Pluggable Protocol
• Web Browser Control
• ArrayList Data Container
• Windows Template Library
• ATL
• Visual Studio 2008 (90-days trial version)
• Windows Platform SDK

Estimated Time for Completion:

• 24 hours ( already spent 12 hours; the implementation should take about 12 hours)

Time Already Spent to Overcome Learning Curve:

• Set up and Get Familiarized with the Development Environment (3 hours):
  • Downloaded, installed, and got acquainted with Visual Studio 2008. Obtained sample VC++ projects from Microsoft site and get most of them to build on my Windows XP machine
  • Downloaded and installed the Ruby and Watir test environment. Studied several Watir scripts from Watir and OpenQA sites.
• Learned How to Create a New Protocol, Register it, and Create Protocol Handlers, using Asynchronous Pluggable Protocols (3 hours)
  • Read Asynchronous Pluggable Protocols reference page from MSDN
  • Found a sample project which demonstrates how to create a new protocol, register that protocol, and invoke that protocol from IE.
  • Studied this project (David M Brooks’ “Custom Hyperlinks Using Asynchronous Pluggable Protocols” ) and took notes of relevant codes .
• Learned How to Create and Add a Custom Toolbar to IE (2 hour)
  • Read Adding Toolbar Buttons page on MSDN
  • Searched for and found a sample project. This sample project demonstrates how to add a costume toolbar to process RSS feed.
  • Studied this sample project (Prafulla Tekawade’s RSS Reader Plug-in for Internet Explorer) and took notes of relevant codes.
• Learned How to Catch the User Clicking Events When Users Click a Link or Enter a new URL( 2 hours)
  • Read WebBrowser Control page on event handling
  • Searched for and found a sample project. This sample project demonstrates how to catch when users hit the refresh button. Got the sample project to build.
  • Study this sample project (Steven Fox’s “Detecting the IE Refresh button using IWebBrowser2 and DWebBrowserEvents2 events“) and took notes of relevant codes to be used in WSG project.
  • Modified the sample project so that the new link events are caught, instead of the refresh events. Of course, the ideal is to catch all events, but I’d like to keep it simple for now.
• Created a preliminary design for WSG plug-in after overcoming the learning curve (2 hour)

Essential Classes in Preliminary Design:

• Watir Script Writer:
  • This class will handle writing and saving a valid Watir script
• Watir Script Executor:
  • This class will handle executing a Watir script. It will also handle invalid scripts.
• IE Content Events Handler
  • This class will handle events fired when users click links on the pages or when they enter a new URL in the address field
• WSG Toolbar Events Handler
  • This class will handle events fired when users click buttons in the WSG toolbar to start or stop the recording

References and Sample Code:

1. Watir site
2. MSDN’s Internet Explorer Development reference page
3. Asynchronous Pluggable Protocols reference page from MSDN
4. Prafulla Tekawade’s “RSS Reader Plug-in for Internet Explorer” project from The Code Project site
5. David M Brooks’ “Custom Hyperlinks Using Asynchronous Pluggable Protocols” project from The Code Project site
6. Steven Fox’s “Detecting the IE Refresh button using IWebBrowser2 and DWebBrowserEvents2 events” project from The Code Project site

Best Practice for Creating Dlls from Windows Hardware Developer Central

Here are the steps I took to get this plug-in working.

1. Search for available ways/templates to create an IE plug-in

Unfortunately I could not find any Internet Explorer plug-in template, neither from Visual Studio 2008 nor from MSDN nor from googling.

1. Search for open source code snippets or project

After a bit digging, I found a relevant and promising project: Prafulla Tekawade’s RSS Reader Plug-in for Internet Explorer.

1. Tried to get this project to build

I first tried using Visual C++ 2008 Express but to no avails because of missing libraries. I finally had to download and install the 90-day trial version of Microsoft Visual Studio, which I highly recommended. It’s very easy to use and it’s free!! Three months should be enough time for you to get your feet wet (very wet) with developing Visual C++ programs.

I had to make the following changes to port this RssReaderPlugin, a Visual Studio 6.0 project, to a Visual Studio 2008 project. First, double click RssReaderPlugin.sln to start Visual Studio 2008.

The Visual Studio Conversion Wizard would pop up. Click “Next”.

Keep the default setting (create a backup file) and click “Next” to continue.

Click “Finish”.

Then click “Close” to close the windows.

When the solution is open, build it by “Build”->”Build Solution”.

But you will see this error: “Error C2061: syntax error : identifier ‘IWebBrowser2′. Double click the error to get to the violating line.

The IWebBrowser2 class is included in <Exdist.h>. Add the include statement to get rid of all IWebBrowser2 related errors.

Build again. This time you will get another error :”error C2664: ‘ATL:CWindowImpl<T,TBase>::Create’ : cannot convert parameter 2 from ‘int’ to ‘RECT &’. Double click to get to the violating line.

Change the second argument from NULL to rect.

Build again. This time it should build without error.

Note that at this point, not only is this project built, the DLL also has been installed, because the author very considerably adding Custom Build Steps. To view, right click the project name and select “Property” from the drop down list.

This is the full Command Line entry for Custom Build Step.

Another way you can register the DLL is by using the register.bat already in the Debug directory.

Start a new Internet Explorer instance. The Rss Reader Toolbar already has been enabled.

To view the Rss Reader entry from the list of Internet Explorer Add-ons, click “Tools”->”Manager Add-ons”->”Enable or Disable Add-ons”.

There is Rss Reader Toolbar.

To add it to the viewable panel, go to “View”->”Toolbars”, then click “Rss Reader Toolbar” to check it.

Then you should see a RssReader toolbar.

Now let’s try running it. Click “Top Story button”.

Ouch! You would see a Debug Assertion Failed message. Don’t worry – we will take care of it. Click “Retry”.

Make sure that RssReaderPlugin project is open and select it from the Possible Debuggers list.

Click Break.

Go to the source panel. You should see a small Yellow Arrow, indicating the breakpoint. This line tells us that uFormat contains DT_MODIFYSTRING option, which tells DrawText to modify the specified string to match the displayed text. This value has no effect unless DT_END_ELLIPSIS or DT_PATH_ELLIPSIS is specified. This option is only allowed for Windows CE platform (_WIN32_WCE).

To find out where DT_MODIFYSTRING option is set (we need to unset it), use the Find and Replace tool from Visual Studio (also available in the Express edition). Go to “Edit”->”Find and Replace”.

Click the first find, which is on line 263 of RRPNewsButton.cpp and delete all DT_MODIFYSTRING from the OR combo.

Click the second find, which is on line 347 of RRPNewsButton.cpp and delete all DT_MODIFYSTRING from the OR combo.

To compile, click the Stop Debugging button.

Click Continue to keep running to the end.

Then now rebuild and re-register the DLL. This time it should work without throwing exception.

To view the RSS feed from shallwelearn.com, click the RSS feed button.

You will be taken to the RSS page of shallwelearn.com, which is:

http://shallwelearn.com/index.php?format=feed&type=rss

To set the RSS page to shallwelearn’s RSS feed, click “Rss Reader” to open the Configuration Settings Window.

Right now the code will always just shows the first one in the RSS item list, which is “Top Stories”, so we copy and paste the ShallWeLearn RSS feed as the Link of the RSS of the Top Stories. Click Save to save.

Then “Cancel” to close the pop-up window.

Now if you click Top Stories button, you should see the updated RSS feed.

DONE!! In Next Article of this Series, I will use this project as a template to start create my own toolbar.