Démo

De zéro à héros : Créer un test automatisé complet avec l’IA

test-automatisé-ia-qanary

Vous avez une nouvelle feature à tester.

Normalement, voici ce qui se passe :

1. Lire les specs (si elles existent)
2. Identifier les scénarios
3. Écrire le code du test
4. Debugger pendant 30 minutes car ça ne marche pas
5. Ajuster, corriger, relancer
6. 1-2 heures plus tard : un test fonctionnel

Et si je vous disais qu’avec l’IA, vous pouvez faire ça en 15 minutes ?

Pas un test pourri généré automatiquement que vous jetez après.

Un vrai test de qualité, fonctionnel, maintenable, que vous utilisez en production.

Dans cet article, je vais vous montrer exactement comment faire. Pas-à-pas. Avec du vrai code.

De zéro à un test complet et fonctionnel. Chrono en main.

Le défi : Tester un parcours e-commerce complet

Le cahier des charges

On va tester le parcours d’achat sur un site e-commerce fictif :

Scénario :

1. Se connecter avec un compte test
2. Chercher un produit (« iPhone 15 »)
3. Ajouter le premier résultat au panier
4. Aller au panier
5. Valider la commande (checkout)
6. Remplir les informations de livraison
7. Choisir un mode de paiement (carte test)
8. Valider et vérifier la confirmation

Sans IA : 1-2 heures pour écrire et debugger

Avec IA : 10 minutes

Let’s go.

Étape 1 : Générer le squelette du test (2 minutes)

Prompt à ChatGPT/Claude :

« Je dois créer un test automatisé Playwright en TypeScript pour tester
un parcours d’achat e-commerce complet.

Scénario :
1. Se connecter avec email « [email protected] » et password « Test1234! »
2. Chercher « iPhone 15 » dans la barre de recherche
3. Cliquer sur le premier résultat
4. Ajouter au panier
5. Aller au panier
6. Procéder au checkout
7. Remplir les infos de livraison (firstName: « John », lastName: « Doe »,
address: « 123 Main St », city: « Paris », zipCode: « 75001 »)
8. Sélectionner paiement par carte
9. Remplir les infos carte (numéro: « 4242424242424242 », exp: « 12/25 », cvv: « 123 »)
10. Valider et vérifier qu’on arrive sur la page de confirmation

Structure le test avec :
– Setup/teardown appropriés
– Page Object Model si pertinent
– Assertions claires à chaque étape
– Gestion d’erreurs basique

Code complet et commenté. »

Résultat généré par l’IA (extrait)

				
					import { test, expect, Page } from '@playwright/test';

test.describe('E-commerce Purchase Flow', () => {
  let page: Page;

  test.beforeEach(async ({ page: p }) => {
    page = p;
    await page.goto('https://example-shop.com');
  });

  test('Complete purchase flow - Happy path', async () => {
    // Step 1: Login
    await page.click('[data-testid="login-button"]');
    await page.fill('[name="email"]', 'test@example.com');
    await page.fill('[name="password"]', 'Test1234!');
    await page.click('button[type="submit"]');
    
    // Verify login successful
    await expect(page.locator('[data-testid="user-menu"]')).toBeVisible();

    // Step 2: Search for product
    await page.fill('[data-testid="search-input"]', 'iPhone 15');
    await page.press('[data-testid="search-input"]', 'Enter');
    
    // Wait for results
    await page.waitForSelector('[data-testid="product-card"]');
    
    // Step 3: Click first result
    await page.click('[data-testid="product-card"]:first-child');
    
    // Step 4: Add to cart
    await page.click('[data-testid="add-to-cart-button"]');
    
    // Verify product added
    await expect(page.locator('[data-testid="cart-badge"]')).toContainText('1');

    // Step 5: Go to cart
    await page.click('[data-testid="cart-icon"]');
    
    // Verify we're on cart page
    await expect(page).toHaveURL(/.*cart/);
    
    // Step 6: Proceed to checkout
    await page.click('[data-testid="checkout-button"]');
    
    // Step 7: Fill shipping info
    await page.fill('[name="firstName"]', 'John');
    await page.fill('[name="lastName"]', 'Doe');
    await page.fill('[name="address"]', '123 Main St');
    await page.fill('[name="city"]', 'Paris');
    await page.fill('[name="zipCode"]', '75001');
    await page.click('[data-testid="continue-to-payment"]');
    
    // Step 8: Select card payment
    await page.click('[data-testid="payment-card"]');
    
    // Step 9: Fill card details
    await page.fill('[name="cardNumber"]', '4242424242424242');
    await page.fill('[name="expiry"]', '12/25');
    await page.fill('[name="cvv"]', '123');
    
    // Step 10: Submit and verify
    await page.click('[data-testid="submit-order"]');
    
    // Wait for confirmation
    await page.waitForURL(/.*confirmation/);
    await expect(page.locator('[data-testid="order-confirmation"]')).toBeVisible();
    await expect(page.locator('[data-testid="order-number"]')).toBeVisible();
  });
});

