Visuell regressionstestning med skärmdumpsfångster

Utvecklingsteam använder Webshot för att fånga den typ av buggar som enhetstester missar – trasiga layouter, fallback-typsnitt, saknade ikoner, felaktiga responsiva lägen. Ta en skärmdump av staging, ta en av produktion, jämför paret. Klistra in jämförelsen i en PR-kommentar som bevis på att din ändring är säker (eller som bevis på att den nya buggen just dök upp).

Alla knappar öppnar skärmdumpsformuläret förkonfigurerat. Du kan ändra format och viewport när sidan har laddats.

Varför Webshot för detta

Hur man gör visuell regressionstestning

1. Välj de sidor du vill övervaka – startsidan, viktiga landningssidor, kassaprocessen, var som helst där en regression skulle skada.
2. Ta en skärmdump av varje i PNG + helskärm för dator + helskärm för mobil för att skapa en baslinje för ditt nuvarande produktionsutseende.
3. Efter din nästa driftsättning, ta skärmdumpar av samma URL:er igen. Jämför gammalt mot nytt med `pixelmatch` eller ImageMagick – allt över 1 % ändrade pixlar förtjänar mänsklig granskning.
4. Koppla det till CI: en hook före driftsättning tar en skärmdump av staging, en hook efter driftsättning tar en av produktion, och bygget misslyckas om skillnaden överskrider ditt tröskelvärde.

Vanliga frågor

Andra användningsfall: Skärmdumpar av Google Maps · Skärmdumpar av WordPress · QA för landningssidor · Skärmdumpar för juridiskt bevis · Skärmdumpar av sociala medier · Skärmdumpar för utvecklarflöden · Se alla →