Conceptos generales de trabajo

En Selenium WebDriver nos manejamos con los elementos de la página de prueba. Esto es que trabajamos con los elementos definidos por las etiquetas html de la página web en cuestión.

En un documento html pueden existir muchas etiquetas que definen diferentes tipos de elementos de la página como ser: Links, Botones, campos de texto, área de texto, Selects, Checkbox, Radio button, tablas, celdas, filas, columnas, listas,  spans, etc.

A su vez, los elementos están definidos por diferentes atributos y es en base a esos atributos que Selenium busca para halla el elemento deseado en cada caso.
Existe infinidad de documentos, información y tutoriales sobre html en la web.
El mejor de los casos es que cada elemento disponga del atributo ID, lo que indicará que ese elemento tendrá un identificador único dentro de todo el dócumento, por lo tanto no habrá conflictos con otro elemento de similares atributos (que no sean id).

Por ejemplo, se tiene el siguiente formulario (form) de un simple login a un sitio

<form id="loginForm" >
   <input class="inputField" type="email" name="email" id="loginForm_1">
   <input class="password" type="password" name="password" id="loginForm_password">
   <button type="submit" class="submit" id="signon-submit">Sign In</button>
</form>

Como se puede observar, se tiene una etiqueta de apertura de form con un id cuyo valor es "loginForm", dentro del formulario se tienen dos campos de texto. Uno para el email donde tiene el id con el valor "loginForm_1" y el campo para el password cuyo id es "loginForm_password". Por último un botón cuyo id es "signon-submit". Este es un caso ideal ya que todos los elementos del form tienen cada uno su identificador id único.
Si por algún motivo en algún elemento no se dispone de id, se puede utilizar alguno de los atributos restantes como name, class, value y otros mas.


Para conocer los atributos de un elemento de una página basta con posicionar el puntero del ratón sobre el elemento, hacer clic derecho y luego seleccionar la opción "Inspeccionar elemento" del menu desplegable. Se abrirá en la parte inferior de la ventana del navegador una sección donde se muestra el código html del elemento seleccionado como así también su entorno, es decir los elementos que lo rodean. Esto es válido tanto para Firefox como para Chrome. En Firefox existe un add-on o plugin llamado Firebug que es muy utilizado, en mi caso me manejo con Chrome directamente. En fin, es cuestión de comodidad, gusto, costumbre, etc.

Creando un proyecto Cucumber+Watir-Webdriver

Bajar la gema testgen

$gem install testgen

Posicionarse en el directorio donde se creará la carpeta del proyecto:

$cd Documents

Crear una carpeta con el nombre del proyecto

mkdir <nombre_del_proyecto>

posicionarse en la carpeta del proyecto:

$cd nombre_del_proyecto

rvm gemset create <nombre_del_proyecto>

rvm --rvmrc --create use ruby-1.9.3-p392@<nombre_del_proyecto>

bajar un nivel:

$ cd ../

$testgen project nombre_del_proyecto --pageobject-driver=watir

debe aparecer lo siguiente:

exist  nombre_del_proyecto
create  nombre_del_proyecto/cucumber.yml
create  nombre_del_proyecto/Gemfile
create  nombre_del_proyecto/Rakefile
create  nombre_del_proyecto/features
create  nombre_del_proyecto/features/support
create  nombre_del_proyecto/features/step_definitions
create  nombre_del_proyecto/features/support/env.rb
create  nombre_del_proyecto/features/support/hooks.rb
create  nombre_del_proyecto/features/support/pages

Estructura de archivos creada para nuestro proyecto!!!!

Ya podemos comenzar a trabajar con cucumber + watir-webdriver