MÒDUL 5

Automatització de Tests Web (Selenium)

Ara que tenim aplicacions web muntades, com validem que funcionen bé pel client final? Ho fem amb proves de Caixa Negra des del navegador.

5.1

Què és Selenium i què és un Driver?

Selenium és l'estàndard de la indústria per automatitzar navegadors web. Actua com un "robot" fantasma que obre un navegador de debò, llegeix la pantalla, busca camps de text, els omple i fa clic als botons.

Arquitectura Selenium + Driver + Navegador
Diagrama: Python → Selenium → Driver → Navegador images/teoriaM03/selenium-arquitectura.png
Llegir article: Getting Started with Selenium — selenium.dev
🤖

Selenium (codi Python)

La nostra eina. Escrivim les instruccions en Python: "vés a aquesta URL", "busca el camp password", "escriu-hi X", "fes clic al botó".

🔌

Driver (programa intermediari)

Selenium no sap parlar directament amb Chrome o Firefox. Necessita un traductor intermediari. Per a Firefox: geckodriver. Cal descarregar-lo i col·locar-lo al PATH de l'ordinador.

5.2

El Mode Headless (Navegador sense cap)

Si executem un test en un servidor remot (que no té targeta gràfica ni monitor), el navegador donarà error en intentar obrir la finestra.

Mode Headless vs Mode Normal
Comparació: navegador normal vs mode headless images/teoriaM03/headless-mode.png
Llegir article: Guide to Headless Browser Testing — browserstack.com
👻

Què és el mode Headless?

El navegador s'executa "d'esquenes" (a la RAM) sense mostrar cap finestra ni interfície gràfica. Invisible però funcional.

⚡

Avantatges

Soluciona el problema dels servidors sense pantalla, fa els tests infinitament més ràpids i consumeix menys memòria.

5.3

L'Entorn Segur: BD de Tests i Fixtures

☠️
Regla inquebrantable: Els tests no es fan MAI sobre la base de dades real de producció.
Cicle StaticLiveServerTestCase i Fixtures
Diagrama: cicle StaticLiveServerTestCase + Fixtures JSON images/teoriaM03/fixtures-django.png
Llegir article: Loading fixtures for testing — djangoproject.com

Django disposa de StaticLiveServerTestCase. Quan un test fa servir aquesta classe, Django automàticament:

1

Aixeca un mini servidor web temporal

A l'ordinador local, sense tocar el servidor real.

↓
2

Crea una BD totalment en blanc

Només per al test. Aïllada al 100% de les dades reals.

↓
3

Injecta les Fixtures (JSON)

Dades preparades: "crea l'usuari admin amb contrasenya X". Garanteix que cada test parteix de la mateixa situació exacta.

↓
4

Obre el navegador i executa el test

El robot comprova el codi sobre l'entorn temporal.

↓
5

Apaga i destrueix la BD temporal

No deixa absolutament cap rastre.

5.4

Com s'estructura un Test Automatitzat?

Tot test té tres fases: preparació, acció i validació (els Asserts).

Estructura setUp, test, tearDown
Diagrama: setUpClass → Test → tearDownClass images/teoriaM03/estructura-test-selenium.png
Llegir article: Organizing Test Code — python.org
🔧 Preparació

setUpClass

S'executa al principi de tot. Inicialitza el robot del navegador (amb el mode headless actiu).

🧪 Acció + Verificació

El Test + Asserts

El robot va a una URL (get), omple camps (send_keys), fa clic (click). Després els Asserts comproven el resultat: si fallen → test FALLAT.

🧹 Neteja

tearDownClass

Quan acaben tots els tests, "mata" el navegador amb driver.quit() per no deixar processos zombies robant memòria.

🗂️ Resum Ràpid — Mòdul 5

SeleniumRobot que controla un navegador real per fer proves de Caixa Negra.
DriverIntermediari entre Selenium i el navegador. Ex: geckodriver per Firefox.
HeadlessNavegador sense finestra. Obligatori en servidors. Més ràpid i lleuger.
FixturesJSON amb dades de prova. Garanteixen que cada test parteix del mateix punt.
setUpClassPreparació: inicialitza el robot abans de tots els tests.
tearDownClassNeteja: driver.quit() per matar el navegador al final.