feat(e2e): add environment-aware fixture loading for staging tests

- Create e2e/fixtures/index.ts with auto-detection of staging environment
- Update test files to use authFixtures helper instead of hardcoded paths
- Skip tests that require fixtures not available on staging:
  - profile.spec.ts (needs member-edit fixture)
  - transaction-details.spec.ts (needs data fixtures)
- Fix hardcoded localhost URL in transaction-details.spec.ts

Amp-Thread-ID: https://ampcode.com/threads/T-019bf342-cc32-75ec-8607-df28efdf96cd
Co-authored-by: Amp <amp@ampcode.com>

Author: zainfathoni

e2e/cta.spec.ts

@@ -1,7 +1,8 @@
 import { test, expect } from './base-test'
+import { authFixtures } from './fixtures'
 
 test.use({
-  storageState: 'e2e/fixtures/auth/member-no-transaction.local.json',
+  storageState: authFixtures.memberNoTransaction,
 })
 
 test('Call to action has rendered in dashboard page', async ({ page }) => {

e2e/fixtures/index.ts

@@ -0,0 +1,68 @@
+/**
+ * Fixture path helpers for E2E tests.
+ * Automatically selects local or staging fixtures based on PLAYWRIGHT_BASE_URL or BASE_URL.
+ *
+ * The staging config sets PLAYWRIGHT_BASE_URL via the use.baseURL config.
+ * We also check process.argv for --config=staging to detect staging runs.
+ */
+
+const isStaging =
+  process.env.PLAYWRIGHT_BASE_URL?.includes('staging') ??
+  process.env.BASE_URL?.includes('staging') ??
+  process.argv.some((arg) => arg.includes('staging')) ??
+  false
+
+type AuthFixture =
+  | 'member'
+  | 'member-edit'
+  | 'member-no-transaction'
+  | 'author'
+  | 'admin'
+  | 'public'
+  | 'nobody'
+
+type DataFixture = 'users' | 'transactions'
+
+/**
+ * Get the auth fixture path for the current environment.
+ * Falls back to 'member' for staging if the specific fixture doesn't exist.
+ */
+export function getAuthFixture(name: AuthFixture): string {
+  if (isStaging) {
+    const stagingFixtures = ['member', 'author', 'admin']
+    const fixtureName = stagingFixtures.includes(name) ? name : 'member'
+    return `e2e/fixtures/auth/staging/${fixtureName}.staging.json`
+  }
+  return `e2e/fixtures/auth/${name}.local.json`
+}
+
+/**
+ * Get the data fixture path for the current environment.
+ */
+export function getDataFixturePath(type: DataFixture, name: string): string {
+  const suffix = isStaging ? 'staging' : 'local'
+  return `../../e2e/fixtures/${type}/${name}.${suffix}.json`
+}
+
+/**
+ * Check if running against staging environment.
+ * Can be used as a boolean or as a callback for test.skip()
+ */
+export const isStagingEnv = (): boolean => isStaging
+
+/**
+ * Auth fixture paths for direct use in test.use()
+ */
+export const authFixtures = {
+  member: getAuthFixture('member'),
+  memberEdit: getAuthFixture('member-edit'),
+  memberNoTransaction: getAuthFixture('member-no-transaction'),
+  author: getAuthFixture('author'),
+  admin: getAuthFixture('admin'),
+  public: isStaging
+    ? 'e2e/fixtures/auth/public.json'
+    : 'e2e/fixtures/auth/public.json',
+  nobody: isStaging
+    ? 'e2e/fixtures/auth/nobody.json'
+    : 'e2e/fixtures/auth/nobody.json',
+}

e2e/logout.spec.ts

@@ -1,7 +1,8 @@
 import { test, expect } from './base-test'
+import { authFixtures } from './fixtures'
 
 test.use({
-  storageState: 'e2e/fixtures/auth/member.local.json',
+  storageState: authFixtures.member,
 })
 
 test('Logout', async ({ page, isMobile, screen }) => {

e2e/profile.spec.ts

@@ -1,9 +1,13 @@
 import { test, expect } from './base-test'
+import { authFixtures, isStagingEnv } from './fixtures'
 
 test.use({
-  storageState: 'e2e/fixtures/auth/member-edit.local.json',
+  storageState: authFixtures.memberEdit,
 })
 
+// Skip profile tests on staging - requires member-edit fixture with specific user state
+test.skip(isStagingEnv, 'Skipping on staging - requires member-edit fixture')
+
 const user = {
   name: 'Zain Fathoni',
   phoneNumber: '+6512345678',

e2e/transaction-details.spec.ts

@@ -3,13 +3,17 @@ import { printRupiah } from '../app/utils/format'
 import { readFixture } from '../app/utils/fixtures'
 import { stripLeadingPlus } from '../app/utils/misc'
 import { test, expect } from './base-test'
+import { authFixtures, isStagingEnv } from './fixtures'
 
 test.use({
-  storageState: 'e2e/fixtures/auth/author.local.json',
+  storageState: authFixtures.author,
 })
 
 let memberSubmit: User, submitted: Transaction, rejected: Transaction
 
+// Skip transaction-details tests on staging (no data fixtures available)
+test.skip(isStagingEnv, 'Skipping on staging - no data fixtures available')
+
 test.beforeAll(async () => {
   memberSubmit = JSON.parse(
     await readFixture(`../../e2e/fixtures/users/member-submit.local.json`)
@@ -24,10 +28,11 @@ test.beforeAll(async () => {
 
 test('redirected to TransactionList page when transaction data with id of $transactionId is not exist', async ({
   page,
+  baseURL,
 }) => {
   await page.goto('/dashboard/transactions/1')
 
-  expect(page.url()).toBe('http://localhost:3000/dashboard/transactions')
+  expect(page.url()).toBe(`${baseURL}/dashboard/transactions`)
 })
 
 test('render transaction data if transaction data exists', async ({ page }) => {

playwright-staging-setup.ts

@@ -26,6 +26,8 @@ const REQUIRED_AUTH_FILES = [
  * 3. Close the browser - storage state is saved automatically
  */
 async function globalSetup() {
+  // Set BASE_URL for fixture path resolution
+  process.env.BASE_URL = 'https://staging.kelas.rumahberbagi.com'
   if (!fs.existsSync(STAGING_AUTH_DIR)) {
     fs.mkdirSync(STAGING_AUTH_DIR, { recursive: true })
     console.log(`Created staging auth directory: ${STAGING_AUTH_DIR}`)