Comment Obtenir les Coordonnées d'Écran sur Windows 11, macOS et Pour les Designers / QA

Comment Obtenir les Coordonnées d'Écran sur Windows 11

Windows offre plusieurs moyens intégrés et tiers pour trouver des coordonnées X/Y. La méthode que vous choisissez dépend de si vous avez besoin d'une mesure rapide ponctuelle ou d'un flux de travail de suivi en continu.

Méthode 1 : Utiliser l'Outil Intégré en Ligne (Sans Installation)

L'outil en ligne de Screen Coordinates est la méthode la plus rapide pour obtenir les coordonnées de la souris en temps réel sur Windows 11 sans installer de logiciel.

1. Ouvrez l'Outil de Coordonnées d'Écran dans Chrome ou Edge.
2. Cliquez sur le bouton Plein écran ou appuyez sur F11.
3. Déplacez votre souris n'importe où. Les valeurs exactes de X/Y se mettent à jour en temps réel.
4. Appuyez sur le bouton de verrouillage ou cliquez pour figer une coordonnée pour la copier.

Méthode 2 : Trouver les Coordonnées de la Souris avec PowerShell

Chaque PC Windows depuis 1985 inclut Paint, et sa barre d'état affiche les coordonnées de pixels en direct quand vous survolez une image. C'est parfait pour mesurer des coordonnées depuis une capture d'écran statique.

1. Appuyez sur PrtSc (Impr Écran) pour capturer tout votre bureau dans le presse-papiers.
2. Ouvrez l'application Paint (recherchez "Paint" dans le menu Démarrer).
3. Appuyez sur Ctrl+V pour coller la capture d'écran.
4. Déplacez votre souris sur l'image. Regardez le coin inférieur gauche de la fenêtre Paint pour voir les coordonnées X, Y en direct.

Méthode 3 : Obtenir les Coordonnées avec AutoHotkey sur Windows 11

La suite officielle PowerToys de Microsoft inclut une "Règle d'écran" et des "Utilitaires de souris" qui peuvent afficher des coordonnées en direct et mesurer des distances entre des points.

1. Téléchargez PowerToys depuis le Microsoft Store ou GitHub.
2. Activez l'utilitaire "Réticule du pointeur de souris".
3. Utilisez la réticule pour vous aligner précisément avec n'importe quel pixel et lire sa position.

Application Paint Intégrée (Méthode Hors Ligne)

Chaque PC Windows depuis 1985 inclut Paint, et sa barre d'état affiche les coordonnées de pixels en direct quand vous survolez une image. C'est parfait pour mesurer des coordonnées depuis une capture d'écran statique.

1. Appuyez sur PrtSc (Impr Écran) pour capturer tout votre bureau dans le presse-papiers.
2. Ouvrez l'application Paint (recherchez "Paint" dans le menu Démarrer).
3. Appuyez sur Ctrl+V pour coller la capture d'écran.
4. Déplacez votre souris sur l'image. Regardez le coin inférieur gauche de la fenêtre Paint pour voir les coordonnées X, Y en direct.

Comportement Multi-Moniteur de Windows

Windows traite plusieurs moniteurs comme un seul bureau virtuel. Le moniteur principal contient l'origine (0, 0). Les moniteurs placés à gauche produisent des coordonnées X négatives ; les moniteurs placés au-dessus produisent des coordonnées Y négatives. Vous pouvez vérifier votre disposition en ouvrant Paramètres > Système > Affichage et en observant comment les rectangles de moniteurs sont organisés les uns par rapport aux autres.

Comment Obtenir les Coordonnées de la Souris sur macOS

macOS fournit des outils intégrés élégants pour la découverte de coordonnées, mais le modèle de mise à l'échelle d'écran Retina introduit une couche d'abstraction que les utilisateurs de Windows peuvent trouver déroutante au début.

Méthode 1 : La Réticule de Capture d'Écran Intégrée (Cmd + Shift + 4)

C'est la méthode native la plus rapide et ne nécessite aucune installation.

1. Appuyez sur Commande (⌘) + Shift + 4.
2. Votre curseur devient une réticule de précision avec des numéros X, Y en direct affichés à côté.
3. Déplacez-vous vers votre emplacement cible et lisez les coordonnées.
4. Appuyez sur Esc pour annuler sans sauvegarder de fichier de capture.

Méthode 2 : Suiveur en Ligne pour les Flux de Copier-Coller

