Vision – AI widzi więcej niż Ty

Starter Pack: Vision

W tym odcinku…

AI przestało być narzędziem tylko tekstowym. Nowoczesne modele AI (takie jak ChatGPT czy Claude) potrafią nie tylko czytać tekst, ale też “patrzeć” na interfejsy. Dzięki funkcji Vision (tzw. multimodalności), zyskujesz w testach UI/UX drugą parę oczu.

Jak działa AI Vision i dlaczego to działa?
Funkcja Vision polega na tym, że wrzucasz modelowi zdjęcie (np. zrzut ekranu), a on analizuje je piksel po pikselu, potrafiąc wyłapać krzywe elementy, złe kolory czy problemy z kontrastem. Ręczne porównywanie gotowej strony z projektem graficznym jest bardzo męczące dla ludzkich oczu. AI działa tu jak Twój wirtualny asystent (Design QA) — błyskawicznie wskazuje różnice i potencjalne błędy dostępności (np. za słaby kontrast dla osób niedowidzących).

⚠️ Pamiętaj jednak: AI nie zna Waszych wewnętrznych firmowych standardów, więc zawsze samodzielnie weryfikuj jego ustalenia.

📚 Pojęcia, które warto znać:

• Pixel Perfect: Zmora testerów. Wymóg, by zakodowana przez programistę strona wyglądała w 100% identycznie jak projekt graficzny.
• Shift-Left Testing: Zasada w testowaniu, która mówi, by testować aplikację jak najwcześniej — najlepiej “przesunąć to w lewo” na osi czasu projektu. Czyli testujemy sam pomysł lub rysunek (np. na serwetce), zanim programista w ogóle zacznie pisać kod.
• OCR (Optical Character Recognition): Funkcja, dzięki której AI potrafi „przeczytać” i skopiować tekst widoczny na obrazku (np. z niedającego się skopiować komunikatu o błędzie na telefonie).

🎯 Jak wykorzystać Vision w pracy Testera? (3 strategie):

• 🎨 Design QA (Pixel Perfect):
  Wgraj makietę (np. z Figmy) i zrzut ekranu z produkcji. Poproś AI o znalezienie różnic w kolorach, marginesach i fontach. Oszczędzasz mnóstwo czasu na ręcznym “szukaniu różnic”.
• 📝 OCR i Raportowanie Błędów:
  Masz błąd na telefonie lub w konsoli, którego nie da się skopiować? Zrób screenshot lub zdjęcie. AI odczyta tekst błędu (dzięki funkcji OCR) i zaproponuje gotowy wsad do profesjonalnego zgłoszenia w Jirze.
• 🚀 Shift-Left (Testy z rysunku):
  Nie masz jeszcze kodu ani makiety? Narysuj formularz na kartce, zrób zdjęcie i poproś AI o wygenerowanie przypadków testowych na podstawie samego szkicu.

Prompty z odcinka

1. Cold Open
   🔗 https://travel.agileway.net/login
   [Załącz screenshot strony logowania]

   
   
   
   
   Rola: Ekspert UI/UX.
   Zadanie: Znajdź 3 krytyczne błędy wizualne na tym zrzucie ekranu.
   Kontekst: Formularz logowania. Bądź czepliwy co do wyrównania (alignment).
   

2. Design QA (Makieta vs Produkcja)

   

   

   Rola: Działaj jako precyzyjny Tester UI (Pixel Perfect).
   Zadanie: Porównaj Makietę (Obrazek 1) z Wdrożeniem (Obrazek 2).
   Kontekst: Wdrożenie musi być identyczne z projektem. Skup się na: kolorach przycisków, marginesach (padding) i wyrównaniu tekstów.
   Format: Wypunktowana lista różnic.
   

3. Szybki Raport z Błędu (OCR)
   🔗 https://www.saucedemo.com/
   [Załącz screenshot z błędem]

   Rola: Techniczny Tester Oprogramowania.
   Zadanie: Przeanalizuj ten zrzut ekranu z błędem i przygotuj wsad do zgłoszenia błędu (Bug Report).
   Kontekst: Użyj OCR, aby wyciągnąć treść błędu (nie przepisuj ręcznie). Zdiagnozuj potencjalną przyczynę (Root Cause).
   Format: Profesjonalny szablon zgłoszenia: [Tytuł] [Kroki do reprodukcji] [Treść błędu] [Przyczyna].
   

4. Testy z Rysunku (Shift-Left)
   [Załącz zdjęcie odręcznego rysunku formularza]

   Rola: Lead QA Engineer odpowiedzialny za Test Design.
   Zadanie: Na podstawie tego odręcznego szkicu formularza przygotuj plan testów.
   Kontekst: To wczesna faza (Shift-Left), nie ma jeszcze kodu. Uwzględnij walidację pola email i wymagalność zgód RODO.
   Format: Tabela: [Typ Testu] [Scenariusz] [Oczekiwany Rezultat].
   

Linki i materiały dodatkowe

• Applitools Visual Testing Guide
• OpenAI Vision Guide
• Nielsen Norman Group – Visual Design Basics