Drugi kanał, nie drugi Percy
Jest 15 maja. W listopadzie 2022 porównałem to, co wtedy było bramką wyglądu: Playwright toHaveScreenshot, Backstop, Percy, Applitools Eyes. Tamten wpis nadal opisuje mój nightly. Dziś dokładam drugi kanał i chcę, żeby nikt go z tamtym nie zlewał. Wrzucam PNG do modelu z vision i dostaję zdania po polsku: “przycisk uciekł w prawo”, “banner daty zasłania CTA”. To jest opis. To nie jest exit 1.
Moja teza na maj 2024 jest wąska. LLM z vision umie opisać screenshot. Nie zastępuje pixel ani layout gate. W Playwright 1.44.0 z 6 maja toHaveScreenshot nadal failuje build. Komentarz modelu zostaje recenzją, którą czytam ja.
Stan warsztatu. Runner to 1.44.0. Snapshoty trzymam w gicie, --update-snapshots odpalam świadomie. Od DevDay 6 listopada 2023 mam gpt-4-vision-preview; od komunikatów z 9 kwietnia krąży alias gpt-4-turbo z vision i nie opieram na prasie jedynego datowania GA. Claude 3 od 4 marca też umie patrzeć na obraz. 13 maja, dwa dni temu, OpenAI ogłosiło GPT-4o jako lepszy w vision. Nie przerzucam na niego nightly i nie robię z niego rdzenia tego wpisu.
Czego tu nie będzie. Nie będzie “PNG do ChatGPT = visual regression w CI”. Nie będzie macierzy 2022 od nowa. Nie będzie oficjalnego “Playwright LLM screenshot assert”, bo w 1.44.0 go nie ma. Będzie syntetyczny baseline i actual z przesuniętym CTA.
Co już mam jako bramkę
Bramka wyglądu u mnie od maja 2022 i od 1.22 to toHaveScreenshot. W 1.44 nic tu nie zmieniło kontraktu: porównanie z baseline w repozytorium, fail gdy piksele rozjeżdżają się poza próg, diff w raporcie. To jest ta sama kategoria co Percy i Eyes z listopada 2022, tylko Eyes sprzedaje “Visual AI” jako własny silnik, nie jako czat, do którego wklejam PNG.
Fail jest werdyktem builda. Opinia modelu nie jest. Tę granicę wpisałem we wrześniu 2022 przy bramce i nightly i nie zamierzam jej rozmywać, bo model ładnie opisuje hero.
Co robię modelem
Biorę dwa PNG z syntetycznej strony marketingowej w repozytorium przykładów: baseline z piątku i actual z poniedziałku. Pytanie, które wklejam, jest celowo wąskie:
To baseline i actual tego samego hero.
Czy to regresja layoutu, czy tylko data-test banner?
Nie proponuj progu pikseli. Wypisz trzy zdania.Output traktuję jak hipotezę z lipca 2023: lista rzeczy do sprawdzenia, nie merge. Czasem wklejam sam actual, gdy wiem, co powinno tam być. Nie wpinam tego w Actions jako required check. Nie wrzucam production screenshotów z PII.
GPT-4o ma dwa dni i w demonstracjach wygląda pewniej na drobnym tekście. Na 15 maja nie mam z niego tygodnia pomiarów, więc zostawiam go przy jednym zdaniu. Para do opisu PNG to u mnie nadal gpt-4-turbo albo Claude 3, plus toHaveScreenshot obok.
Gdzie model kłamie
Demo: CTA na hero przesunąłem o szerokość jednej kolumny siatki. toHaveScreenshot pada. To jest poprawny czerwony.
Model napisał trzy zdania. Dwa były użyteczne: banner z datą na actualu jest nowy, CTA nie jest już w tej samej kolumnie co na baseline. Trzecie było błędne: “wygląda OK, to tylko treść”. Przy 2px na fontcie z CI też potrafi powiedzieć “OK”, a grid już nie trzyma. Halucynuje tekst na przycisku, którego w PNG nie ma, dokładnie tak jak w kwietniu Chat zmyślał data-testid.
Dlatego LLM nie jest required check. Pixel gate nie pyta, czy “wygląda OK”. Pyta, czy piksele się zgadzają. Eyes i Percy z 2022 też nie są czatem. Są narzędziami z baseline i progiem.
Kiedy w ogóle warto
Jednorazowa recenzja “co się zmieniło na marketingowym hero”, kiedy baseline jest stary i diff pikseli jest duży, a ja chcę zdań, nie szumu. Nie nightly dwustu viewportów. Nightly zostaje przy toHaveScreenshot albo przy Percy / Eyes, które już mam w procesie. Piramida nie dostaje nowej warstwy “LLM screenshot”.
Component testing z sierpnia 2023 tu nie mieszam: CT to montaż komponentu, nie visual E2E hero.
Podsumowanie
Vision przyspiesza czytanie screenshotu. Bramką w maju 2024 zostaje narzędzie z 2022 plus Playwright 1.44.
Trzy zdania na rok. toHaveScreenshot na 1.44.0 nadal zrzuca build przy przesuniętym CTA. Model opisuje ten sam PNG trzema zdaniami, z których jedno kłamie, że layout jest w porządku. Required check zostaje pikselem, nie czatem.
Czego z tego nie wynika. Nie wynika, że GPT-4o nie wejdzie do tego kanału za miesiąc. Nie wynika, że Eyes jest czatem. Nie wynika, że skasuję baseline.
Warunek dojrzałości: dwa opisy pod rząd na tym samym diffie nie przeczą pixel gate i nie wymyślają tekstu przycisku. Do tego czasu opisuję PNG z modelem i merguję dopiero gdy snapshot albo człowiek powie, że tak ma być.