GUÍA DE ELEMENTOS WEB - HAKALAB FRAMEWORK
==========================================

Esta guía explica cómo trabajar con elementos web y manipular el DOM en tus pruebas automatizadas.

ÍNDICE
======
1. Localización de Elementos
2. Interacción con Elementos
3. Manipulación de Atributos
4. Estilos CSS
5. Propiedades del DOM
6. Eventos
7. Ejemplos Prácticos

==========================================

1. LOCALIZACIÓN DE ELEMENTOS
============================

Selectores CSS:
- hago click en el elemento "botón" con identificador "css:.btn-primary"
- I click on element "button" with identifier "css:.btn-primary"
- debería ver el elemento "título" con identificador "css:h1.page-title"

Selectores XPath:
- hago click en el elemento "enlace" con identificador "xpath://a[@href='/home']"
- I click on element "link" with identifier "xpath://a[@href='/home']"

Selectores por ID:
- hago click en el elemento "botón guardar" con identificador "id:save-button"
- I click on element "save button" with identifier "id:save-button"

Selectores por Name:
- relleno el campo "email" con "test@example.com" con identificador "name:email"
- I fill field "email" with "test@example.com" with identifier "name:email"

Selectores por Class:
- debería ver el elemento "error" con identificador "class:error-message"
- I should see element "error" with identifier "class:error-message"

==========================================

2. INTERACCIÓN CON ELEMENTOS
============================

Clicks:
- hago click en el elemento "botón" con identificador "#btn"
- I click on element "button" with identifier "#btn"
- hago doble click en el elemento "celda" con identificador ".table-cell"
- I double click on element "cell" with identifier ".table-cell"
- hago click derecho en el elemento "menú" con identificador "#context-menu"
- I right click on element "menu" with identifier "#context-menu"

Hover:
- paso el mouse sobre el elemento "dropdown" con identificador "#dropdown-menu"
- I hover over element "dropdown" with identifier "#dropdown-menu"

Enfoque:
- enfoco el elemento "campo" con identificador "#input-field"
- I focus on element "field" with identifier "#input-field"
- desenfocar el elemento actual
- I blur the current element

Scroll:
- hago scroll al elemento "footer" con identificador "#page-footer"
- I scroll to element "footer" with identifier "#page-footer"
- hago scroll hacia abajo 500 píxeles
- I scroll down 500 pixels

==========================================

3. MANIPULACIÓN DE ATRIBUTOS
============================

Obtener Atributos:
- obtengo el atributo "href" del elemento "enlace" con identificador "#external-link"
- I get attribute "href" from element "link" with identifier "#external-link"
- obtengo el atributo "data-id" del elemento "producto" con identificador ".product-item"
- I get attribute "data-id" from element "product" with identifier ".product-item"

Establecer Atributos:
- establezco el atributo "disabled" del elemento "botón" con identificador "#submit-btn"
- I set attribute "disabled" on element "button" with identifier "#submit-btn"
- establezco el atributo "data-value" con valor "123" en el elemento "campo" con identificador "#data-field"
- I set attribute "data-value" with value "123" on element "field" with identifier "#data-field"

Verificar Atributos:
- el elemento "enlace" con identificador "#external-link" debería tener el atributo "target" con valor "_blank"
- element "link" with identifier "#external-link" should have attribute "target" with value "_blank"

==========================================

4. ESTILOS CSS
==============

Obtener Estilos:
- obtengo la propiedad CSS "color" del elemento "texto" con identificador "#main-text"
- I get CSS property "color" from element "text" with identifier "#main-text"
- obtengo la propiedad CSS "display" del elemento "modal" con identificador "#modal-dialog"
- I get CSS property "display" from element "modal" with identifier "#modal-dialog"

Establecer Estilos:
- establezco la propiedad CSS "display" con valor "none" en el elemento "banner" con identificador "#banner"
- I set CSS property "display" with value "none" on element "banner" with identifier "#banner"
- establezco la propiedad CSS "background-color" con valor "red" en el elemento "alerta" con identificador ".alert"
- I set CSS property "background-color" with value "red" on element "alert" with identifier ".alert"

Verificar Estilos:
- el elemento "botón" con identificador "#btn" debería tener la propiedad CSS "background-color" con valor "blue"
- element "button" with identifier "#btn" should have CSS property "background-color" with value "blue"

==========================================

5. PROPIEDADES DEL DOM
======================

Obtener Propiedades:
- obtengo el texto del elemento "título" con identificador "#page-title"
- I get text from element "title" with identifier "#page-title"
- obtengo el valor del elemento "campo" con identificador "#input-field"
- I get value from element "field" with identifier "#input-field"
- obtengo el HTML interno del elemento "contenedor" con identificador "#container"
- I get inner HTML from element "container" with identifier "#container"