Si vous avez besoin de copier des coordonnées exactes dans un script ou d'enregistrer une séquence de positions, un outil web est plus pratique que de mémoriser les nombres de la réticule.

1. Ouvrez l'Outil de Coordonnées d'Écran dans Safari ou Chrome.
2. Entrez en mode plein écran avec Contrôle + Commande + F (Safari) ou F11 (Chrome).
3. Déplacez votre souris pour suivre et copier des positions X/Y exactes en temps réel.

Avertissement d'Écran Retina de macOS

La plupart des Macs modernes utilisent des écrans Retina avec un ratio de pixels de l'appareil de 2,0 (ou plus sur Pro Display XDR). macOS utilise par défaut une résolution "mise à l'échelle" qui ressemble à 1440 x 900 sur un panel de 2880 x 1800. La réticule Cmd+Shift+4 montre des coordonnées de points logiques, pas de pixels physiques.

Si votre script d'automatisation (par exemple, Python avec PyAutoGUI, AppleScript ou Hammerspoon) nécessite des coordonnées de pixels physiques, multipliez les valeurs de la réticule par votre facteur d'échelle de support :

# Conversion logique-physique macOS
logical_x, logical_y = 720, 450  # valeurs de Cmd+Shift+4
backing_scale = 2.0              # 2.0 pour la plupart des Macs Retina
physical_x = int(logical_x * backing_scale)
physical_y = int(logical_y * backing_scale)

Pour déterminer votre facteur d'échelle de support exact programmatiquement, utilisez NSScreen.main?.backingScaleFactor en Swift, ou exécutez system_profiler SPDisplaysDataType | grep "Retina" dans Terminal pour confirmer votre type d'écran.

Accessibility Inspector (Développeurs)

Les développeurs macOS peuvent utiliser Accessibility Inspector (fourni avec Xcode) pour inspecter les positions d'éléments d'interface à la fois en coordonnées d'écran et de fenêtre. C'est particulièrement utile quand vous écrivez de l'AppleScript ou des tests d'automatisation d'interface pour des applications macOS natives.

Coordonnées d'Écran pour les Designers UI/UX

Concevoir des interfaces pixel-perfect dans Figma, Adobe XD, Sketch ou Photoshop nécessite une fluidité dans les systèmes de coordonnées que les développeurs utilisent. Une livraison de design qui ignore la traduction de coordonnées est une recette pour des divergences d'implémentation.

Concept 1 : Coordonnées d'artboard vs globales

Les outils de design utilisent un système de coordonnées relatives qui peut confondre les développeurs s'il n'est pas correctement documenté.

• Coordonnées d'artboard : Dans Figma ou Sketch, le coin supérieur gauche de votre Artboard ou Frame spécifique est toujours (0, 0). Un élément positionné en (120, 80) est à 120px du bord gauche de l'Artboard et à 80px du haut.
• Coordonnées globales : Sur un moniteur physique, le coin supérieur gauche de tout l'écran est (0, 0). Notre outil web mesure des coordonnées d'écran globales, pas relatives à l'artboard.

Quand vous livrez des spécifications, indiquez toujours si vos valeurs X/Y sont relatives à un conteneur parent, à l'artboard ou au viewport global. Une convention commune est d'inclure une note comme : "Toutes les coordonnées sont relatives au coin supérieur gauche de l'artboard sauf indication contraire."

Concept 2 : Traduire X/Y en CSS

Les valeurs de X et Y du design se mappent directement aux propriétés CSS quand on utilise un positionnement absolu :

/* Figma : Élément en X=120, Y=80 dans un conteneur 400x300 */
.pixel-perfect-element {
  position: absolute;
  left: 120px;   /* correspond à Figma X */
  top: 80px;     /* correspond à Figma Y */
  width: 160px;  /* largeur Figma */
  height: 40px;  /* hauteur Figma */
}

Concept 3 : Vérification d'espacement avec des mathématiques de coordonnées

Au lieu d'estimer à l'œil si deux boutons sont espacés uniformément, utilisez des coordonnées pour vérifier mathématiquement :

/* Si le Bouton A se termine en X=200 et le Bouton B commence en X=220,
   l'écart est de 20px. Si les deux boutons font 80px de large et doivent
   avoir 16px de remplissage, l'écart attendu est de 16px.
   220 - 200 = 20px. C'est 4px trop large. */

Exportez votre design comme une image statique, chargez-la dans l'Outil de Coordonnées d'Écran, et passez le curseur sur les bords pour confirmer que les valeurs d'espacement correspondent aux tokens de votre système de design.

