Frontend | QA Testing — Miguel Flor

01. Estructura HTML

Organización de las áreas de acceso y portfolio.

Estructura

index.html

HTML · estructura identificada

<main
                                id="accessPage"
                                class="access-page"
                            >
                                <form id="accessForm" novalidate>
                                    ...
                                </form>
                            </main>

                            <div
                                id="portfolio"
                                class="portfolio hidden"
                            >
                                ...
                            </div>

Explicación

¿Qué representa?

El HTML separa la pantalla de acceso del portfolio que se muestra después del registro. Los identificadores permiten localizar cada elemento desde JavaScript.

¿Por qué importa?

Una estructura clara facilita el mantenimiento, la automatización y la comprobación de los estados de la interfaz.

Enfoque QALa separación entre la pantalla de acceso y el portfolio permite identificar elementos, verificar estados de visualización y automatizar interacciones mediante Selenium WebDriver.

LABORATORIO INTERACTIVO

Explorá la estructura de la interfaz

Seleccioná un elemento para descubrir su función y observar cómo participa en el portfolio.

VISTA DE ESTRUCTURA

ELEMENTO SELECCIONADO

02. Validación y estados visuales

Comunicación visual de errores y campos en foco.

Estilos CSS

css/style.css

CSS · estados de campo

input:focus {
                                border-color: var(--primary);

                                box-shadow:
                                    0 0 0 3px
                                    rgba(108, 99, 255, 0.15);
                            }

                            input.input-error {
                                border-color: var(--error);
                            }

                            .error-message {
                                display: block;
                                color: var(--error);
                                font-size: 12px;
                                margin-top: 6px;
                            }

Gestión del error

js/app.js

JavaScript · showError

function showError(
                                input,
                                errorId,
                                message
                            ) {
                                input.classList.add("input-error");

                                document.getElementById(
                                    errorId
                                ).textContent = message;
                            }

Explicación

¿Qué hace el CSS?

Resalta el campo activo y distingue los campos inválidos mediante el color de error. El mensaje se presenta debajo del campo correspondiente.

¿Qué hace JavaScript?

showError() agrega la clase de error al campo y coloca el mensaje en el elemento identificado por errorId.

¿Qué debería probarse?

Que el error aparezca en el campo correcto.
Que el mensaje sea claro y visible.
Que los errores puedan limpiarse.
Que el foco sea perceptible al navegar.

Enfoque QAComprobar tanto la validación funcional como la presentación visual del error.

LABORATORIO INTERACTIVO

Probá las validaciones del formulario

Explorá cómo responde la interfaz ante distintos datos de entrada. Podés utilizar escenarios guiados o realizar tus propias pruebas.

01

Pruebas guiadas

Seleccioná uno de los escenarios disponibles. El sistema completará el campo automáticamente y mostrará el resultado de la validación. Podés comparar casos aprobados y rechazados.

ESCENARIOS DE PRUEBA

02

Prueba manual

Ingresá tus propios datos en el campo «Correo electrónico» y presioná «Ejecutar validación». Probá valores válidos, incorrectos o vacíos para observar las diferentes respuestas. Utilizá «Restablecer» para comenzar una nueva prueba.

DATOS DE ENTRADA Correo electrónico

RESULTADO DE LA VALIDACIÓN

Esperando datos de entrada.

Observá si la validación fue aprobada o rechazada y cómo cambia la presentación visual del campo. Esta demostración no almacena información.

03. Internacionalización

Adaptación de los textos al idioma seleccionado.

Selección de idioma

js/app.js

JavaScript · applyLanguage

function applyLanguage(language) {
                            const selectedTranslations =
                                translations[language] || translations.es;

                            document.documentElement.lang = language;

                            document.querySelectorAll("[data-i18n]")
                                .forEach(function (element) {
                                    const key = element.dataset.i18n;

                                    if (selectedTranslations[key]) {
                                        element.textContent =
                                            selectedTranslations[key];
                                    }
                                });

                            document.querySelectorAll(
                                "[data-i18n-placeholder]"
                            ).forEach(function (element) {
                                const key = element.dataset.i18nPlaceholder;

                                if (selectedTranslations[key]) {
                                    element.placeholder =
                                        selectedTranslations[key];
                                }
                            });
                        }

Explicación

¿Cómo funciona?

La función obtiene las traducciones del idioma elegido y actualiza los elementos marcados con data-i18n y data-i18n-placeholder.

¿Por qué importa?

Cambiar el idioma implica más que traducir títulos: también deben actualizarse las etiquetas, los campos y los mensajes visibles.

¿Qué debería probarse?

Español, inglés y portugués.
Etiquetas y placeholders.
El atributo lang del documento.
Que cambiar el idioma no rompa el formulario.

Enfoque QAEjecutar pruebas de regresión en los tres idiomas y comprobar que la interfaz mantenga su comportamiento.

LABORATORIO INTERACTIVO

Explorá la internacionalización

Seleccioná un idioma para observar cómo se adaptan las etiquetas, los campos y los botones de una interfaz. Esta demostración no modifica el idioma del portfolio.

Escenarios de prueba

Seleccioná un escenario para comprobar las validaciones y sus mensajes en diferentes idiomas.

Formulario de contacto

ES

Nombre

Correo electrónico

Mensaje

Interfaz en español.

04. Pruebas automatizadas

Cobertura automatizada del frontend mediante Selenium WebDriver, con regresión ejecutada en Chrome, Firefox y Edge.

Suite Selenium

tests/selenium

access-page.test.js
empty-form.test.js
invalid-email.test.js
invalid-first-name.test.js
invalid-last-name.test.js
invalid-phone.test.js
language-selector.test.js
missing-consent.test.js
valid-registration.test.js
contact-valid.test.js
contact-empty.test.js
contact-server-error.test.js

Cobertura y resultados

¿Qué se automatiza?

Validaciones del formulario de acceso, consentimiento, registro válido, selección de idioma y comportamiento del formulario de contacto.

¿Cómo se ejecutan las pruebas?

Selenium WebDriver interactúa con la interfaz y Node.js Test Runner ejecuta las aserciones. Las pruebas de contacto utilizan una API Express con SQLite en memoria y un servicio de correo simulado, sin realizar envíos SMTP reales.

Última regresión · 21/10/2026

12 escenarios automatizados ejecutados en Google Chrome, Mozilla Firefox y Microsoft Edge: 36 PASS, 0 FAIL y 0 SKIP. La cobertura incluye el manejo de errores del formulario de contacto mediante una API simulada.

Enfoque QAEsta sección presenta la estructura y el alcance de la automatización. Los escenarios desplegables, sus aserciones y la evidencia de ejecución se documentan en el área QA.

LABORATORIO INTERACTIVO

Explorá la automatización del frontend

Seleccioná una prueba para conocer qué comportamiento verifica Selenium y cómo se comprueba el resultado. Este explorador no ejecuta pruebas reales.

UI-001

Carga de la página

Verificar que la página de acceso se abre correctamente y muestra el formulario.

Acción automatizada

Selenium abre la página de acceso.

Comprobación

Se comprueba el título y la visibilidad del formulario.

La ejecución real y sus evidencias se documentan en la sección de QA del portfolio.