logo
Test Lab
Download CV arrow-down

Test Automation Playground

Environnement de pratique pour l'automatisation de tests.
Chaque contrôle existe en 3 variantes : facile (data-testid), moyen (pas de testid), difficile (ID dynamique).

● Easy — data-testid présent ● Medium — Pas de testid, utiliser XPath / CSS ● Hard — ID aléatoire régénéré à chaque chargement
⬡

Validation par la Debug Console

Chaque interaction avec un contrôle — clic, saisie, sélection, focus — émet un événement capturé en temps réel dans la Debug Console ci-dessous. Celle-ci constitue le point de vérité de vos tests : pour valider qu'une action a bien été exécutée par votre script d'automatisation, lisez le contenu de la console et assertez le message correspondant.

01
Interagir

Votre script localise l'élément et exécute l'action (click, sendKeys, select…).

02
Observer

La console enregistre immédiatement le type d'événement, l'horodatage et la valeur capturée.

03
Asserter

Récupérez le texte de l'élément #debugOutput et vérifiez qu'il contient le message attendu.

Exemple d'assertion — Selenium / Python 
# 1. Interagir avec le bouton
driver.find_element(By.CSS_SELECTOR, '[data-testid="btn-primary-easy"]').click()

# 2. Lire la debug console
debug_text = driver.find_element(By.ID, "debugOutput").text

# 3. Asserter le résultat
assert "Bouton Primary [easy]" in debug_text, f"Action non détectée : {debug_text}"

Debug Console

En attente d'interactions...

1Text Inputs

Champs texte basiques — le cas le plus courant en automation.

Easy
data-testid="text-input-easy"
Medium
name="text-medium" · placeholder · label[for]
Hard
ID aléatoire · aucun name · aucun testid

2Email & Password

Champs de saisie typiques d'un formulaire de connexion.

Easy
data-testid="email-easy" · data-testid="pw-easy"
Medium
type="email/password" · name · autocomplete · label[for]
Hard
IDs dynamiques · aucun name ni autocomplete

3Number, Date & Time

Champs avec types spéciaux — souvent mal gérés par les frameworks de test.

Easy
data-testid="number-easy" etc.
Medium
type · name · min/max · label[for]
Hard
IDs dynamiques · aucun name

4Range / Slider

Easy
data-testid="range-easy"
50%
Medium
name="volume" · type="range" · label[for]
50%
Hard
ID dynamique · aucun name
50%

5Boutons

Clic simple, double-clic, désactivé, compteur.

Easy
data-testid sur chaque bouton

Double-clic :

Compteur : 0

Medium
aria-label · class · type · texte visible

Double-clic :

Compteur : 0

Hard
IDs dynamiques · aucun aria-label

Compteur : 0

6Checkboxes

Easy
data-testid="cb-opt-N-easy"
Medium
name="features" · value · label[for]
Hard
IDs dynamiques sur chaque checkbox

7Radio Buttons

Easy
data-testid="radio-X-easy"
Medium
name="radio-med" · value · id · label[for]
Hard
IDs dynamiques · même name (change chaque load)

8Select / Dropdown

Easy
data-testid="select-easy" · data-testid="multi-easy"
Medium
name="country" · label[for] · id
Hard
ID dynamique · valeurs d'options encodées

9Textarea

Easy
data-testid="textarea-easy"
Medium
name="message" · id · label[for] · placeholder
Hard
ID dynamique · aucun name

10File Upload

Easy
data-testid="file-easy"
Medium
type="file" · name="upload" · accept · label[for]
Hard
ID dynamique · aucun name · aucun accept

11Toggle Switch

Easy
data-testid="toggle-X-easy"
Mode sombre
Notifications (ON par défaut)
Medium
role="switch" · aria-label · name
Mode sombre
Notifications (ON par défaut)
Hard
IDs dynamiques · aucun name · aucun aria
Mode sombre
Notifications

13Table (triable)

Cliquer sur un en-tête pour trier. Chaque cellule a un data-testid.

Easy — data-testid sur headers, lignes et cellules
Nom ↕ Âge ↕ Ville ↕ Statut ↕
Alice Martin 28 Paris Actif
Bob Dupont 35 Lyon Inactif
Claire Durand 22 Bordeaux Actif
Denis Lambert 41 Marseille En attente
Eva Chen 19 Nantes Actif

14Modal / Dialog

Easy
data-testid sur bouton déclencheur ET modal
Medium
role="dialog" · aria-modal · class
Hard
ID dynamique sur le bouton déclencheur

15Alerts / Notifications

Les alertes disparaissent après 4 secondes.

Easy
data-testid sur chaque bouton déclencheur
Medium
class · aria-label · texte visible du bouton
Hard
IDs dynamiques sur les boutons