How to automatically input in the WebBrowser control - vb.net

Question

I'm quite very amateur in vb.net. When I type a text on textbox, it should be able to automatically input on the webbrowsercontrol and also how to click the button signin, wherein no getelementbyid.
Also I manage to get the 1st part correct, but when I click sign in button from inside browser, there seems to be a minor error. I've made a project like this one before long long time ago and can't find the source code of it anymore, so I'm starting from scratch again.
Website: https://app.coins.ph/welcome/login
Heres my code so far:
Private Sub TextBox1_TextChanged(sender As Object, e As EventArgs) Handles TextBox1.TextChanged
WebBrowser1.Document.GetElementById("username").InnerText = TextBox1.Text
End Sub
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
For Each Element As HtmlElement In WebBrowser1.Document.GetElementsByTagName("class") 'Depending on how the source code is formatted on the tag, you may also try Element.OuterHTML, Element.InnerText and Element.OuterText in the line below
If Element.OuterText.Contains("SIGN IN") Then
Element.InvokeMember("click")
Exit For
End If
Next Element
End Sub
Private Sub TextBox2_TextChanged(sender As Object, e As EventArgs) Handles TextBox2.TextChanged
WebBrowser1.Document.GetElementById("password").InnerText = TextBox2.Text
End Sub

Answer 1

You've got a couple of issues here. Let's start with the textbox inputs. If you look at the html source for that website's sign-in page, the inputs for username and password do not have an ID property, they only use Name. Moreover, GetElementsByTagName is searching for a html element of "username", not an "input" as it should. Given both of those issues, you should be using Document.All("[elementName]") to access those inputs. As for the sign-in part, as stated before, GetElementsByTagName is looking for html elements, so searching for the value "class" is not going to return anything you want. Instead, you should be looking for a "button" where the OuterText contains "SIGN IN". With all those changes applied, the code becomes:
Public Class Form1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
WebBrowser1.Navigate("https://app.coins.ph/welcome/login")
End Sub
Private Sub TextBox1_TextChanged(sender As Object, e As EventArgs) Handles TextBox1.TextChanged
WebBrowser1.Document.All("username").InnerText = TextBox1.Text
End Sub
Private Sub TextBox2_TextChanged(sender As Object, e As EventArgs) Handles TextBox2.TextChanged
WebBrowser1.Document.All("password").InnerText = TextBox2.Text
End Sub
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
For Each Element As HtmlElement In WebBrowser1.Document.GetElementsByTagName("button")
If Element.OuterText.Contains("SIGN IN") Then
Element.InvokeMember("click")
Exit For
End If
Next Element
End Sub
End Class
There is another problem once you run this code though
If you run the above example, you will see that the form-fields are properly filled in and the sign-in button is clicked successfully, however an error appears indicating that the form fields are still blank. Even if you use WebBrowser1.Document.All("username").SetAttribute("value", TextBox1.Text) to set the input's value as well, the same error occurs. This is likely because the website's developers are using some sort of javascript that is detecting keypresses for one reason or another...it's impossible to know why, but that's how it is. So you're left with actually simulating key presses yourself. If you do that, the website will successfully log in with the username and password. You have two ways of doing this. The cleaner way is to just send all the keys at once and log in like so:
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
WebBrowser1.Focus()
WebBrowser1.Document.All("username").Focus()
For Each c As Char In TextBox1.Text.ToCharArray
SendKeys.SendWait(c)
Next
WebBrowser1.Document.All("password").Focus()
For Each c As Char In TextBox2.Text.ToCharArray
SendKeys.SendWait(c)
Next
For Each Element As HtmlElement In WebBrowser1.Document.GetElementsByTagName("button")
If Element.OuterText.Contains("SIGN IN") Then
Element.InvokeMember("click")
Exit For
End If
Next Element
End Sub
However, if you still want each character to appear as you type, to mirror the functionality of the TextChanged event logic you are currently using you would have to use the KeyPress event and basically forward the keystrokes like this:
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
For Each Element As HtmlElement In WebBrowser1.Document.GetElementsByTagName("button")
If Element.OuterText.Contains("SIGN IN") Then
Element.InvokeMember("click")
Exit For
End If
Next Element
End Sub
Private Sub TextBox1_KeyPress(sender As Object, e As KeyPressEventArgs) Handles TextBox1.KeyPress
WebBrowser1.Focus()
WebBrowser1.Document.All("username").Focus()
SendKeys.SendWait(e.KeyChar)
TextBox1.Focus()
End Sub
Private Sub TextBox2_KeyPress(sender As Object, e As KeyPressEventArgs) Handles TextBox2.KeyPress
WebBrowser1.Focus()
WebBrowser1.Document.All("password").Focus()
SendKeys.SendWait(e.KeyChar)
TextBox2.Focus()
End Sub