Temps écoulé : 2 minutes ⏱️

Ce que l’IA a bien fait :

✅ Structure claire avec steps commentés

✅ Assertions appropriées à chaque étape

✅ Sélecteurs data-testid (best practice)

✅ Attentes explicites (waitForURL, waitForSelector)

Ce qui manque encore :

❌ Les vrais sélecteurs de VOTRE application

❌ Gestion des cas d’erreur

❌ Timeouts appropriés

❌ Tests des edge cases

Étape 2 : Adapter aux vrais sélecteurs (5 minutes)

Le problème

L’IA a inventé des sélecteurs ([data-testid= »login-button »]) qui n’existent pas dans votre app.

Utilisez Playwright Codegen :
				
					npx playwright codegen https://votre-site.com

Faites le parcours manuellement. Playwright génère le code avec les VRAIS sélecteurs.
Puis copiez-collez dans votre test généré par IA.
Temps écoulé : 5 minutes ⏱️

Étape 3 : Améliorer avec l’IA (3 minutes)

Prompt d’amélioration

Voici mon test Playwright. Améliore-le en ajoutant :
1. Page Object Model pour rendre le code plus maintenable
2. Gestion d’erreurs si un élément n’est pas trouvé
3. Screenshots en cas d’échec
4. Retry logic pour les éléments qui peuvent mettre du temps à charger
5. Cleanup après le test (vider le panier)

[COLLER VOTRE CODE]

Résultat amélioré

				
					// pages/LoginPage.ts
export class LoginPage {
  constructor(private page: Page) {}

  async login(email: string, password: string) {
    try {
      await this.page.click('#header-login-btn', { timeout: 5000 });
      await this.page.fill('input[type="email"]', email);
      await this.page.fill('input[type="password"]', password);
      await this.page.click('button[type="submit"]');
      
      // Verify login succeeded
      await this.page.waitForSelector('#user-menu', { timeout: 10000 });
    } catch (error) {
      await this.page.screenshot({ path: 'error-login.png' });
      throw new Error(`Login failed: ${error}`);
    }
  }
}

// pages/ProductPage.ts
export class ProductPage {
  constructor(private page: Page) {}

  async searchProduct(query: string) {
    await this.page.fill('#search-input', query);
    await this.page.press('#search-input', 'Enter');
    await this.page.waitForSelector('.product-card', { timeout: 10000 });
  }

  async addFirstProductToCart() {
    const firstProduct = this.page.locator('.product-card').first();
    await firstProduct.click();
    await this.page.click('#add-to-cart-btn');
    
    // Wait for cart badge to update
    await this.page.waitForFunction(
      () => document.querySelector('#cart-badge')?.textContent !== '0',
      { timeout: 5000 }
    );
  }
}

