Všichni průvodci › Podle použití
Podle použitíSafari, Firefox, telefony a tmavý režim v jednom běhu
Stejné flow projdete v Chromiu, WebKitu i Firefoxu, na předvolbách telefonů, tabletů i televize, ve světlém i tmavém režimu a každou kombinaci zkontrolujete na jedné plachtě.
V hlášení chyby stojí „na iPhonu je tlačítko pod klávesnicí“ a tým to zkouší v Chromu na notebooku. Kaloko projde flow v enginu Safari na obrazovce velikosti iPhonu, v barevném režimu, který zákazník používá, a postaví to vedle záchytu z Chromu.
Co nás pálí
Většina týmů kontroluje jeden prohlížeč v jedné velikosti ve světlém režimu. Safari, malé telefony, tablety, tmavý režim a omezený pohyb se řeší, až si zákazník stěžuje, a pak ručně na jednom zařízení.
Co se změní s Kalokem
Prohlížeče, předvolby zařízení, barevné schéma, omezený pohyb, vynucené barvy i režim nainstalované aplikace jsou rozměry běhu, stejně jako jazyky a viewporty. Každá kombinace se zachytí a zkontroluje; plachta mezi nimi přepíná vedle jazyka a stejný krok z jiného prohlížeče ukáže vedle sebe.
Jak to funguje
- Jednou nainstalujte enginy
npx kaloko browser install --browsers webkit,firefoxna každém počítači nebo v úloze CI. - Vyjmenujte, co potřebujete
ve scénáři (
browsers: [chromium, webkit],color_schemes: [light, dark],viewports: [iphone-se, pixel-8, ipad-landscape, laptop]) nebo pro jeden běh:kaloko start … --browsers chromium,webkit --color-schemes light,dark --viewports iphone-se,desktop-hd. - Projděte
kaloko walkprojde běh jednou pro každý engine a profil zařízení.kaloko walk --browsers webkitprojde jen záchyty běhu ve WebKitu. - Vyberte předvolby
kaloko devicesvypíše telefony od malých po velké, skládací telefony, tablety, notebook, desktop a šířky televize. Předvolba nastaví velikost obrazovky, poměr pixelů, dotyk i user agent;<předvolba>-landscapeji otočí naležato. - Zkontrolujte
na plachtě přepnete prohlížeč a schéma, otevřete rámeček zařízení, nebo stisknete G a uvidíte krok ve všech jazycích a viewportech najednou, na požádání i ve všech prohlížečích a schématech.
Skilly a prompty
Zákazník píše, že se pokladna rozbije v Safari na malém iPhonu. Projdi pokladnu na stagingu v Chromiu a WebKitu na iphone-se a obojí porovnej.Očekávaný výsledek: běh se záchyty iphone-se a iphone-se.webkit u každého kroku a seznam kroků, které se liší, i s důkazy.
Zkontroluj stránky účtu v tmavém režimu na desktopu i mobilu a řekni mi, kde nestačí kontrast textu.Očekávaný výsledek: tmavé záchyty každého kroku a kritéria kontrastu z packu a11y, zvlášť pro každé schéma.
Co dostanete
- Každou kombinaci jako záchyt s vlastními kontrolami, v CSS pixelech, takže komentáře i rozdíly sedí napříč zařízeními.
- Kontroly, které umí jen Chromium (strom přístupnosti, viditelný fokus, posuny layoutu), označené v jiných enginech jako „nehodnoceno“ i s důvodem, ne jako chyba.
- Nativní aplikace na stejné plachtě, když je potřebujete: viz mobilní aplikace a desktopové aplikace.
Otázky
Je WebKit totéž co Safari na iPhonu?
Je to engine Safari, který spouští Playwright s velikostí, poměrem pixelů, dotykem a user agentem zařízení. Chyby layoutu a enginu zachytí; zbytek zachytí skutečné zařízení.
Nebude kombinací moc?
Může být: tři viewporty, dva prohlížeče a dvě schémata dělají dvanáct screenshotů na krok a jazyk. Držte matici u toho, čeho se úkol týká; víc než 400 kombinací běh odmítne.
Jde zkontrolovat nainstalovaná PWA?
Ano. display_modes: [browser, standalone] zachytí stránku jako nainstalovanou: pravidla display-mode i matchMedia odpovídají jako standalone, ve velikosti celé obrazovky.