Setup Playwright

.github/workflows/e2e.yml

@@ -0,0 +1,27 @@
+# name: End-to-End tests
+# on:
+#   push:
+#     branches: [main]
+#   pull_request:
+#     branches: [main]
+# jobs:
+#   test:
+#     timeout-minutes: 60
+#     runs-on: ubuntu-latest
+#     steps:
+#       - uses: actions/checkout@v4
+#       - uses: actions/setup-node@v4
+#         with:
+#           node-version: lts/*
+#       - name: Install dependencies
+#         run: npm install -g pnpm && pnpm install
+#       - name: Install Playwright Browsers
+#         run: pnpm exec playwright install --with-deps
+#       - name: Run Playwright tests
+#         run: pnpm exec playwright test
+#       - uses: actions/upload-artifact@v4
+#         if: always()
+#         with:
+#           name: playwright-report
+#           path: playwright-report/
+#           retention-days: 30

examples/starknet-react-next/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/starknet-react-next/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev -p 3002",
     "build": "next build",
+    "test": "playwright test",
     "start": "next start -p 3002",
     "lint": "next lint",
     "format": "prettier --write ."
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@cartridge/tsconfig": "workspace:^",
+    "@playwright/test": "^1.44.1",
     "@types/node": "^20.6.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",

examples/starknet-react-next/playwright.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:3002",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
+  ],
+  webServer: {
+    command: "cd ../../ && pnpm dev",
+    url: "http://localhost:3002",
+    reuseExistingServer: !process.env.CI,
+  },
+});

examples/starknet-react-next/tests/example.spec.ts

@@ -0,0 +1,44 @@
+import { test, expect, CDPSession } from "@playwright/test";
+
+let client: CDPSession;
+let authenticatorId: string;
+
+test.beforeEach(async ({ page }) => {
+  client = await page.context().newCDPSession(page);
+  await client.send("WebAuthn.enable");
+  const result = await client.send("WebAuthn.addVirtualAuthenticator", {
+    options: {
+      protocol: "ctap2",
+      transport: "internal",
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+      automaticPresenceSimulation: true,
+    },
+  });
+  authenticatorId = result.authenticatorId;
+
+  await page.goto("/");
+});
+
+test("has title", async ({ page }) => {
+  await expect(page).toHaveTitle(/StarkNet ❤️ React/);
+});
+
+test.describe("Connect", () => {
+  test.describe("Log in", () => {
+    test("should allow me to login and connect to Controller", async ({
+      page,
+    }) => {
+      await page.getByRole("button", { name: "Connect" }).click();
+      const modal = page.frameLocator("#cartridge-modal");
+      await expect(
+        modal.getByText("Play with Cartridge Controller"),
+      ).toBeVisible();
+      await modal.getByPlaceholder("Username").fill("test-0");
+      await modal.getByRole("button", { name: "LOG IN" }).click();
+
+      await expect(page.getByText("Address: ")).toBeVisible();
+    });
+  });
+});