5 Alternatives Gratuites à Applitools pour le Visual Testing

Applitools est un outil puissant de visual testing, mais son modèle de prix — basé sur des Test Units avec des tarifs non publics — ne convient pas à tous les budgets. Heureusement, il existe des alternatives gratuites qui permettent de démarrer le visual testing sans investissement initial.

Voici 5 alternatives à Applitools, chacune avec ses forces et ses limites.

1. BackstopJS

Ce que c'est

BackstopJS est un outil open source de visual regression testing qui fonctionne en ligne de commande. Il capture des screenshots de votre application et les compare pixel par pixel pour détecter les différences.

Ce qu'il fait bien

Entièrement gratuit : c'est un projet open source sous licence MIT
Automatisable : s'intègre facilement dans les pipelines CI/CD
Configuration flexible : permet de définir des scénarios de test précis avec des sélecteurs CSS
Multi-navigateur : utilise Puppeteer ou Chromium en arrière-plan
Génération de rapports : produit des rapports visuels avec les différences mises en évidence

Exemple de configuration

Voici un exemple de configuration BackstopJS pour tester une page d'accueil :

{
  "id": "mon_site",
  "viewports": [
    { "label": "desktop", "width": 1280, "height": 720 },
    { "label": "mobile", "width": 375, "height": 667 }
  ],
  "scenarios": [
    {
      "label": "Page d'accueil",
      "url": "https://monsite.com",
      "referenceUrl": "https://monsite.com",
      "selectors": ["header", "main", "footer"],
      "delay": 500
    }
  ]
}

Cette configuration capture le header, le contenu principal et le footer en desktop et mobile. L'option delay attend 500 ms avant la capture, utile pour les pages avec des animations ou des chargements asynchrones.

Cas d'usage concrets

BackstopJS excelle dans plusieurs situations :

Validation après une refonte CSS : après une mise à jour de votre framework CSS (Tailwind, Bootstrap), lancez BackstopJS pour vérifier que la mise en page n'a pas changé de manière inattendue.
Tests de responsive design : grâce aux viewports configurables, vous pouvez vérifier que votre site s'affiche correctement sur toutes les tailles d'écran.
Surveillance continue : intégré à un cron job ou à un webhook, BackstopJS peut surveiller votre site de production et vous alerter si un changement visuel est détecté.

Ses limites

Technique : nécessite des compétences en JavaScript et en ligne de commande
Installation requise : il faut installer Node.js et configurer l'environnement
Maintenance : les scénarios de test doivent être mis à jour manuellement quand le site évolue
Pas d'IA : la comparaison est purement pixel par pixel, ce qui génère des faux positifs

Quand l'utiliser

BackstopJS est adapté pour les équipes de développement qui ont des compétences techniques et veulent une solution gratuite et personnalisable. Il convient particulièrement aux projets où l'on souhaite un contrôle total sur la configuration.

2. Percy (version open source)

Ce que c'est

Percy, développé par BrowserStack, propose une version open source de son outil de visual testing. Percy fonctionne comme un service qui capture et compare des screenshots de manière automatisée.

Ce qu'il fait bien

Intégration CI/CD native : Percy s'intègre avec GitHub Actions, CircleCI, Travis CI et bien d'autres
Interface web collaborative : les équipes peuvent reviewer les changements visuels ensemble
Gestion des branches : les changements visuels sont associés aux pull requests
SDK multiples : supporte Selenium, Cypress, Playwright, Puppeteer et Ruby Capybara

Ses limites

Plan gratuit limité : la version gratuite est réservée aux projets open source ou a des limites de screenshots mensuels
Dépendance cloud : les screenshots sont stockés sur les serveurs de Percy
Configuration technique : nécessite l'installation d'un SDK et la modification du code de test

Exemple d'intégration avec GitHub Actions

Percy s'intègre directement dans vos workflows CI/CD. Voici un exemple de configuration GitHub Actions :

name: Visual Testing
on: [push, pull_request]
jobs:
  percy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run test:visual
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

Avec cette configuration, chaque push ou pull request déclenche les tests visuels. Percy compare les screenshots avec la baseline et affiche les différences directement dans l'interface de la pull request.

Cas d'usage concrets