// Test principal
test('Complete purchase flow with error handling', async ({ page }) => {
  const loginPage = new LoginPage(page);
  const productPage = new ProductPage(page);
  const cartPage = new CartPage(page);
  const checkoutPage = new CheckoutPage(page);

  try {
    await page.goto('https://myshop.com');
    
    await loginPage.login('test@example.com', 'Test1234!');
    await productPage.searchProduct('iPhone 15');
    await productPage.addFirstProductToCart();
    await cartPage.proceedToCheckout();
    await checkoutPage.fillShippingInfo({
      firstName: 'John',
      lastName: 'Doe',
      address: '123 Main St',
      city: 'Paris',
      zipCode: '75001'
    });
    await checkoutPage.payWithCard({
      number: '4242424242424242',
      expiry: '12/25',
      cvv: '123'
    });
    
    // Verify order confirmation
    await expect(page.locator('#order-confirmation')).toBeVisible();
    const orderNumber = await page.locator('#order-number').textContent();
    expect(orderNumber).toMatch(/^ORD-\d+$/);
    
    console.log(`✅ Order successful: ${orderNumber}`);
  } catch (error) {
    await page.screenshot({ path: `error-${Date.now()}.png` });
    throw error;
  }
});

test.afterEach(async ({ page }) => {
  // Cleanup: Clear cart
  await page.goto('https://myshop.com/cart/clear');
});
Temps écoulé : 8 minutes ⏱️

Améliorations apportées :
✅ Page Object Model (maintenabilité)
✅ Gestion d’erreurs avec screenshots
✅ Timeouts explicites
✅ Retry logic avec waitForFunction
✅ Cleanup automatique
✅ Console logs utiles

Étape 4 : Tester et debugger (5 minutes)

Exécuter le test

				
					npx playwright test purchase-flow.spec.ts --headed

Premier run : ❌ Échec

				
					Error: Timeout 5000ms exceeded waiting for selector "#add-to-cart-btn"

Debugger avec Playwright Inspector

				
					npx playwright test purchase-flow.spec.ts --debug

Vous voyez que le bouton a en fait l’ID #btn-add-cart.

Correction en 30 secondes.

Demander à l’IA de debugger

Prompt :
Mon test Playwright échoue avec cette erreur :

« Timeout 5000ms exceeded waiting for selector « #add-to-cart-btn » »

Voici mon code :
[CODE]

Quelles peuvent être les causes et comment les résoudre ?
Réponse IA :

3 causes possibles :

1. Sélecteur incorrect
→ Vérifiez avec Playwright Inspector (npx playwright test –debug)
→ Ou utilisez getByRole(‘button’, { name: /add to cart/i })

2. Élément pas encore chargé
→ Augmentez le timeout : { timeout: 10000 }
→ Ou ajoutez waitForLoadState(‘networkidle’)

