Add E2E tests

Author: GhostWalker562

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,11 @@
+### Description
+
+<!-- Please describe your change and its motivation. -->
+
+### Test Plan
+
+<!-- Please provide us with clear details for verifying that your changes work. -->
+
+### Related Links
+
+<!-- Please link to any relevant issues or pull requests! -->

.github/workflows/run-checks.yaml

@@ -0,0 +1,35 @@
+name: Run Checks
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  run-all-checks:
+    name: Run All Checks
+    runs-on: ubuntu-latest-16-core
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm 10.6.5
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.6.5
+
+      - name: Setup Node.js 22.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+
+      - name: Install Dependencies
+        run: pnpm i
+
+      - name: Install Playwright
+        run: pnpx playwright install --with-deps chromium
+
+      - name: Run End-to-End Tests
+        run: pnpm test:e2e
+        shell: bash

apps/web/.env.example

@@ -1,3 +1,5 @@
 NEXT_PUBLIC_ENABLE_REACT_SCAN=1
 NEXT_PUBLIC_APTOS_MAINNET_API_KEY=<api_key>
 NEXT_PUBLIC_APTOS_TESTNET_API_KEY=<api_key>
+
+CI=false

apps/web/.gitignore

@@ -37,3 +37,12 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/tests/lib/injection/build
+/tests/**/temp

apps/web/app/(authenticated)/vault/[vaultId]/(dashboard)/layout.tsx

@@ -85,6 +85,7 @@ export default function VaultLayout({ children }: PropsWithChildren) {
               className="px-6"
               onClick={() => setIsSendCoinsModalOpen(true)}
               disabled={!isOwner}
+              data-testid="send-coins-button"
             >
               Send <ArrowTopRightIcon className="w-6 h-6" />
             </Button>
@@ -116,6 +117,7 @@ export default function VaultLayout({ children }: PropsWithChildren) {
                   ? "text-primary cursor-default"
                   : "hover:opacity-80 active:opacity-60 cursor-pointer"
               )}
+              data-testid={`home-tab-item-${tab.id}`}
             >
               <VerticalCutReveal transition={{ delay: i * 0.05 }}>
                 {tab.label}

apps/web/app/(authenticated)/vault/[vaultId]/proposal/create/page.tsx

@@ -204,6 +204,7 @@ export default function CreateProposalPage() {
             <Button
               disabled={!simulation.data?.success || !isFormValid.value}
               onClick={() => setPage("confirm")}
+              data-testid="create-proposal-confirm-draft-button"
             >
               {!isSimulationError ? "Confirm Draft" : "Simulation Errors Found"}
             </Button>
@@ -371,6 +372,7 @@ export default function CreateProposalPage() {
                             <Button
                               onClick={createProposal}
                               isLoading={isCreatingProposal}
+                              data-testid="create-proposal-create-proposal-button"
                             >
                               Create Proposal
                             </Button>

apps/web/app/(authenticated)/vault/[vaultId]/proposal/pending/[sequenceNumber]/page.tsx

@@ -39,6 +39,7 @@ import SimulationCoinRow from "@/components/SimulationCoinRow";
 import { PendingTransactionRow } from "@/components/PendingTransactionRow";
 import { useRouter } from "next/navigation";
 import { jsonStringify } from "@/lib/storage";
+import Link from "next/link";
 
 export default function ProposalPage() {
   const queryClient = useQueryClient();
@@ -329,6 +330,7 @@ export default function ProposalPage() {
                 className="flex-1"
                 isLoading={isSecondaryActionLoading}
                 onClick={() => handleSecondaryAction(false)}
+                data-testid="reject-transaction-button"
               >
                 Reject
               </Button>
@@ -340,6 +342,7 @@ export default function ProposalPage() {
                 className="flex-1"
                 isLoading={isSecondaryActionLoading}
                 onClick={() => handleSecondaryAction(true)}
+                data-testid="approve-transaction-button"
               >
                 Approve
               </Button>
@@ -352,6 +355,7 @@ export default function ProposalPage() {
                   disabled={!canExecute.data || !isNext}
                   isLoading={isPrimaryActionLoading}
                   onClick={() => handlePrimaryAction("execute")}
+                  data-testid="execute-transaction-button"
                 >
                   Execute Transaction
                 </Button>
@@ -361,6 +365,7 @@ export default function ProposalPage() {
                   disabled={!isNext || !hasEnoughRejections}
                   isLoading={isPrimaryActionLoading}
                   onClick={() => handlePrimaryAction("remove")}
+                  data-testid="remove-transaction-button"
                 >
                   Remove Transaction
                 </Button>
@@ -436,7 +441,7 @@ export default function ProposalPage() {
                   {pendingTransactionsAhead?.map((transaction, i) => {
                     const sequenceNumber = latestSequenceNumber + i + 1;
                     return (
-                      <a
+                      <Link
                         key={transaction.payloadHash}
                         href={`/vault/${id}/proposal/pending/${sequenceNumber}`}
                       >
@@ -446,7 +451,7 @@ export default function ProposalPage() {
                           sequenceNumber={sequenceNumber}
                           showSequenceNumber={false}
                         />
-                      </a>
+                      </Link>
                     );
                   })}
                 </CardContent>

apps/web/app/(authenticated)/vault/[vaultId]/proposal/publish-contract/page.tsx

@@ -197,6 +197,7 @@ export default function PublishContractPage() {
                   !file || !jsonData || !isSimulationSuccess || !isOwner
                 }
                 onClick={() => setPage("confirm")}
+                data-testid="publish-contract-confirm-draft-button"
               >
                 Confirm Draft
               </Button>
@@ -348,6 +349,7 @@ export default function PublishContractPage() {
                             <Button
                               onClick={createProposal}
                               isLoading={isCreatingProposal}
+                              data-testid="publish-contract-create-proposal-button"
                             >
                               Create Proposal
                             </Button>

apps/web/app/(authenticated)/vault/[vaultId]/settings/export/page.tsx

@@ -45,7 +45,7 @@ export default function ExportSettingsPage() {
             </div>
             <br />
             <div className="flex gap-2">
-              <Button asChild>
+              <Button asChild data-testid="export-vaults-button">
                 <a
                   href={`data:text/json;charset=utf-8,${exportVaultsJSON}`}
                   download="petra-vaults-export.json"

apps/web/app/(authenticated)/vault/[vaultId]/settings/layout.tsx

@@ -46,6 +46,7 @@ export default function VaultSettingsLayout({ children }: PropsWithChildren) {
                   ? "text-primary cursor-default"
                   : "hover:opacity-80 active:opacity-60 cursor-pointer"
               )}
+              data-testid={`settings-tab-item-${tab.id}`}
             >
               <VerticalCutReveal transition={{ delay: i * 0.05 }}>
                 {tab.label}