Move Playwright from apps/ui to packages/e2e-tests

.github/workflows/test-e2e.yml

@@ -0,0 +1,81 @@
+name: UI E2E Tests
+
+on:
+  - pull_request
+
+jobs:
+  e2e-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.6.0
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Run local node
+        working-directory: docker
+        run: docker compose -p dev up -d --build
+        env:
+          PROJECT: bako-id
+          MIN_GAS_PRICE: 1
+          WALLET_SECRET: # secret
+          DISPENSE_AMOUNT: 2000000
+          FUEL_CORE_PORT: 4000
+          FUEL_FAUCET_PORT: 4040
+          FUEL_IP: 0.0.0.0
+
+      - name: Deploy contracts
+        working-directory: packages/contracts
+        run: pnpm exec ts-node scripts/deploy.ts
+        env: 
+          PROVIDER_URL: http://localhost:4000/v1/graphql
+          PRIVATE_KEY: # secret
+          RECIPIENT_ADDRESS: # secret
+
+      - name: Start contracts
+        working-directory: packages/contracts
+        run: pnpm exec ts-node scripts/construct-contracts.ts
+        env: 
+          PROVIDER_URL: http://localhost:4000/v1/graphql
+          PRIVATE_KEY: # secret
+          RECIPIENT_ADDRESS: # secret
+
+      - name: Copy server .env.test to .env
+        working-directory: apps/server
+        run: cp .env.test .env
+
+      - name: Copy ui .env.test to .env
+        working-directory: apps/ui
+        run: cp .env.test .env
+
+      - name: Copy e2e-tests .env.example to .env
+        working-directory: packages/e2e-tests
+        run: cp .env.example .env
+
+      - name: Install Playwright
+        working-directory: packages/e2e-tests
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: pnpm run test:e2e
+        env: 
+          TEST_WALLET_PRIVATE_KEY: # secret
+
+      - name: Upload report to GitHub Actions Artifacts
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

apps/server/.env.test

@@ -0,0 +1 @@
+NEXT_PUBLIC_PROVIDER_URL=http://localhost:4000/v1/graphql

apps/ui/.env.test

@@ -0,0 +1,6 @@
+VITE_PROVIDER_URL=http://localhost:4000/v1/graphql
+VITE_EXPLORER_URL=https://app.fuel.network
+VITE_API_URL=http://localhost:3033/api
+VITE_MARKETPLACE_URL=http://localhost:3002
+VITE_MARKETPLACE_UI_URL=http://marketplace.localhost:5173
+VITE_ENVIRONMENT=local

apps/ui/.gitignore

@@ -26,10 +26,3 @@ dist-ssr
 
 routeTree.gen.ts
 .vercel
-
-# Playwright
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-.cache

apps/ui/package.json

@@ -7,8 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "test:e2e": "playwright test"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@bako-id/contracts": "workspace:*",
@@ -22,7 +21,7 @@
     "@ensdomains/ensjs": "4.0.2",
     "@fuels/connectors": "0.44.0",
     "@fuels/react": "0.44.0",
-    "@tanstack/react-query": "^5.59.16",
+    "@tanstack/react-query": "5.59.16",
     "@tanstack/react-router": "^1.77.8",
     "@tanstack/router-devtools": "^1.77.8",
     "@wagmi/connectors": "5.1.7",
@@ -47,12 +46,9 @@
     "zustand": "^5.0.7"
   },
   "devDependencies": {
-    "@fuels/playwright-utils": "^0.57.1",
-    "@playwright/test": "^1.53.1",
     "@tanstack/react-query-devtools": "^5.59.16",
     "@tanstack/router-vite-plugin": "^1.16.5",
     "@types/lodash": "^4.17.0",
-    "@types/node": "^24.0.3",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@types/react-text-mask": "^5.4.14",

apps/ui/src/main.tsx

@@ -69,6 +69,14 @@ if (isPreview || !shouldRenderMarketplace() || import.meta.env.DEV) {
   });
 }
 
