Catégorie de détection

Responsive

Le responsive n'est plus un sujet réservé aux sites grand public : les applications métier se consultent désormais sur tablette en réunion, en mobilité chez un client ou sur des écrans externes au format inhabituel. Une régression visuelle sur un breakpoint intermédiaire (typiquement 820px sur iPad ou 1024px sur petit laptop) peut rendre une partie de votre application inutilisable sans que personne ne s'en aperçoive en local, parce que les développeurs travaillent en général sur un seul format. Le scénario classique : un breakpoint passé de 768px à 480px qui écrase les colonnes sur tablette, un menu hamburger remplacé par un menu desktop qui déborde de l'écran, ou un font-size mobile qui s'applique jusqu'à 1024px et fait paraître tout le texte trop petit sur un écran portable. Les container queries ajoutent une nouvelle dimension de complexité, parce qu'elles dépendent du contexte du parent et non du viewport global, ce qui rend les régressions encore moins prévisibles. Aujourd'hui, Delta-QA capture et compare chaque page sur un viewport desktop unique et déterministe : ce qui détecte déjà la grande majorité des régressions visuelles. La capture multi-viewport définie par l'équipe, qui créera une baseline visuelle multi-format et mettra en évidence les colonnes qui s'empilent mal, les éléments qui débordent, les textes qui rétrécissent, les composants qui se désalignent et les barres de défilement horizontales apparues sur chaque breakpoint, arrive bientôt. Elle permettra aux équipes QA de couvrir l'ensemble des points de rupture sans redimensionner manuellement un navigateur sur chaque écran à chaque déploiement.

11 / 437 cas testés 0 faux positif 0 faux négatif

Regardez-le détecter

Tester sur vos propres pages

Ce que nous détectons

Breakpoints media queries

Bientôt disponible : détectera les changements de layout déclenchés par les breakpoints sur les largeurs de viewport définies par l'équipe.

Container queries

Bientôt disponible : surveillera les règles @container qui adaptent le style des composants en fonction des dimensions du parent.

Layouts dépendants du viewport

Bientôt disponible : capturera les changements d'éléments utilisant des unités viewport (vw, vh, dvh, svh) et le dimensionnement relatif sur plusieurs viewports.

Images responsives

Bientôt disponible : suivra les changements de dimensionnement d'images, aspect-ratio et rendu srcset à travers les breakpoints.

Scénarios concrets

01 La grille qui s'empile mal sur tablette

Un développeur modifie le breakpoint responsive de 768px à 480px. Sur desktop et mobile (375px), tout passe. Mais sur tablette (768px), les 3 colonnes de features sont maintenant écrasées : le texte est illisible, les images se chevauchent. Vos visiteurs sur iPad voient un site cassé. Le testeur a vérifié sur desktop et sur mobile, pas sur les tailles intermédiaires. Aujourd'hui, Delta-QA compare sur un viewport desktop fixe ; la capture multi-viewport définie par l'équipe (qui détectera précisément ce type de casse sur tablette à chaque breakpoint) arrive bientôt.

02 Le menu hamburger qui ne s'ouvre pas

Le menu mobile (hamburger) fonctionne parfaitement à 375px. Mais à 820px (iPad), c'est le menu desktop qui s'affiche... sauf qu'il déborde de l'écran car il est conçu pour 1024px minimum. Les items de menu sont coupés, vos visiteurs sur iPad ne peuvent pas naviguer. Vérifier manuellement chaque composant sur chaque breakpoint, c'est irréaliste. Aujourd'hui, Delta-QA compare sur un viewport desktop fixe ; la capture multi-viewport définie par l'équipe (qui révélera ce type de débordement à 820px) arrive bientôt.

03 Le texte qui devient trop petit

Un développeur ajuste une media query et le font-size mobile (14px) s'applique maintenant jusqu'à 1024px au lieu de 768px. Sur un laptop, tout le texte est légèrement trop petit : les visiteurs plissent les yeux sans comprendre pourquoi. Le développeur testait sur son écran 1440px, tout allait bien de son côté. Aujourd'hui, Delta-QA compare sur un viewport desktop fixe ; la capture multi-viewport définie par l'équipe (qui détectera le texte rétréci et les décalages de mise en page à 1024px) arrive bientôt.

Prêt à détecter chaque régression visuelle ?

Téléchargez Delta-QA et détectez les changements CSS dans vos pages web, sans code.

macOS & Windows · gratuit · sans inscription