feat: easy / hard 를 구분하여 테스트를 실행할 수 있도록 함

Author: JunilHwang

.github/workflows/ci.yml

@@ -10,7 +10,45 @@ on:
   workflow_dispatch:
 
 jobs:
-  unit:
+  hard-basic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+      - run: |
+          pnpm install
+          pnpm run test:hard:basic
+  hard-advanced:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: |
+          pnpm install
+          npx playwright install --with-deps
+          pnpm run test:hard:advanced
+  easy-basic:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -27,8 +65,9 @@ jobs:
       - name: Install dependencies
         run: |
           pnpm install
-          pnpm run test
-  e2e:
+          npx playwright install --with-deps
+          pnpm run test:easy:basic
+  easy-advanced:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
@@ -47,4 +86,4 @@ jobs:
         run: |
           pnpm install
           npx playwright install --with-deps
-          pnpm run test:e2e
+          pnpm run test:easy:advanced

e2e/E2EHelpers.js

@@ -0,0 +1,28 @@
+export class E2EHelpers {
+  constructor(page) {
+    this.page = page;
+  }
+
+  // 페이지 로딩 대기
+  async waitForPageLoad() {
+    await this.page.waitForSelector('[data-testid="products-grid"], #products-grid', { timeout: 10000 });
+    await this.page.waitForFunction(() => {
+      const text = document.body.textContent;
+      return text.includes("총") && text.includes("개");
+    });
+  }
+
+  // 상품을 장바구니에 추가
+  async addProductToCart(productName) {
+    await this.page.click(
+      `text=${productName} >> xpath=ancestor::*[contains(@class, 'product-card')] >> .add-to-cart-btn`,
+    );
+    await this.page.waitForSelector("text=장바구니에 추가되었습니다", { timeout: 5000 });
+  }
+
+  // 장바구니 모달 열기
+  async openCartModal() {
+    await this.page.click("#cart-icon-btn");
+    await this.page.waitForSelector(".cart-modal-overlay", { timeout: 5000 });
+  }
+}