Regresja wizualna w Cypressie za pomocą wtyczki Visual Regression Diff
Czym jest regresja wizualna?
Regresja wizualna to po prostu porównywanie zrzutów ekranów aplikacji bądź jej części. Robimy wzorcowy zrzut ekranu gdy aplikacja wygląda tak jak od niej oczekujemy. Następnie podczas testu robimy kolejny zrzut ekranu i porównujemy go z wzorcem.
Krok 1 – instalacja wtyczki do Cypressa
npm install --save-dev @frsource/cypress-plugin-visual-regression-diff
Krok 2 – kofiguracja projektu
// cypress/support/index.ts
import "@frsource/cypress-plugin-visual-regression-diff";
// cypress.config.ts
import { defineConfig } from "cypress";
import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
export default defineConfig({
// initPlugin must be called in the section where it is used: e2e or component
e2e: {
setupNodeEvents(on, config) {
initPlugin(on, config);
},
},
component: {
setupNodeEvents(on, config) {
initPlugin(on, config);
},
},
});
Krok 3 – Wywołanie w teście
cy.get('body').matchImage();
Przy pierwszym uruchomieniu zostanie utworzony folder __image_snapshots__. W nim będą przechowywane zrzuty wzorcowe i zrzuty z obecnym wyglądem aplikacji.
Inne z tej kategorii: Programowanie, Testowanie
Takie tam: www.marczuk.org