Bildschirmkoordinaten unter Windows 11, macOS & für Designer / QA-Testing

Bildschirmkoordinaten unter Windows 11 finden

Windows bietet mehrere integrierte und Drittanbieter-Methoden zur Ermittlung von X/Y-Koordinaten.

Methode 1: Integriertes Online-Tool nutzen (keine Installation)

Das schnellste Verfahren ohne Installation ist das Bildschirmkoordinaten-Tool direkt im Browser.

1. Öffnen Sie das Bildschirmkoordinaten-Tool in Chrome, Edge oder Firefox.
2. Klicken Sie auf Vollbild oder drücken Sie F11.
3. Bewegen Sie die Maus. Die X/Y-Werte aktualisieren sich in Echtzeit.
4. Klicken Sie, um eine Koordinate zu sperren und zu kopieren.

Methode 2: Mauskoordinaten mit PowerShell finden

Windows PowerShell kann Mauskoordinaten über .NET-APIs auslesen – nützlich für Admins und Power-User.

Add-Type -AssemblyName System.Windows.Forms
$pos = [System.Windows.Forms.Cursor]::Position
Write-Output "X: $($pos.X), Y: $($pos.Y)"

Methode 3: AutoHotkey für Windows 11 Koordinaten

AutoHotkey ist die beliebteste Windows-Automatisierungssprache und bietet eingebaute Koordinaten-Variablen.

#Requires AutoHotkey v2.0
; Zeigt die aktuelle Mausposition in einem Tooltip
#Persistent
SetTimer ShowPos, 100
ShowPos() {
    MouseGetPos &x, &y
    ToolTip "X: " x " Y: " y
}

Windows Multi-Monitor-Verhalten

Windows behandelt mehrere Monitore als einen virtuellen Desktop. Der primäre Monitor trägt den (0, 0) Ursprung. Monitore links davon erzeugen negative X-Koordinaten.

Mauskoordinaten unter macOS abrufen

macOS bietet elegante integrierte Tools, aber das Retina-Display-Skalierungsmodell fügt eine Abstraktionsebene hinzu.

Methode 1: Integrierte Screenshot-Fadenkreuz (Cmd + Shift + 4)

1. Drücken Sie Command (⌘) + Shift + 4.
2. Der Cursor wird zu einem Fadenkreuz mit Live-X/Y-Zahlen.
3. Bewegen Sie zur Zielposition und lesen Sie die Koordinaten.
4. Drücken Sie Esc zum Abbrechen.

Methode 2: Online-Tracker für Copy-Paste

1. Öffnen Sie das Bildschirmkoordinaten-Tool in Safari oder Chrome.
2. Vollbildmodus mit Control + Command + F (Safari) oder F11 (Chrome).
3. Verfolgen und kopieren Sie X/Y-Positionen in Echtzeit.

macOS Retina-Display-Warnung

Die meisten modernen Macs verwenden Retina-Displays mit einem Device Pixel Ratio von 2.0. Das Cmd+Shift+4-Fadenkreuz zeigt logische Punkt-Koordinaten, nicht physische Pixel. Für physische Pixel multiplizieren Sie mit dem Backing Scale Factor (normalerweise 2x).

logical_x, logical_y = 720, 450
backing_scale = 2.0
physical_x = int(logical_x * backing_scale)
physical_y = int(logical_y * backing_scale)

Bildschirmkoordinaten für UI/UX-Designer

Pixelgenaue Interfaces in Figma, Adobe XD, Sketch oder Photoshop zu designen erfordert Kenntnisse über die Koordinatensysteme, die Entwickler verwenden.

Konzept 1: Artboard- vs. globale Koordinaten

Design-Tools verwenden ein relatives Koordinatensystem:

• Artboard-Koordinaten: In Figma oder Sketch ist die obere linke Ecke Ihres Artboards immer (0, 0).
• Globale Koordinaten: Auf einem physischen Monitor ist die obere linke Ecke des gesamten Bildschirms (0, 0).