Establecer Propiedades:
- establezco el texto del elemento "etiqueta" con valor "Nuevo Texto" con identificador "#label"
- I set text on element "label" with value "New Text" with identifier "#label"
- establezco el valor del elemento "campo" con "nuevo valor" con identificador "#input-field"
- I set value on element "field" with "new value" with identifier "#input-field"

Verificar Propiedades:
- el elemento "campo" con identificador "#email-input" debería tener el valor "test@example.com"
- element "field" with identifier "#email-input" should have value "test@example.com"
- el elemento "párrafo" con identificador "#description" debería contener el texto "Descripción"
- element "paragraph" with identifier "#description" should contain text "Description"

==========================================

6. EVENTOS
==========

Disparar Eventos:
- disparo el evento "click" en el elemento "botón" con identificador "#btn"
- I trigger event "click" on element "button" with identifier "#btn"
- disparo el evento "change" en el elemento "campo" con identificador "#input-field"
- I trigger event "change" on element "field" with identifier "#input-field"
- disparo el evento "submit" en el elemento "formulario" con identificador "#form"
- I trigger event "submit" on element "form" with identifier "#form"

Escuchar Eventos:
- escucho el evento "click" en el elemento "botón" con identificador "#btn"
- I listen for event "click" on element "button" with identifier "#btn"
- espero a que se dispare el evento "load" en el elemento "imagen" con identificador "#image"
- I wait for event "load" on element "image" with identifier "#image"

==========================================

7. EJEMPLOS PRÁCTICOS
=====================

Ejemplo 1: Manipulación de Formulario

Feature: Manipulación de elementos de formulario

  Scenario: Interactuar con formulario complejo
    Given voy a la url "https://example.com/form"
    
    # Obtener información del formulario
    When obtengo el atributo "action" del elemento "formulario" con identificador "#contact-form"
    And obtengo el atributo "method" del elemento "formulario" con identificador "#contact-form"
    
    # Llenar campos
    When relleno el campo "nombre" con "Juan Pérez" con identificador "#name-input"
    And relleno el campo "email" con "juan@example.com" con identificador "#email-input"
    And relleno el campo "mensaje" con "Mensaje de prueba" con identificador "#message-textarea"
    
    # Verificar valores
    Then el elemento "campo nombre" con identificador "#name-input" debería tener el valor "Juan Pérez"
    And el elemento "campo email" con identificador "#email-input" debería tener el valor "juan@example.com"
    
    # Marcar checkbox
    When marco el checkbox "términos" con identificador "#terms-checkbox"
    Then el elemento "checkbox términos" con identificador "#terms-checkbox" debería estar marcado
    
    # Enviar formulario
    When disparo el evento "submit" en el elemento "formulario" con identificador "#contact-form"
    Then debería ver el texto "Formulario enviado"

Ejemplo 2: Manipulación de Estilos

Feature: Cambio de estilos dinámicos

  Scenario: Modificar estilos CSS
    Given voy a la url "https://example.com/styles"
    
    # Obtener estilos actuales
    When obtengo la propiedad CSS "display" del elemento "modal" con identificador "#modal"
    And obtengo la propiedad CSS "background-color" del elemento "botón" con identificador "#btn"
    
    # Cambiar estilos
    When establezco la propiedad CSS "display" con valor "block" en el elemento "modal" con identificador "#modal"
    And establezco la propiedad CSS "background-color" con valor "green" en el elemento "botón" con identificador "#btn"
    
    # Verificar cambios
    Then el elemento "modal" con identificador "#modal" debería tener la propiedad CSS "display" con valor "block"
    And el elemento "botón" con identificador "#btn" debería tener la propiedad CSS "background-color" con valor "green"

Ejemplo 3: Interacción con Elementos Dinámicos

Feature: Interacción con elementos dinámicos

  Scenario: Trabajar con elementos que cambian
    Given voy a la url "https://example.com/dynamic"
    
    # Esperar a que aparezca elemento
    When espero a que el elemento "contenido" con identificador "#dynamic-content" sea visible
    
    # Obtener contenido dinámico
    When obtengo el texto del elemento "contenido" con identificador "#dynamic-content"
    And obtengo el HTML interno del elemento "contenido" con identificador "#dynamic-content"
    
    # Interactuar con elemento
    When hago click en el elemento "botón cargar" con identificador "#load-btn"
    And espero a que el elemento "spinner" con identificador "#loading-spinner" desaparezca
    
    # Verificar cambios
    Then el elemento "contenido" con identificador "#dynamic-content" debería contener el texto "Datos cargados"

==========================================

CONCLUSIÓN

La manipulación de elementos web es fundamental para crear pruebas automatizadas 
efectivas. El framework proporciona herramientas completas para interactuar con 
cualquier elemento del DOM y verificar su estado.

==========================================
Documento generado automáticamente - Hakalab Framework v1.3.0
Guía de Elementos Web
Fecha: Enero 2026
==========================================
