Cómo Obtener Coordenadas de Pantalla en Windows 11, macOS y Para Diseñadores / QA

Cómo Obtener Coordenadas de Pantalla en Windows 11

Windows ofrece varias formas integradas y de terceros para encontrar coordenadas X/Y. El método que elijas depende de si necesitas una medición rápida puntual o un flujo de trabajo de seguimiento en vivo continuo.

Método 1: Usar la Herramienta Integrada (Sin Instalación)

Cada PC con Windows desde 1985 ha incluido Paint, y su barra de estado muestra coordenadas de píxeles en vivo cuando pasas el cursor sobre una imagen. Esto es perfecto para medir coordenadas desde una captura de pantalla estática.

1. Presiona PrtSc (Impr Pant) para capturar todo tu escritorio al portapapeles.
2. Abre la aplicación Paint (busca "Paint" en el menú Inicio).
3. Presiona Ctrl+V para pegar la captura de pantalla.
4. Mueve el ratón sobre la imagen. Mira la esquina inferior izquierda de la ventana de Paint para ver las coordenadas X, Y en vivo.

Método 2: Encontrar Coordenadas del Ratón con PowerShell

PowerShell incluye acceso a la API de Windows que permite leer la posición del cursor en tiempo real sin instalar software adicional.

1. Presiona Win + X y selecciona Terminal (admin) o PowerShell.
2. Ejecuta el siguiente comando para obtener la posición actual del ratón:

   Add-Type -AssemblyName System.Windows.Forms
   [System.Windows.Forms.Cursor]::Position

3. El resultado muestra las coordenadas X e Y actuales del ratón en píxeles de pantalla.
4. Para monitorear en tiempo real, ejecuta el comando repetidamente o guárdalo en un script .ps1.

Método 3: Obtener Coordenadas con AutoHotkey en Windows 11

AutoHotkey es la herramienta más potente para automatización de coordenadas en Windows. Permite no solo leer la posición del ratón, sino también mover el cursor y hacer clic en coordenadas exactas.

1. Descarga e instala AutoHotkey v2 desde el sitio oficial.
2. Crea un archivo nuevo con extensión .ahk y pega este script:

   ; Mostrar coordenadas del ratón en tiempo real con AutoHotkey v2
   #Requires AutoHotkey v2.0
   #SingleInstance Force
   
   CoordMode "Mouse", "Screen"
   
   F1::{
       MouseGetPos &x, &y
       MsgBox "Coordenadas del ratón:`nX: " x "`nY: " y
   }

3. Haz doble clic en el archivo .ahk para ejecutarlo.
4. Presiona F1 en cualquier momento para ver las coordenadas actuales del ratón en una ventana emergente.

Método 4: Microsoft PowerToys (usuarios avanzados)

La suite oficial de Microsoft PowerToys incluye una "Regla de pantalla" y "Utilidades de ratón" que pueden mostrar coordenadas en vivo y medir distancias entre puntos.

1. Descarga PowerToys desde Microsoft Store o GitHub.
2. Activa la utilidad "Retícula del puntero del ratón".
3. Usa la retícula para alinearte precisamente con cualquier píxel y leer su posición.

Método 5: Herramienta en línea a pantalla completa (mejor para seguimiento en vivo)

Para rastrear movimientos del ratón en vivo a través de tu escritorio real sin pegar capturas de pantalla, una herramienta web a pantalla completa es la opción más flexible.

1. Abre la Herramienta de Coordenadas de Pantalla en Chrome o Edge.
2. Haz clic en el botón Pantalla completa o presiona F11.
3. Mueve el ratón a cualquier lugar. Los valores exactos de X/Y se actualizan en tiempo real.
4. Presiona el botón de bloqueo o haz clic para congelar una coordenada para copiar.

Comportamiento Multi-Monitor de Windows 11

Windows trata múltiples monitores como un único escritorio virtual. El monitor principal contiene el origen (0, 0). Los monitores colocados a la izquierda producen coordenadas X negativas; los monitores colocados arriba producen coordenadas Y negativas. Puedes verificar tu disposición abriendo Configuración > Sistema > Pantalla y observando cómo se organizan los rectángulos de los monitores entre sí.

Cómo Obtener Coordenadas del Ratón en macOS

macOS proporciona herramientas integradas elegantes para el descubrimiento de coordenadas, pero el modelo de escalado de pantalla Retina introduce una capa de abstracción que los usuarios de Windows pueden encontrar confusa al principio.

Método 1: La retícula de captura de pantalla integrada (Cmd + Shift + 4)

Este es el método nativo más rápido y no requiere instalación.

1. Presiona Comando (⌘) + Shift + 4.
2. Tu cursor se convierte en una retícula de precisión con números X, Y en vivo mostrados junto a él.
3. Mueve a tu ubicación objetivo y lee las coordenadas.
4. Presiona Esc para cancelar sin guardar un archivo de captura.