Review de pull requests : Percy signale les changements visuels directement dans la PR, permettant aux reviewers de voir l'impact visuel du code.
Design systems : les équipes qui maintiennent des bibliothèques de composants utilisent Percy pour vérifier que les mises à jour de composants ne cassent pas l'apparence existante.
Projets open source : le plan gratuit pour les projets open source permet aux contributeurs de vérifier visuellement leurs contributions.

Quand l'utiliser

Percy est pertinent pour les projets open source ou les équipes qui utilisent déjà BrowserStack et veulent une intégration fluide dans leur workflow de développement.

3. Playwright Screenshots

Ce que c'est

Playwright, le framework d'automatisation de navigateurs de Microsoft, propose des fonctionnalités natives de capture d'écran et de comparaison visuelle. C'est une solution intégrée, sans outil supplémentaire à installer.

Ce qu'il fait bien

Déjà dans votre stack : si vous utilisez Playwright pour vos tests fonctionnels, les captures sont gratuites
Multi-navigateur : supporte Chromium, Firefox et WebKit nativement
Comparaison intégrée : la méthode expect(page).toHaveScreenshot() compare automatiquement les screenshots
Gratuit et open source : Playwright est sous licence Apache 2.0

Ses limites

Comparaison basique : pas d'intelligence artificielle, comparaison pixel par pixel uniquement
Configuration manuelle : il faut écrire le code de test pour chaque page à vérifier
Sensibilité : les différences d'anti-aliasing ou de rendu de police génèrent des faux positifs
Pas d'interface de review : pas de dashboard collaboratif pour visualiser les différences

Exemple de test avec Playwright

const { test, expect } = require('@playwright/test');

test('Page d\'accueil - capture visuelle', async ({ page }) => {
  await page.goto('https://monsite.com');
  await expect(page).toHaveScreenshot('accueil-desktop.png');
});

test('Page d\'accueil - version mobile', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('https://monsite.com');
  await expect(page).toHaveScreenshot('accueil-mobile.png');
});

La première exécution crée les screenshots de référence. Les exécutions suivantes comparent automatiquement les nouvelles captures avec la baseline. En cas de différence, Playwright génère un rapport de comparaison.

Cas d'usage concrets

Tests de composants React/Vue/Angular : Playwright peut capturer des composants individuels en plus des pages complètes, idéal pour les design systems.
Vérification multi-navigateur : le même test s'exécute sur Chromium, Firefox et WebKit sans modification, assurant la cohérence visuelle entre navigateurs.
Tests d'états dynamiques : en combinant les actions (cliquer, remplir un formulaire) et les captures, vous pouvez vérifier visuellement différents états d'une interface (formulaire vide, avec erreurs, avec succès).

Quand l'utiliser

Playwright Screenshots est idéal si vous utilisez déjà Playwright et que vous voulez ajouter un niveau de vérification visuelle sans outil supplémentaire.

4. LambdaTest (Free Tier)

Ce que c'est

LambdaTest est une plateforme de test cloud qui propose, entre autres fonctionnalités, du visual testing. Le plan gratuit permet de découvrir les capacités de la plateforme.

Ce qu'il fait bien

Écosystème complet : LambdaTest va au-delà du visual testing avec le test fonctionnel, l'accessibilité et le test sur mobile réel
Cloud multi-navigateur : accès à plus de 3000 combinaisons navigateur/OS
Intégrations nombreuses : CI/CD, gestionnaires de test, outils de collaboration
Plan gratuit généreux : permet de tester avec des limites raisonnables

Ses limites

Limites du plan gratuit : nombre de minutes et de screenshots limités mensuellement
Complexité : la richesse de l'écosystème peut être intimidante pour les débutants
SDK nécessaire : l'intégration technique reste requise pour automatiser les tests visuels

Cas d'usage concrets

Tests cross-browser : si votre application doit fonctionner sur Chrome, Firefox, Safari et Edge, LambdaTest permet de capturer des screenshots sur chacune de ces plateformes sans infrastructure locale.
Tests d'accessibilité : LambdaTest intègre des vérifications d'accessibilité (WCAG) en plus du visual testing, permettant un double contrôle.
Équipes avec des contraintes de sécurité : LambdaTest propose des fonctionnalités de test sur des environnements sécurisés, utile pour les entreprises avec des politiques de sécurité strictes.

