Merge pull request #438 from ttaerrim/cypress-regression

[Feat] 시각적 회귀 테스트를 위한 cypress 세팅 추가

app/frontend/.gitignore

@@ -25,3 +25,7 @@ dist-ssr
 
 # env
 .env.*
+
+# cypress
+cypress/snapshots
+cypress/screenshots

app/frontend/cypress.config.ts

@@ -1,9 +1,11 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
 
 export default defineConfig({
   e2e: {
+    baseUrl: 'http://localhost:5173',
     setupNodeEvents(on, config) {
-      // implement node event listeners here
+      addMatchImageSnapshotPlugin(on, config);
     },
   },
 });

app/frontend/cypress/e2e/snapshot.cy.ts

@@ -0,0 +1,13 @@
+describe('Main Page', () => {
+  it('should render on desktop', () => {
+    cy.viewport('macbook-13');
+    cy.visit('/');
+    cy.matchImageSnapshot('desktop');
+  });
+
+  it('should render on mobile', () => {
+    cy.viewport('iphone-xr');
+    cy.visit('/');
+    cy.matchImageSnapshot('mobile');
+  });
+});

app/frontend/cypress/support/commands.ts

@@ -1,37 +1,4 @@
 /// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+
+addMatchImageSnapshotCommand();

app/frontend/package.json

@@ -59,6 +59,7 @@
     "@vanilla-extract/vite-plugin": "^3.9.0",
     "@vitejs/plugin-react": "^4.0.3",
     "cypress": "^13.6.1",
+    "cypress-image-snapshot": "^4.0.1",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",