En el tutorial anterior de creación de robots web que interactuen con sitios web se vió como rellenar campos de un formulario. Practicando un poco más, en este tutorial se verá como iniciar sesión en Facebook.com identificando ciertos atributos HTML de los campos.

Lo primero será reconocer todos los elementos HTML de la página, esto es posible hacerlo a través de una clase que guarda a manera de colección todos estos datos y es HTMLElementCollection.

Si revisamos el código fuente de Facebook.com, es decir, la ventana principal en donde se encuentra el login, cada campo, tanto el de usuario como el de contraseña tienen una estructura así:

<input type="text" class="inputtext" name="email" id="email" value="" tabindex="1">
<input type="password" class="inputtext" name="pass" id="pass" tabindex="2">

Presentan bastante información como el atributo class, id, name y el value, y cualquiera de estos nos sirve para interactuar con los formulario. Veamos el código completo a implementar para llenar el formulario e iniciar sesión paso a paso:

Paso 1: Insertamos un control WebBrowser y lo nombramos “Browser“, luego declaramos la variable que contendrá todos los elementos HTML.

Dim elementos As HtmlElementCollection = Browser.Document.All

Paso 2: Debemos recorrer ahora todos esos elementos en busca de uno que coincida con nuestras especificaciones, creamos un For Each para eso y dentro de él, ubicaremos una variable llamada “elemento” que será de tipo HTMLElement y representará cualquier elemento HTML obtenido de recorrer la colección:

For Each elemento As HtmlElement In elementos
'Más código
Next

Paso 3: Con el For Each ya vamos a recorrer los elementos, pero necesitamos decirle al programa que elemento vamos a buscar y que atributos tiene ese elemento. Entonces, basados en el código fuente de Facebook usaremos el atributo name de los campos y para ello usaremos el método GetAttribute, luego, cambiaremos el value de dicho elemento con SetAttribute:

 If elemento.GetAttribute("name") = "email" Then
     elemento.SetAttribute("value", TxtUser.Text)
 End If
 
If elemento.GetAttribute("name") = "pass" Then
     elemento.SetAttribute("value", Txtpass.Text)
End If

Paso 4: Procesar el formulario. Una vez hemos llenado los campos, procedemos a dar click al botón de entrada o hacer la petición “submit”. Hay varios métodos, uno se trata de usar el número de formulario (empieza desde 0) y se invoca el miembro Submit:

Browser.Document.Forms(3).InvokeMember("submit")

Y el otro método hace uso específicamente del botón de Facebook que dice “Entrar” por lo tanto si leemos el códgio fuente vemos:

<input value="Entrar" tabindex="4" type="submit" id="u5whld_4">

Puedo identificarlo tanto por su value como por el id, y usaría un código así que haría uso del miembro “Click”:

If elemento.GetAttribute("value") = "Entrar" Then
    elemento.InvokeMember("click")
End If

El código fuente completo de nuestra aplicación quedaría así:

Public Class Form1
 
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Browser.Navigate("http://facebook.com")
    End Sub
 
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim elementos As HtmlElementCollection = Browser.Document.All
        For Each elemento As HtmlElement In elementos
            If elemento.GetAttribute("name") = "email" Then
                elemento.SetAttribute("value", TextBox1.Text)
            End If
            If elemento.GetAttribute("name") = "pass" Then
                elemento.SetAttribute("value", TextBox2.Text)
            End If
 
            If elemento.GetAttribute("value") = "Entrar" Then
                elemento.InvokeMember("click")
            End If
        Next
    End Sub
End Class

Descargar ficheros de ejemplo aquí.

En la próxima guía identificaremos mejor como se usa el GetAttribute y el SetAttribute.