Porovnat s referenčním během a ignorovat, co se mění pořád

Před vydáním chcete znát jednu odpověď: co vypadá jinak než verze, kterou tým přijal, a jestli je to záměr. Dobrý běh scénáře se stane jeho referencí a každý další běh se s ní porovná.

Nastavte referenci #

Na plachtě otevřete běh, se kterým jste spokojení, zvolte Přijmout běh a potom Nastavit jako referenci. Každý scénář má jednu referenci a ta se změní, jen když někdo nastaví novou. Z terminálu:

npx kaloko reference --scenario checkout --baseline --run <run-id>
npx kaloko reference --scenario checkout                     # ukáže současnou

Porovnejte běh #

Na plachtě zvolte Porovnat a referenci (nebo předchozí běh, případně jakýkoli jiný běh scénáře). Každý krok dostane štítek s podílem změněných pixelů a označí se kritéria, kterým se změnil verdikt nebo důkaz.

V detailu kroku se na změnu podíváte čtyřmi způsoby: Vedle sebe, Rozdíl, Posuvník (táhnete čáru přes oba screenshoty) a Prolnutí (jeden přechází do druhého). Klávesa G ukáže jeden krok ve všech jazycích a velikostech obrazovky najednou.

Stejné porovnání jako text, pro agenta nebo poznámky k vydání:

npx kaloko compare                       # aktuální běh proti referenci, jinak proti předchozímu běhu
npx kaloko compare --run <id> --baseline <id> --json

Ignorujte, co se mění pořád #

Hodiny, reklamy, karusely a „před 3 minutami“ se mění při každém běhu a skutečné rozdíly v nich zapadnou. Vynechte je z porovnání pixelů pomocí ignore: u kroku:

nodes:
  - id: home
    ignore:
      - { selector: ".ticker", note: živé ceny }
      - { rect: [0, 620, 1280, 180], viewport: desktop }

Hledat je ručně nemusíte:

npx kaloko walk --stability 3      # tři screenshoty každého snímku krátce po sobě
npx kaloko stability               # co se pohnulo, ve srovnání s dřívějšími běhy scénáře
npx kaloko stability --apply       # zapíše návrhy do ignore:

Než návrhy použijete, podívejte se na screenshoty: oblast, která se změnila, protože se opravdu změnila stránka, není šum.

Šum mohou označit i kontrolující. V detailu kroku na kaloko.app zvolí Označit proměnlivou oblast a nakreslí na screenshot obdélník. Ten se pak čárkovaně ukáže u každého běhu flow a rozdíl na plachtě ho hned vynechá. Do scénáře tyto oblasti dostanete příkazem:

npx kaloko stability --pull

Dotčené kroky pak projděte znovu: snímek si zapamatuje, které oblasti vynechal.