Today I will talk about using the WebBrowser control that ships with all versions of Microsoft Visual Studio, to access the DOM of an HTML page. This control is a wrapper for the WebBrowser ActiveX control, or basically, whichever version of Internet Explorer you have installed on your machine. As a result, you can only ask it to do things depending on whatever version you have installed. At the same time, the pages will render using that version of IE, and not the latest. So, if you desire to get full advantage of this control, you should probably install the latest IE version available (or Microsoft Edge, if you are using Windows 10).

The purpose of this control is to provide your users with the ability to see Web content in your Winform or WPF applications. You can also access the WebBrowser class directly by using the System.Windows.Forms.WebBrowser class. There are times when you don’t want the user to directly interact with the WebBrowser however. What you do instead, is to provide the users with other controls, and manipulate the WebBrowser’s Document (DOM) property. For example, let’s suppose you have a registration system on your website, and you want users to register from your Winform application, but don’t want the application to have a WebBrowser, and you haven’t created APIs to do this yet. You could create a Form on your application with textboxes, and then use a WebBrowser to access your registration page, hide it, pass the Form’s data to the page by manipulating the DOM, submit the web form, and wait for a response page. Now, this is not necessarily going to be pretty, but it could be an alternative when you don’t have the resources to do it the right way.

Whatever the reason you want to use the WebBrowser may be, you could automate a lot of things taking advantage of this control (I have used it countless times, and it have saved me from a lot of headaches). So, how do we go about doing this? Well, let’s work on a little example, shall we?

Manipulating the WebBrowser’s DOM to Login to Facebook

This example is for educational purposes only. Facebook provides APIs to do things like this, and you should use them whenever you can. The same if your own site contains APIs or services you can use instead. So, do not use this example to abuse Facebook, or any other site for that matter.

1. Create a new Winform project.
2. On the default form, drag and drop a WebBrowser control. This can be found at the bottom of the “Common Controls” toolbox. The WebBrowser will cover the entire Form by default. You may change this behavior if you wish.
3. Access the Form’s Load event, and add the following line of code:

private void Form1_Load(object sender, EventArgs e)
{
    webBrowser1.Navigate("http://www.facebook.com");
}

This line is pretty self-explaining. You are asking the WebBrowser to go to the Facebook page. Now, not a lot of people use Internet Explorer, but if you do, please make sure you are logged out of Facebook before you compile and run. Otherwise, you will not see the login form.

4. We will now handle the DocumentCompleted event of the WebBrowser. This event triggers when a Document has completed loading.

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    //validate that you are in the login page
    webBrowser1.Document.GetElementById("email").InnerText = "myemail@mydomain.com";
    webBrowser1.Document.GetElementById("pass").InnerText = "123456";
    webBrowser1.Document.GetElementById("login_form").InvokeMember("submit");
}

Done!

If you run the project, you will notice that the browser will go to Facebook, and will fill up the textboxes, and submit itself. Notice that the GetElementById method works exactly like the one in JavaScript. Also, the InvokeMember method will be very useful. You can invoke/trigger other methods on HTMLElements such as click, change, etc.

You can use your imagination to take advantage of the WebBrowser control. Make sure to always use your favorite browser’s Developer Tools to access the pages DOM, and get the ID’s of the elements, or class names etc.

There are other tools you can use to access the HTML or DOM of a web document, such as HTMLAgilityPack, but that will be the topic of another entry.