+const isLocal = import.meta.env.VITE_ENVIRONMENT === 'local';
+if (isLocal) {
+  BASE_NETWORK_CONFIGS.push({
+    chainId: CHAIN_IDS.fuel.devnet,
+    url: 'http://localhost:4000/v1/graphql',
+  });
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ChakraProvider theme={defaultTheme}>

apps/ui/src/modules/marketplace/components/mintPanel/mintSuccess.tsx

@@ -69,7 +69,13 @@ export default function MintSuccess({
             objectPosition="center"
             maxH="116px"
           />
-          <Icon as={CloseIcon} cursor="pointer" onClick={onClose} mb="auto" />
+          <Icon
+            as={CloseIcon}
+            data-testid="close-modal-button"
+            cursor="pointer"
+            onClick={onClose}
+            mb="auto"
+          />
         </Flex>
 
         <Box position="relative">
@@ -136,7 +142,7 @@ export default function MintSuccess({
                         onClick={() =>
                           window.open(
                             `${explorerUrl}/tx/${transactionId}`,
-                            '_blank'
+                            '_blank',
                           )
                         }
                       >
@@ -169,7 +175,10 @@ export default function MintSuccess({
 const CustomNavigation = ({
   swiper,
   showGradient,
-}: { swiper: SwiperType | null; showGradient: boolean }) => {
+}: {
+  swiper: SwiperType | null;
+  showGradient: boolean;
+}) => {
   const [isBeginning, setIsBeginning] = useState(true);
   const [isEnd, setIsEnd] = useState(false);
 

apps/ui/src/modules/profile/components/nft/NftSaleCard.tsx

@@ -64,7 +64,7 @@ const NftSaleCard = ({
 
   const { executeOrderAsync, isPending: isExecuting } = useExecuteOrder(
     collection?.data?.id ?? '',
-    setTxId
+    setTxId,
   );
 
   const showDisplayBuyButton = displayBuyButton || isExecuting;
@@ -102,7 +102,7 @@ const NftSaleCard = ({
       successToast,
       errorToast,
       isConnected,
-    ]
+    ],
   );
 
   const handleOpenDialog = () => {
@@ -156,11 +156,14 @@ const NftSaleCard = ({
         style: 'currency',
         currency: 'USD',
       }).format(Number(order.price.usd)),
-    [order.price.usd]
+    [order.price.usd],
   );
   const orderPrice = useMemo(
-    () => typeof order.price.amount === 'string' ? order.price.amount : orderPriceFormatter(order.price.amount),
-    [order.price.amount]
+    () =>
+      typeof order.price.amount === 'string'
+        ? order.price.amount
+        : orderPriceFormatter(order.price.amount),
+    [order.price.amount],
   );
 
   const assetSymbolUrl = order.price.image || UnknownAsset;
@@ -170,7 +173,7 @@ const NftSaleCard = ({
 
   const isProcessigNewPrices = useMemo(() => {
     const hasOrderUpdated = updatedOrders.find(
-      (updatedOrder) => updatedOrder.orderId === order.id
+      (updatedOrder) => updatedOrder.orderId === order.id,
     );
     return (
       hasOrderUpdated &&
@@ -189,6 +192,7 @@ const NftSaleCard = ({
       }
       onMouseLeave={() => setDisplayBuyButton(false)}
       position="relative"
+      data-testid="nft-sale-card"
     >
       <Flex flexDir="column">
         <NftCard.Image boxSize={imageSize} src={imageUrl} />

apps/ui/src/routeTree.gen.ts

@@ -7,3 +7,29 @@
 // This file was automatically generated by TanStack Router.
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+
+export interface FileRoutesByFullPath {}
+export interface FileRoutesByTo {}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: never
+  fileRoutesByTo: FileRoutesByTo
+  to: never
+  id: '__root__'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {}
+}
+
+const rootRouteChildren: RootRouteChildren = {}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()