Quand l'utiliser

LambdaTest convient aux équipes qui veulent une plateforme tout-en-un et qui sont prêtes à investir dans un plan payant à mesure que leurs besoins grandissent.

5. Delta-QA

Ce que c'est

Delta-QA est une solution de visual testing conçue pour la simplicité. Contrairement aux autres outils de cette liste, Delta-QA est pensé pour les équipes qui veulent démarrer le visual testing sans compétence technique.

Ce qu'il fait bien

Aucune installation : pas de SDK, pas de Node.js, pas de configuration technique
Aucune compétence technique requise : pas besoin de savoir coder ou de comprendre les pipelines CI/CD
Interface intuitive : démarrer un test visuel se fait en quelques clics
Sans formation : pas de courbe d'apprentissage, pas de documentation technique à assimiler

Ses limites

Solution plus récente : l'écosystème d'intégrations est en croissance continue
Approche différente : Delta-QA privilégie la simplicité plutôt que la personnalisation technique poussée

Quand l'utiliser

Delta-QA est la solution idéale si vous cherchez à démarrer le visual testing sans investissement en temps, en formation ou en compétences techniques. C'est l'outil pour les équipes qui veulent des résultats immédiats.

Tableau comparatif

Critère	BackstopJS	Percy (OSS)	Playwright	LambdaTest	Delta-QA
Prix	Gratuit	Gratuit (OSS)	Gratuit	Free tier	Gratuit
Installation requise	Oui	Oui	Oui	Oui	Non
Compétences techniques	Requises	Requises	Requises	Requises	Non requises
Intégration CI/CD	Oui	Oui	Oui	Oui	Oui
Interface collaborative	Non	Oui	Non	Oui	Oui

Comment choisir ?

Le choix dépend de votre contexte :

Vous êtes développeur et voulez du contrôle total : BackstopJS ou Playwright
Vous êtes en open source : Percy
Vous voulez une plateforme complète : LambdaTest
Vous voulez la simplicité, sans code et sans formation : Delta-QA

Questions à se poser pour faire le bon choix

Pour affiner votre décision, posez-vous ces questions :

Est-ce que quelqu'un dans mon équipe sait coder en JavaScript ou Python ? Si non, éliminez BackstopJS, Playwright et Cypress Visual. Tournez-vous vers Delta-QA ou LambdaTest.
Est-ce que mon projet est open source ? Si oui, Percy et Chromatic offrent des plans gratuits dédiés.
Est-ce que j'ai besoin de tester sur de vrais mobiles et navigateurs ? Si oui, LambdaTest ou Percy (via BrowserStack) sont les options les plus complètes.
Est-ce que j'utilise déjà un framework de test ? Si vous êtes sur Playwright, ajoutez toHaveScreenshot(). Si vous êtes sur Cypress, utilisez un plugin de snapshot. Si vous êtes sur Storybook, Chromatic est le choix naturel.
Quel est mon budget à long terme ? Les outils gratuits (BackstopJS, Playwright) nécessitent du temps de maintenance. Les outils payants (Percy, Chromatic, LambdaTest) coûtent de l'argent mais réduisent la charge de travail. Delta-QA se situe entre les deux : pas de coût initial, pas de maintenance technique.
Est-ce que je dois rendre des comptes à des non-techniciens ? Si votre directeur ou votre client veut voir les résultats visuels sans passer par un développeur, une interface web collaborative (Percy, LambdaTest, Delta-QA) est indispensable.

Pourquoi Delta-QA ?

Parmi toutes ces alternatives, Delta-QA se distingue par son approche radicalement simple :

Zéro installation : pas de SDK, pas de dépendance, pas de configuration technique
Zéro compétence requise : pas besoin de formation en test automatisé, pas besoin de TAU (Test Automation University), pas besoin de connaître le JavaScript ou Python
Prix transparent : pas de Test Units, pas de calcul complexe, pas de surprise
Démarrage immédiat : vous pouvez lancer votre premier test visuel en quelques minutes, pas en quelques jours

Si vous en avez assez de la complexité des outils de visual testing, découvrez Delta-QA sur delta-qa.com. C'est l'alternative la plus simple pour le visual testing.