3. Élément caché ou disabled
→ Vérifiez avec page.locator(‘#add-to-cart-btn’).isVisible()
→ Attendez qu’il soit enabled avec .waitFor({ state: ‘visible’ })

Mon conseil : Remplacez par un sélecteur plus robuste :
await page.getByRole(‘button’, { name: /add to cart/i }).click();

Vous corrigez en 4 minutes.

Temps écoulé : 12 minutes ⏱️

Test qui passe : ✅

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Étape 5 : Générer les cas d’erreur (5 minutes bonus)

Votre test happy path fonctionne. Maintenant, les edge cases.

Prompt

J’ai ce test happy path qui fonctionne :
[CODE]

Génère-moi 5 tests d’erreur pour couvrir :
1. Login avec mauvais password
2. Produit out of stock
3. Panier vide au checkout
4. Carte de crédit invalide
5. Code postal invalide

Même structure (Page Object Model), mêmes conventions.

Résultat (extrait)

				
					test('Login with invalid password shows error', async ({ page }) => {
  const loginPage = new LoginPage(page);
  
  await page.goto('https://myshop.com');
  
  try {
    await loginPage.login('test@example.com', 'WrongPassword123!');
    // Should not reach here
    throw new Error('Login should have failed');
  } catch (error) {
    // Verify error message is displayed
    await expect(page.locator('.error-message')).toContainText('Invalid credentials');
  }
});

test('Cannot checkout with empty cart', async ({ page }) => {
  const cartPage = new CartPage(page);
  
  await page.goto('https://myshop.com/cart');
  
  // Verify checkout button is disabled
  const checkoutBtn = page.locator('#checkout-button');
  await expect(checkoutBtn).toBeDisabled();
  
  // Or verify error message if we try to click
  await checkoutBtn.click({ force: true });
  await expect(page.locator('.error-message')).toContainText('Cart is empty');
});

test('Invalid credit card shows validation error', async ({ page }) => {
  const checkoutPage = new CheckoutPage(page);
  
  // ... setup jusqu'au paiement ...
  
  await checkoutPage.payWithCard({
    number: '1234', // Invalid card
    expiry: '12/25',
    cvv: '123'
  });
  
  await expect(page.locator('.card-error')).toContainText('Invalid card number');
});

Temps total : 20 minutes pour 6 tests complets ⏱️

Ce que l’IA fait mieux que vous

1. Générer du code boilerplate rapidement
L’IA écrit en 30 secondes ce qui vous prendrait 10 minutes :

  • Imports
  • Setup/teardownStructure de base
  • Assertions standards

2. Couvrir les cas standards systématiquement. L’IA n’oublie jamais :

  • Les assertions à chaque étape
  • Les attentes explicites
  • Les timeouts
  • La gestion d’erreurs basique

3. Suggérer des améliorations

Demandez : « Comment améliorer ce test ? » et l’IA propose :

  • Meilleure architecture (Page Objects)
  • Patterns avancés (retry logic)
  • Best practices (sélecteurs robustes)

4. Générer des variations
Un test qui marche → l’IA génère 10 variations en 2 minutes :

  • Différents produits
  • Différents utilisateurs
  • Différentes configurations
  • Edge cases

Ce que VOUS faites mieux que l’IA

1. Comprendre le contexte métier

L’IA ne sait pas :

  • Quel scénario est critique pour votre business
  • Quel bug aurait le plus d’impact
  • Quel parcours les vrais utilisateurs suivent

Vous si.

2. Identifier les vrais edge cases

L’IA génère des edge cases « classiques » :

  • Champ vide
  • Format invalide
  • Timeout

Mais les vrais edge cases vicieux ? C’est vous qui les trouvez.

Exemple : « Que se passe-t-il si l’utilisateur ajoute 1000 fois le même produit pendant que le stock est mis à jour ? »

3. Valider la pertinence

L’IA génère du code. Vous décidez si c’est pertinent.

Un test qui vérifie une typo dans un label ? Probablement inutile.
Un test qui vérifie le calcul de TVA ? Critique.

4. Debugger les problèmes complexes

Quand le test échoue de manière intermittente (race condition, timing issue), l’IA vous donnera des pistes.

Mais c’est vous qui comprenez le problème racine.

5. Maintenir la cohérence globale

L’IA génère du code localement optimal.
Vous assurez la cohérence de toute la suite :

  • Conventions de nommage
  • Architecture globale
  • Stratégie de tests

Best practices : Comment bien utiliser l’IA pour créer des tests

✅ DO : Itérer progressivement

Ne demandez pas « génère-moi tous mes tests ».

Demandez :

  1. Un test simple qui marche
  2. Des améliorations progressives
  3. Des variations

Itération > Génération massive

✅ DO : Reviewer systématiquement

Chaque ligne de code généré doit être reviewée.

Questions à se poser :

  • Ce sélecteur est-il robuste ?
  • Cette assertion est-elle pertinente ?
  • Ce timeout est-il approprié ?
  • Ce test apporte-t-il de la valeur ?

✅ DO : Combiner plusieurs outils

  • ChatGPT pour la structure
  • Copilot pour l’auto-complétion
  • Playwright Codegen pour les vrais sélecteurs
  • Votre cerveau pour valider

L’IA n’est qu’un outil dans votre toolbox.

✅ DO : Former l’IA avec des exemples

Plus vous donnez d’exemples de vos tests existants, meilleures sont les suggestions.

Voici 3 exemples de mes tests actuels :
[EXEMPLE 1]
[EXEMPLE 2]
[EXEMPLE 3]

Maintenant, génère un test similaire pour [NOUVEAU SCÉNARIO]

Few-shot learning = résultats 10x meilleurs

❌ DON’T : Copier-coller sans comprendre

Si vous ne comprenez pas une ligne de code généré, n’utilisez pas ce code.

Demandez à l’IA d’expliquer, ou simplifiez.

❌ DON’T : Faire confiance aveuglément

L’IA hallucine parfois :

  • Des APIs qui n’existent pas
  • Des sélecteurs inventés
  • Des patterns obsolètes

Vérifiez toujours.

❌ DON’T : Générer sans stratégie

Avant de générer, demandez-vous :

  • Quel est l’objectif de ce test ?
  • Quelle valeur apporte-t-il ?
  • Comment s’intègre-t-il dans ma suite ?

Stratégie d’abord, génération ensuite.

Cas d’usage réels : ROI mesuré

Cas #1 : Startup SaaS (5 personnes)

Avant IA :

  • 2 jours pour créer 20 tests E2E
  • 1 dev à temps plein

Avec IA :

  • 6 heures pour créer 20 tests E2E
  • 1 dev à mi-temps (fait autre chose le reste du temps)

ROI : 75% de temps gagné

Cas #2 : Scale-up e-commerce (50 personnes)

Avant IA :

  • 1 semaine pour couvrir une nouvelle feature
  • 2 QA sur le sujet

Avec IA :

  • 2 jours pour couvrir la feature + edge cases
  • 1 QA sur le sujet

ROI : 60% de temps gagné + 1 QA disponible pour autre chose

Cas #3 : Grande entreprise (500 personnes)

Avant IA :

  • 3 mois pour migrer 500 tests Selenium vers Playwright
  • 5 QA mobilisés

Avec IA :

  • 1 mois pour migrer 500 tests
  • 2 QA + IA

ROI : 66% de temps gagné + 3 QA libérés

Ce qui vous attend dans l’article 9

Vous savez créer des tests avec l’IA. Maintenant, on va passer au niveau supérieur.

Article 9 : IA + Playwright MCP – Le combo gagnant pour le testing moderne

On va explorer :

  • Qu’est-ce que le Model Context Protocol ?
  • Comment intégrer Playwright avec des LLMs via MCP
  • Cas d’usage avancés et exemples concrets
  • L’avenir du testing conversationnel

Le testing comme vous ne l’avez jamais vu.

Votre mission cette semaine

Créez UN test complet avec l’IA cette semaine.

Choisissez un scénario simple de votre app.

Suivez le process :

  1. Génération du squelette (ChatGPT)
  2. Adaptation aux vrais sélecteurs (Copilot/Codegen)
  3. Amélioration (ChatGPT)
  4. Test et debug (Playwright)
  5. Génération edge cases (ChatGPT)

Mesurez le temps pris vs votre méthode habituelle.

Partagez votre ROI en commentaire.

💬 Quel est votre plus gros frein à l’utilisation de l’IA pour créer des tests ? Le temps de learning ? La confiance dans le code généré ? Autre chose ?

🔔 Suivez-moi pour l’article 9 : Playwright MCP – Le futur du testing

Partager cette publication :

Articles similaires

Essayez gratuitement