Flux de travail de QA design

Pour le QA design — vérifier que la page web implémentée correspond au design original — utilisez ce flux de travail :

1. Ouvrez le site web en staging et votre fichier Figma côte à côte.
2. Prenez une capture d'écran de la page web exactement à la largeur de viewport cible du design.
3. Superposez la capture d'écran sur le frame Figma dans un outil de design, ou utilisez une extension de navigateur comme PerfectPixel.
4. Utilisez l'outil de coordonnées pour mesurer les décalages à des éléments spécifiques. Même une déviation de 1-2 pixels est visible quand vous connaissez la position attendue.

Coordonnées d'Écran pour les Tests QA et l'Automatisation

Les frameworks de tests d'interface automatisés comme Selenium, Playwright et Cypress préfèrent les sélecteurs basés sur le DOM (IDs, data-testids, étiquettes ARIA). Mais il existe des scénarios légitimes où les coordonnées d'écran sont nécessaires : jeux basés sur canvas, visualisations WebGL, applications de dessin complexes, wrappers de bureau legacy, et tests de macros au niveau du SO.

Méthode 1 : DevTools du navigateur (QA web)

Pour les tests web standards, vous pouvez extraire les coordonnées d'éléments en utilisant les outils intégrés du navigateur sans bibliothèques externes.

1. Faites un clic droit sur l'élément cible et sélectionnez Inspecter.
2. Dans le panneau Éléments, le modèle de boîte calculé montre la largeur, la hauteur, le remplissage et la marge.
3. Pour des coordonnées précises relatives au viewport, ouvrez la Console et exécutez :

   // Obtenir le rectangle délimitant relatif au viewport
   const rect = document.querySelector('[data-testid="submit"]').getBoundingClientRect();
   console.log(rect.x, rect.y, rect.width, rect.height);
   
   // Convertir les coordonnées de viewport en coordonnées de document
   const docX = rect.x + window.scrollX;
   const docY = rect.y + window.scrollY;

Méthode 2 : Automatisation de bureau avec des coordonnées globales

Quand vous testez des applications non web ou utilisez des outils comme PyAutoGUI et AutoHotkey, vous avez besoin de coordonnées globales absolues du moniteur.

1. Ouvrez l'Outil de Coordonnées d'Écran en mode plein écran.
2. Déplacez votre souris sur la zone de l'application que vous testez.
3. Enregistrez les valeurs de X et Y.
4. Introduisez-les dans votre script d'automatisation :

   import pyautogui
   # Assurer la conscience du DPI sur Windows d'abord
   # (consultez le guide technique pour les détails)
   pyautogui.click(x=840, y=620)
   pyautogui.sleep(0.5)
   pyautogui.typewrite("Entrée de test", interval=0.01)

Méthode 3 : Tests de régression basés sur des captures d'écran

Pour les tests de régression visuelle, les coordonnées sont utilisées pour définir des "régions d'ignorance" (zones qui changent intentionnellement, comme les horodatages) ou des "points chauds de différence" (zones qui doivent rester identiques au pixel près).

// Exemple Playwright : comparaison visuelle pixel-perfect
// avec une région d'ignorance pour la zone de l'horloge
await expect(page).toHaveScreenshot('dashboard.png', {
  clip: { x: 0, y: 0, width: 1280, height: 720 },
  // Certains outils permettent de masquer des plages de coordonnées spécifiques
});

Viewport vs Écran : un cadre de décision

Meilleures pratiques de QA

• Préférez les sélecteurs DOM aux coordonnées. Utilisez des coordonnées uniquement quand la cible n'a pas de sélecteur stable (canvas, WebGL, superpositions vidéo).
• Enregistrez les coordonnées à la taille de viewport cible. Les layouts responsifs déplacent les positions d'éléments à différents points de rupture.
• Tenez compte de la mise à l'échelle du SO. Un test qui passe sur une machine de développement à 100% de mise à l'échelle peut échouer sur un runner de CI à 125%. Consultez notre guide technique pour les solutions spécifiques par plateforme.
• Documentez les hypothèses de coordonnées. Incluez un README dans votre suite de tests qui indique la résolution d'écran attendue, le niveau de zoom du navigateur et la mise à l'échelle du SO pour les tests basés sur des coordonnées.

Obtenir les Coordonnées d'Écran avec Python (PyAutoGUI)