New project.
Add a button on top of your main form. Text: Navigate.
Add a web browser to your form, make it large enough.
Go to your hard drive and create a new text document: Right mouse click -> New -> Text Document.
Open the document and insert this inside:
<html>
<body>
<input name="input1box" size="20" maxlength="24">
</body>
</html>
Go to File -> Save As -> Change "Save as Type" to: All Files -> "Filename": Elements.html -> Save.
Double click on the new "Elements.html" file to open it in your default web browser.
One input box should be the only thing appearing in the html page.
Copy the address from the address bar of your web browser.
Go to design page, double click on the "Navigate" button, and write this inside:
WebBrowser1.Navigate("")
- inside the quotation marks paste your "Elements.html" address.
Start the program, press the button and see if the html input textbox is there.
Go to your hard drive, right click on the "Elements.html" file and choose "Notepad", if this choice is not present in your context menu, click "choose default program" and find "Notepad.exe" in C:\windows.
Keep the html file opened.
We can see that the textbox has 3 attributes: name, size and maxlength. It doesn't have to have any, it could simply be written: <input>. If we don't change any attributes, they will be set to their default value.
The attribute called "value" in the html code is like the "text" property in visual basic. When we change it, we change the text of an input box or a button or anything else. In this example, the value attribute is not determined, so the input box is empty.
Double click on the Web Browser control in the design page, insert this:
For Each i In WebBrowser1.Document.All
If i.GetAttribute("name") = "input1box" Then
i.SetAttribute("value", "Something")
End If
Next
- we look through all the elements of the html page, if we find one that has a "name" equal to "input1box" then we change it's "value" attribute to "Something".
We could have looked for the element by using any of the attributes that are present in it's code, and then set a new value to any of the attributes that the input box can have. (Resource)
Go to your Elements.html file, change this line:
<input name="input1box" size="20" maxlength="24">
into this:
<input name="input1box" size="20" maxlength="24"> </br>
<input id="885037_gm4" name="box2" size="26">
- save the .html file. We should now have two textboxes when we navigate to our "elements" file.
</br> adds a new line. The new input box has the "id" attribute, which is also found in source codes of many websites. It must have a unique value on the web page, and because of that we have a method that can help us search elements through it and change their attributes.
Inside the webbrowser sub, below "next", add this:
WebBrowser1.Document.GetElementById("885037_gm4").SetAttribute("value", "the new text")
- we find the element by it's unique id and change one of it's attributes.
Change the .html code again, add this below the previous one:
<input id="885037_gm7"class="textbox" placeholder="search" tabindex="1"></br>
<input type="submit" onclick="alert('Clicked')"> </br>
- adds another input box and a button created with the "input" tag.
Go to the web browser sub, inside the "for each" loop, below the previous "if" statement add this:
If i.GetAttribute("id") = "885037_gm7" Then
i.Focus()
End If
- start program, click the "navigate" button, the third input box will have the blinking text cursor placed inside.
Add another "if" statement below the previous one:
If i.GetAttribute("type") = "submit" Then
i.InvokeMember("click")
End If
i.InvokeMember("click") - this is the code we will use to click on a html button element.
onclick="alert('Clicked')" - will confirm to us that the button has been clicked.
Using the message box might remove the focus from the previous html textbox.
Go to the html file again, add this:
<button onclick="alert('Clickerr')"> Press </button> </br>
<select id="sel_44313">
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
<option value="fourth">Fourth</option>
</select></br>
<select id="new id 553">
<option value="1">Car</option>
<option value="2">Tree</option>
<option value="3">Person</option>
<option value="4">Dog</option>
</select>
- save file. This will add a regular html button to the html page, and 2 comboboxes with choices.
Inside the "for each" loop of the webbrowser sub, add this:
If i.InnerText = "Press" Then
i.SetAttribute("innertext", "Click instead")
i.Focus()
SendKeys.Send("{ENTER}")
End If
- we find the element by it's inner text and then we modify it. We also transfer the cursor focus to the button and send the "enter" key to press on it, instead of using a mouse click.
Below the "for each" loop insert this:
For Each i In WebBrowser1.Document.GetElementsByTagName("select")
If i.GetAttribute("id") = "sel_44313" Then
i.SetAttribute("value", "third")
ElseIf i.GetAttribute("id") = "new id 553" Then
i.SetAttribute("value", 4)
End If
Next
- we find the comboboxes by their "id" numbers, and change their selected item.
<body>
<input name="input1box" size="20" maxlength="24"> </br>
<input id="885037_gm4" name="box2" size="26"></br>
<input id="885037_gm7"class="textbox" placeholder="search" tabindex="1"></br>
<input type="submit" onclick="alert('Clicked')"></br>
<button onclick="alert('Clickerr')"> Press </button> </br>
<select id="sel_44313">
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
<option value="fourth">Fourth</option>
</select></br>
<select id="new id 553">
<option value="1">Car</option>
<option value="2">Tree</option>
<option value="3">Person</option>
<option value="4">Dog</option>
</select>
</body>
</html>
Visual basic code:
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
WebBrowser1.Navigate("file:///D:/Elements.html")
End Sub
Private Sub WebBrowser1_DocumentCompleted(ByVal sender As System.Object, ByVal e As System.Windows.Forms.WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
For Each i In WebBrowser1.Document.All
If i.GetAttribute("name") = "input1box" Then
i.SetAttribute("value", "Something")
End If
If i.GetAttribute("id") = "885037_gm7" Then
i.Focus()
End If
If i.GetAttribute("type") = "submit" Then
i.InvokeMember("click")
End If
If i.InnerText = "Press" Then
i.SetAttribute("innertext", "Click instead")
i.Focus()
SendKeys.Send("{ENTER}")
End If
Next
For Each i In WebBrowser1.Document.GetElementsByTagName("select")
If i.GetAttribute("id") = "sel_44313" Then
i.SetAttribute("value", "third")
ElseIf i.GetAttribute("id") = "new id 553" Then
i.SetAttribute("value", 4)
End If
Next
WebBrowser1.Document.GetElementById("885037_gm4").SetAttribute("value", "the new text")
End Sub
End Class
Try navigating to a real website and change some of it's elements.
Modifying the values of elements with a web browser shouldn't be that difficult. The main thing is to be able to find the exact element we want in the source code.
Remember:
all the possible options that appear in the code after writing: "Webbrowser1.Document.Body." you can use in the "for each" loop for "i." - although the menu might not appear there.
like:
MsgBox(i.OuterHtml)
If you knew the order number of an element in a group of elements of the same type, like "input", you could use the "item" property to change it's value. Let's say you wanted input box number 3:
WebBrowser1.Document.GetElementsByTagName("input").Item(2).SetAttribute("value", "thiss")
- this will change the third "input" element, the first one would be Item(0)