Konzept 2: X/Y zu CSS übersetzen

.pixel-perfect-element {
  position: absolute;
  left: 120px;   /* entspricht Figma X */
  top: 80px;     /* entspricht Figma Y */
  width: 160px;
  height: 40px;
}

Konzept 3: Abstandsverifikation mit Koordinatenmathematik

Anstatt zu schätzen, ob zwei Buttons gleichmäßig verteilt sind, verwenden Sie Koordinaten:

/* Button A endet bei X=200, Button B beginnt bei X=220
   Der Abstand ist 20px. Bei 16px Padding sollte er 16px sein.
   220 - 200 = 20px. Das ist 4px zu breit. */

Design-QA-Workflow

1. Öffnen Sie Staging-Website und Figma nebeneinander.
2. Machen Sie einen Screenshot der Webseite bei exakter Ziel-Viewport-Breite.
3. Überlagern Sie den Screenshot auf dem Figma-Frame.
4. Messen Sie Verschiebungen am Koordinatentool.

Bildschirmkoordinaten für QA-Testing & Automation

Frameworks wie Selenium, Playwright und Cypress bevorzugen DOM-basierte Selektoren. Aber es gibt legitime Szenarien, in denen Bildschirmkoordinaten nötig sind: Canvas-Spiele, WebGL-Visualisierungen, komplexe Zeichenanwendungen.

Methode 1: Browser DevTools (Web-QA)

1. Rechtsklick auf das Zielelement und Inspektieren wählen.
2. Das berechnete Box-Modell zeigt Breite, Höhe, Padding und Margin.
3. Für viewport-relative Koordinaten, öffnen Sie die Konsole:

   const rect = document.querySelector('[data-testid="submit"]').getBoundingClientRect();
   console.log(rect.x, rect.y, rect.width, rect.height);

Methode 2: Desktop-Automation mit globalen Koordinaten

1. Öffnen Sie das Bildschirmkoordinaten-Tool im Vollbildmodus.
2. Bewegen Sie die Maus über den zu testenden Anwendungsbereich.
3. Notieren Sie die X- und Y-Werte.
4. Eingabe in Ihr Automatisierungsskript:

   import pyautogui
   pyautogui.click(x=840, y=620)
   pyautogui.typewrite("Testeingabe", interval=0.01)

Viewport vs. Screen: Entscheidungsrahmen

QA Best Practices

• Bevorzugen Sie DOM-Selektoren über Koordinaten. Verwenden Sie Koordinaten nur, wenn das Ziel keinen stabilen Selektor hat.
• Zeichnen Sie Koordinaten bei Ziel-Viewport-Größe auf. Responsive Layouts verschieben Elemente bei verschiedenen Breakpoints.
• Berücksichtigen Sie OS-Skalierung. Siehe unseren technischen Leitfaden.
• Dokumentieren Sie Koordinaten-Annahmen. Fügen Sie eine README mit erwarteter Auflösung und Zoomstufe bei.

Bildschirmkoordinaten mit Python (PyAutoGUI)

PyAutoGUI ist die beliebteste Python-Bibliothek für Desktop-Automation und bietet einfache Methoden, um Mauskoordinaten zu lesen und zu steuern.

Mausposition in Echtzeit auslesen

import pyautogui

# Aktuelle Mausposition anzeigen
try:
    while True:
        x, y = pyautogui.position()
        print(f"X: {x}, Y: {y}", end="\r")
except KeyboardInterrupt:
    print("\nBeendet.")

Auf eine bestimmte Koordinate klicken

import pyautogui

# Klick auf Bildschirmmitte bei 1920x1080
pyautogui.click(960, 540)

# Mit Pause vor dem Klick
pyautogui.moveTo(960, 540, duration=0.5)
pyautogui.click()

Bildschirmgröße ermitteln

import pyautogui

width, height = pyautogui.size()
print(f"Bildschirm: {width}x{height}")
center_x = width // 2
center_y = height // 2
print(f"Mitte: ({center_x}, {center_y})")

Plattform-Vergleich