Change detection vs visual regression testing

Tyto dva přístupy řeší odlišné problémy:

• Visual regression je hlavně CI quality gate pro vaše vlastní UI.
• Change detection je detekce produkčního driftu u externích kontraktů, které neovládáte.

Pokud závisíte na third-party API a webových rozhraních, obvykle potřebujete obojí, ale pro jiné vrstvy rizika. To je zvlášť užitečné pro týmy, které ještě nemají plnou visual suite, ale přesto potřebují provozní přehled v produkci.

Rychlé vymezení

Visual regression použijte, když potřebujete hluboké pixel-level aserce ve skriptovaných scénářích.

Change detection ve stylu DiffMonu použijte, když potřebujete průběžné provozní povědomí napříč mnoha externími surfaces s deterministickými diffy a incident workflow.

Produktové cesty:

• Website change detection
• API change monitoring
• Pricing and intervals

Srovnání: CI gate vs povědomí o produkčních kontraktech

Kdy screenshot diffy selhávají při monitoringu kontraktů

Monitoring založený na screenshotech se pro sledování externích kontraktů rychle zhoršuje:

• Citlivost na šum: drobné změny stylu nebo animací spouštějí false positives.
• Nejasné načasování: JS hydratace a asynchronní obsah vytvářejí flaky snapshoty.
• Složitá automation: downstream routing preferuje strukturované payloady, ne image blob.

Pro produkční contract monitoring jsou deterministické strukturální diffy snazší na triáž i automation.

Příklad monitoru zaměřeného na kontrakt

{
  "type": "html",
  "selectSelectors": [
    "#pricing-table",
    "main h1",
    "meta[name='robots']",
    "link[rel='canonical']"
  ],
  "ignoreSelectors": [
    ".cookie-banner",
    ".rotating-promo"
  ],
  "ignoreTextPatterns": [
    "\\d{4}-\\d{2}-\\d{2}"
  ]
}

Tím držíte pozornost na contract-relevant oblastech místo na churnu z full-page renderingu.

Doporučený kombinovaný stack

Použijte vrstvený přístup:

1. DiffMon pro šířku: průběžný monitoring mnoha externích rozhraní.
2. Playwright (nebo ekvivalent) pro hloubku: skriptované aserce scénářů s vysokým dopadem.
3. Sdílená incident policy: oba signály routeujte do stejného ownership modelu.

Příklad hlubší kontroly v CI:

import { test, expect } from '@playwright/test';
 
test('checkout button remains visible', async ({ page }) => {
  await page.goto('https://example.com/checkout');
  await expect(page.getByRole('button', { name: 'Complete purchase' })).toBeVisible();
});

To používejte pro deterministickou validaci konkrétních scénářů, zatímco produkční drift monitory pokrývají externí závislosti průběžně.

FAQ

Nahrazuje change detection visual regression testy?

Ne. Change detection pokrývá povědomí o produkčním driftu, zatímco visual regression zůstává užitečný pro hluboké CI aserce.

Proč používat strukturované diffy pro externí kontrakty?

Structured diffy se lépe automatizují i triážují, protože ukazují konkrétní pole a selectory místo čistě pixelových delt.

Jaký je praktický stack pro menší týmy?

Použijte DiffMon pro široké produkční pokrytí a menší Playwright suite pro high-risk scénáře, které potřebují hluboké skriptované ověření.

Další kroky

• Rozdělte své monitoring surfaces na CI-owned a production-owned kontroly.
• Přidejte structured monitory pro externí kontrakty ještě před dalšími screenshot kontrolami.
• Routeujte diff eventy i selhání testů do sdíleného on-call triage kanálu.
• Definujte, kdy incident resolve a kdy přijmout baseline pro očekávané rollouty.

Související návody

• Jak detekovat breaking změny API v produkci
• Monitorujte third-party závislosti
• Průvodce detekcí změn na webu

Začněte monitorovat s DiffMonem

Začněte s website change detection pro HTML contract drift, doplňte api change monitoring pro schema-level závislosti a správnou provozní kadenci vyberte na pricing.