Método 2: Rastreador en línea para flujos de trabajo de copiar-pegar

Si necesitas copiar coordenadas exactas en un script o registrar una secuencia de posiciones, una herramienta web es más práctica que memorizar números de la retícula.

1. Abre la Herramienta de Coordenadas de Pantalla en Safari o Chrome.
2. Entra en modo pantalla completa con Control + Comando + F (Safari) o F11 (Chrome).
3. Mueve el ratón para rastrear y copiar posiciones X/Y exactas en tiempo real.

Advertencia de pantalla Retina de macOS

La mayoría de los Macs modernos usan pantallas Retina con una relación de píxeles del dispositivo de 2,0 (o más en Pro Display XDR). macOS usa por defecto una resolución "escalada" que parece 1440 x 900 en un panel de 2880 x 1800. La retícula de Cmd+Shift+4 muestra coordenadas de puntos lógicos, no píxeles físicos.

Si tu script de automatización (por ejemplo, Python con PyAutoGUI, AppleScript o Hammerspoon) requiere coordenadas de píxeles físicos, multiplica los valores de la retícula por tu factor de escala de respaldo:

# Conversión de lógico a físico en macOS
logical_x, logical_y = 720, 450  # valores de Cmd+Shift+4
backing_scale = 2.0              # 2,0 para la mayoría de Macs Retina
physical_x = int(logical_x * backing_scale)
physical_y = int(logical_y * backing_scale)

Para determinar tu factor de escala de respaldo exacto programáticamente, usa NSScreen.main?.backingScaleFactor en Swift, o ejecuta system_profiler SPDisplaysDataType | grep "Retina" en Terminal para confirmar tu tipo de pantalla.

Accessibility Inspector (desarrolladores)

Los desarrolladores de macOS pueden usar Accessibility Inspector (incluido con Xcode) para inspeccionar posiciones de elementos de la interfaz tanto en coordenadas de pantalla como de ventana. Esto es especialmente útil al escribir AppleScript o pruebas de automatización de interfaz para aplicaciones nativas de macOS.

Coordenadas de Pantalla para Diseñadores UI/UX

Diseñar interfaces pixel-perfect en Figma, Adobe XD, Sketch o Photoshop requiere fluidez en los sistemas de coordenadas que usan los desarrolladores. Una entrega de diseño que ignora la traducción de coordenadas es una receta para discrepancias en la implementación.

Concepto 1: Coordenadas de artboard vs globales

Las herramientas de diseño usan un sistema de coordenadas relativas que puede confundir a los desarrolladores si no se documenta adecuadamente.

• Coordenadas de artboard: Dentro de Figma o Sketch, la esquina superior izquierda de tu Artboard o Frame específico siempre es (0, 0). Un elemento posicionado en (120, 80) está a 120px del borde izquierdo del Artboard y a 80px de la parte superior.
• Coordenadas globales: En un monitor físico, la esquina superior izquierda de toda la pantalla es (0, 0). Nuestra herramienta web mide coordenadas globales de pantalla, no relativas al artboard.

Al entregar especificaciones, siempre indica si tus valores X/Y son relativos a un contenedor padre, al artboard o al viewport global. Una convención común es incluir una nota como: "Todas las coordenadas son relativas a la esquina superior izquierda del artboard salvo que se indique lo contrario."

Concepto 2: Traducir X/Y a CSS

Los valores de X e Y del diseño se mapean directamente a propiedades CSS cuando se usa posicionamiento absoluto:

/* Figma: Elemento en X=120, Y=80 dentro de un contenedor 400x300 */
.pixel-perfect-element {
  position: absolute;
  left: 120px;   /* corresponde a Figma X */
  top: 80px;     /* corresponde a Figma Y */
  width: 160px;  /* ancho de Figma */
  height: 40px;  /* alto de Figma */
}

Concepto 3: Verificación de espaciado con matemática de coordenadas

En lugar de estimar a ojo si dos botones están espaciados uniformemente, usa coordenadas para verificar matemáticamente:

/* Si el Botón A termina en X=200 y el Botón B empieza en X=220,
   el espacio es 20px. Si ambos botones tienen 80px de ancho y deben
   tener 16px de relleno, el espacio esperado es 16px.
   220 - 200 = 20px. Esto es 4px demasiado ancho. */

Exporta tu diseño como una imagen estática, cárgala en la Herramienta de Coordenadas de Pantalla, y pasa el cursor sobre los bordes para confirmar que los valores de espaciado coinciden con los tokens de tu sistema de diseño.

Flujo de trabajo de QA de diseño

Para QA de diseño — verificar que la página web implementada coincide con el diseño original — usa este flujo de trabajo:

1. Abre el sitio web en staging y tu archivo de Figma lado a lado.
2. Toma una captura de pantalla de la página web exactamente al ancho de viewport objetivo del diseño.
3. Sobrepón la captura de pantalla sobre el frame de Figma en una herramienta de diseño, o usa una extensión de navegador como PerfectPixel.
4. Usa la herramienta de coordenadas para medir desalineaciones en elementos específicos. Incluso una desviación de 1-2 píxeles es visible cuando conoces la posición esperada.

