Merge pull request #11 from py-dev-nandini-12/feature/e2e-after-vercel-deployment

new workflow to run e2e after deployment

Author: py-dev-nandini-12

.github/workflows/e2e-corn.yml

@@ -22,13 +22,8 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-
-      - name: Install Playwright
-        run: npx exec playwright install --with-deps
+      - name: Install dependencies
+        run: npm ci && npx playwright install --with-deps
 
       - name: Run E2E tests
         env:

.github/workflows/e2e.yml

@@ -0,0 +1,40 @@
+name: Playwright Tests
+
+on:
+  deployment_status:
+
+jobs:
+  run-e2es:
+    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm ci && npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        env:
+          BASE_URL: ${{ github.event.deployment_status.environment_url }}
+        run: npx playwright test
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+      - name: GitHub Notification
+        if: failure()
+        uses: actions/github-script@v6
+        with:
+          script: |
+            github.issues.createComment({
+              issue_number: 1,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: "🚨 Playwright tests failed after deployment!"
+            });

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+playwright-report

playwright.config.ts

@@ -6,4 +6,8 @@ export default defineConfig({
     port: 3000,
     reuseExistingServer: true,
   },
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: 'playwright-report' }]
+  ],
 });

src/app/form/page.tsx

@@ -1,70 +1,3 @@
-// 'use client';
-
-// import { useState } from 'react';
-
-// export default function Form() {
-//   const [name, setName] = useState('');
-//   const [email, setEmail] = useState('');
-//   const [message, setMessage] = useState('');
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState('');
-
-//   const handleSubmit = async (e: React.FormEvent) => {
-//     e.preventDefault();
-//     setLoading(true);
-//     setMessage('');
-//     setError('');
-    
-//     try {
-//       const res = await fetch('/api/submit', {
-//         method: 'POST',
-//         headers: { 'Content-Type': 'application/json' },
-//         body: JSON.stringify({ name, email }),
-//       });
-
-//       if (!res.ok) throw new Error('Failed to submit');
-//       const data = await res.json();
-//       setMessage(data.message);
-//     } catch {
-//       setError('Submission failed. Please try again.');
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
-
-//   const handleReset = () => {
-//     setName('');
-//     setEmail('');
-//     setMessage('');
-//     setError('');
-//   };
-
-//   return (
-//     <div>
-//       <h1>Form Page</h1>
-//       <form onSubmit={handleSubmit}>
-//         <input
-//           type="text"
-//           placeholder="Enter your name"
-//           value={name}
-//           onChange={(e) => setName(e.target.value)}
-//         />
-//         <input
-//           type="email"
-//           placeholder="Enter your email"
-//           value={email}
-//           onChange={(e) => setEmail(e.target.value)}
-//         />
-//         <button type="submit" disabled={loading}>
-//           {loading ? 'Submitting...' : 'Submit'}
-//         </button>
-//         <button type="button" onClick={handleReset}>Reset</button>
-//       </form>
-//       {message && <p style={{ color: 'green' }}>{message}</p>}
-//       {error && <p style={{ color: 'red' }}>{error}</p>}
-//     </div>
-//   );
-// }
 
 
 'use client';