Coordenadas de Pantalla para Pruebas QA y Automatización

Los frameworks de pruebas de interfaz automatizadas como Selenium, Playwright y Cypress prefieren selectores basados en DOM (IDs, data-testids, etiquetas ARIA). Pero hay escenarios legítimos donde las coordenadas de pantalla son necesarias: juegos basados en canvas, visualizaciones WebGL, aplicaciones de dibujo complejas, wrappers de escritorio legacy, y pruebas de macros a nivel de SO.

Método 1: DevTools del navegador (QA web)

Para pruebas web estándar, puedes extraer coordenadas de elementos usando herramientas integradas del navegador sin bibliotecas externas.

1. Haz clic derecho en el elemento objetivo y selecciona Inspeccionar.
2. En el panel de Elementos, el modelo de caja computado muestra ancho, alto, relleno y margen.
3. Para coordenadas precisas relativas al viewport, abre la Consola y ejecuta:

   // Obtener el rectángulo delimitador relativo al viewport
   const rect = document.querySelector('[data-testid="submit"]').getBoundingClientRect();
   console.log(rect.x, rect.y, rect.width, rect.height);
   
   // Convertir coordenadas de viewport a coordenadas de documento
   const docX = rect.x + window.scrollX;
   const docY = rect.y + window.scrollY;

Método 2: Automatización de Escritorio con Coordenadas Globales

Al probar aplicaciones no web o usar herramientas como PyAutoGUI y AutoHotkey, necesitas coordenadas globales absolutas del monitor.

1. Abre la Herramienta de Coordenadas de Pantalla en modo pantalla completa.
2. Mueve el ratón sobre el área de la aplicación que estás probando.
3. Registra los valores de X e Y.
4. Introdúcelos en tu script de automatización:

   import pyautogui
   # Asegurar conciencia de DPI en Windows primero
   # (consulta la guía técnica para detalles)
   pyautogui.click(x=840, y=620)
   pyautogui.sleep(0.5)
   pyautogui.typewrite("Entrada de prueba", interval=0.01)

Obtener Coordenadas de Pantalla con Python (PyAutoGUI)

PyAutoGUI es la biblioteca más popular de Python para automatización de coordenadas de pantalla. Funciona en Windows, macOS y Linux, y permite mover el ratón, hacer clic y escribir texto en posiciones exactas.

1. Instala PyAutoGUI con pip:

   pip install pyautogui

2. Usa este script básico para obtener y usar coordenadas:

   import pyautogui
   
   # Obtener resolución de pantalla
   width, height = pyautogui.size()
   print(f"Resolución: {width}x{height}")
   
   # Obtener posición actual del ratón
   x, y = pyautogui.position()
   print(f"Posición actual: ({x}, {y})")
   
   # Mover el ratón a coordenadas específicas
   pyautogui.moveTo(960, 540, duration=0.5)
   
   # Hacer clic en una coordenada
   pyautogui.click(500, 300)
   
   # Escribir texto en la posición actual
   pyautogui.typewrite("Hola mundo", interval=0.01)

3. En Windows con escalado DPI, añade esta línea al inicio:

   import ctypes
   ctypes.windll.user32.SetProcessDPIAware()

Método 3: Pruebas de Regresión Basadas en Capturas de Pantalla

Para pruebas de regresión visual, las coordenadas se usan para definir "regiones de ignorado" (áreas que cambian intencionalmente, como marcas de tiempo) o "puntos calientes de diferencia" (áreas que deben permanecer idénticas al píxel).

// Ejemplo de Playwright: comparación visual pixel-perfect
// con una región de ignorado para el área del reloj
await expect(page).toHaveScreenshot('dashboard.png', {
  clip: { x: 0, y: 0, width: 1280, height: 720 },
  // Algunas herramientas permiten enmascarar rangos de coordenadas específicos
});

Viewport vs Pantalla: Un Marco de Decisión

Mejores Prácticas de QA

• Prefiere selectores DOM sobre coordenadas. Usa coordenadas solo cuando el objetivo no tenga un selector estable (canvas, WebGL, superposiciones de video).
• Registra coordenadas al tamaño de viewport objetivo. Los diseños responsivos desplazan posiciones de elementos en diferentes puntos de ruptura.
• Ten en cuenta el escalado del SO. Una prueba que pasa en una máquina de desarrollo al 100% de escalado puede fallar en un runner de CI al 125%. Consulta nuestra guía técnica para soluciones específicas por plataforma.
• Documenta las suposiciones de coordenadas. Incluye un README en tu suite de pruebas que indique la resolución de pantalla esperada, el nivel de zoom del navegador y el escalado del SO para pruebas basadas en coordenadas.

Hoja de Referencia Comparativa por Plataforma