/** * M2 smoke E2E for every 2-player game (docs/10 §2): PC host creates the room from the game page, * a phone friend joins by link, host starts, both see the board, a few legal moves are played via * the keyboard (role="grid" boards support arrows + Enter) and reach the opponent. * Run: bun e2e/games.e2e.ts [gameId...] (needs apps/web/dist built) */ import { chromium, type Page } from 'playwright-core'; import { mkdirSync, mkdtempSync } from 'node:fs'; import { join } from 'node:path'; import { loadConfig } from '../apps/server/src/config'; import { startServer } from '../apps/server/src/server'; const PORT = Number(process.env.E2E_PORT ?? 4519); const ORIGIN = `http://localhost:${PORT}`; const SHOTS = process.env.E2E_SHOTS ?? join(import.meta.dir, '../test-results'); mkdirSync(SHOTS, { recursive: true }); /** Per game: key sequences on the grid, in turn order (first mover, second mover, ...). */ interface Plan { /** Total players including the host (default 2). Extra players join on phones. */ players?: number; /** Host changes room options before starting (inline settings form on PC). */ lobby?: (host: Page) => Promise; /** Steps run before normal moves (e.g. janggi formation choice). */ setup?: (host: Page, guest: Page) => Promise; /** Board games: key sequences on the grid, in turn order. */ moves?: string[][]; /** Card games: custom driver over all pages (host first). */ drive?: (pages: Page[]) => Promise; } /** Card games: whoever has the turn presses the first available safe action (check/call/…) until `rounds` actions were taken. */ async function pressActions(pages: Page[], labels: RegExp, rounds: number) { for (let n = 0; n < rounds; n++) { let done = false; for (let t = 0; t < 150 && !done; t++) { for (const p of pages) { const btn = p.getByRole('button', { name: labels }).first(); if ((await btn.count()) && (await btn.isEnabled({ timeout: 200 }).catch(() => false))) { if (await btn.click({ timeout: 1000 }).then(() => true, () => false)) { done = true; break; } } } if (!done) await pages[0]!.waitForTimeout(100); } if (!done) throw new Error(`no action button matching ${labels} became available (step ${n + 1})`); await pages[0]!.waitForTimeout(150); } } /** Waits until every page shows the hand result, then presses "다음 판으로" where it is offered. */ async function finishHand(pages: Page[]) { for (const p of pages) await p.getByText('이번 판 결과').first().waitFor({ timeout: 10_000 }); } /** 숫자 타일: whoever has the turn tries "도와줘" → "새 묶음" → "확정"; otherwise takes one tile. */ async function rummikubTurns(pages: Page[], turns: number) { const stats = { plays: 0, draws: 0, undo: false }; const myTurn = (p: Page) => p.evaluate(() => !!document.querySelector('.turn-status')?.textContent?.includes('내 차례예요')); const bar = (p: Page) => p.getByRole('group', { name: '내 차례 행동' }); /** Waits until a bar button is enabled / disabled (server answered). */ const barButton = (p: Page, name: string, enabled: boolean) => p.waitForFunction( ([n, e]) => [...document.querySelectorAll('.rk-bar button')].some((b) => b.textContent === n && b.hasAttribute('disabled') !== e), [name, enabled] as const, { timeout: 5000 }, ); for (let n = 0; n < turns; n++) { let mover: Page | null = null; for (let t = 0; t < 150 && !mover; t++) { for (const p of pages) if (!mover && (await myTurn(p))) mover = p; if (!mover) await pages[0]!.waitForTimeout(100); } if (!mover) throw new Error(`nobody has the turn (turn ${n + 1})`); await bar(mover).waitFor(); let played = false; await bar(mover).getByRole('button', { name: '도와줘' }).click(); const picked = await mover.locator('.rk-rack button[aria-pressed="true"]').count(); if (picked > 0) { // Tap one picked tile twice (deselect, select again) — the tap-to-select path. const first = mover.locator('.rk-rack button[aria-pressed="true"]').first(); const label = await first.getAttribute('aria-label'); await first.click(); await mover.locator(`.rk-rack button[aria-label="${label}"]`).first().click(); await bar(mover).getByRole('button', { name: '새 묶음' }).click(); await mover.locator('.rk-set').last().waitFor(); if (!stats.undo) { // Undo once (back to the turn start), then place again. await barButton(mover, '되돌리기', true); await bar(mover).getByRole('button', { name: '되돌리기' }).click(); await barButton(mover, '처음으로', false); stats.undo = true; await bar(mover).getByRole('button', { name: '도와줘' }).click(); await bar(mover).getByRole('button', { name: '새 묶음' }).click(); } const commit = bar(mover).getByRole('button', { name: '확정' }); await mover .waitForFunction(() => [...document.querySelectorAll('.rk-bar button')].some((b) => b.textContent === '확정' && b.classList.contains('btn-primary') && !b.hasAttribute('disabled')), null, { timeout: 5000 }) .then( () => (played = true), () => {}, ); if (played) { await commit.click(); stats.plays++; } else { await bar(mover).getByRole('button', { name: '처음으로' }).click(); await mover.waitForTimeout(300); } } if (!played) { await bar(mover).getByRole('button', { name: /^(한 장 가져오기|넘기기)$/ }).click(); const sheet = mover.getByRole('button', { name: /^되돌리고/ }); if (await sheet.count()) await sheet.click(); stats.draws++; } await mover.waitForFunction(() => !document.querySelector('.turn-status')?.textContent?.includes('내 차례예요'), null, { timeout: 5000 }); } console.log(` rummikub: ${stats.plays} plays, ${stats.draws} draws, undo ${stats.undo ? 'used' : 'not used'}`); return stats; } const PLANS: Record = { rummikub: { // PC host + phone guest, first meld "없음" so hint plays happen early; 10 real turns through the UI. lobby: async (host) => { await host.getByRole('group', { name: '첫 등록 최소 점수' }).getByRole('button', { name: '없음' }).click(); await host.getByRole('button', { name: '설정 저장' }).click(); await host.getByText('첫 등록 점수 없음').first().waitFor(); }, drive: async (pages) => { const stats = await rummikubTurns(pages, 10); if (stats.plays + stats.draws < 10) throw new Error('not enough turns'); }, }, seotda: { // 3 players, default 2장 섯다 (1장씩 두 번): everyone checks both betting rounds → showdown. players: 3, drive: async (pages) => { await pressActions(pages, /^(체크|콜)/, 6); await finishHand(pages); }, }, poker: { // 3 players, default 7포커: 초이스 (discard 1st card, open 2nd), then everyone checks 4 streets → showdown. players: 3, drive: async (pages) => { for (const p of pages) { const cards = p.locator('.pk-mine button'); await cards.first().waitFor(); await cards.nth(0).click(); await cards.nth(1).click(); await p.getByRole('button', { name: '확인', exact: true }).click(); } await pressActions(pages, /^체크/, 12); await finishHand(pages); }, }, othello: { // cursor starts at d4 (3,3): black d3 = up; then white c3 = up, left moves: [['ArrowUp', 'Enter'], ['ArrowUp', 'ArrowLeft', 'Enter']], }, chess: { // cursor starts on the e-file pawn of whoever is at the bottom: white e2-e4, black d7-d5 (board flipped) moves: [['Enter', 'ArrowUp', 'ArrowUp', 'Enter'], ['Enter', 'ArrowUp', 'ArrowUp', 'Enter']], }, baduk: { // cursor starts at 천원: black plays there, white plays one point to the left moves: [['Enter'], ['ArrowLeft', 'Enter']], }, janggi: { // Both sides pick 안상차림 (order may be han-first), then each pushes the centre 졸 one step. setup: async (host, guest) => { for (let round = 0; round < 20; round++) { let picked = false; for (const p of [host, guest]) { const btn = p.getByRole('button', { name: /^안상차림/ }); // The card list disappears right after choosing, so every probe must be short and tolerant. if ((await btn.count()) && (await btn.isEnabled({ timeout: 500 }).catch(() => false))) { picked = await btn .click({ timeout: 1000 }) .then(() => true) .catch(() => false); } } if (await host.evaluate(() => !document.body.innerText.includes('상차림을 골라'))) { if (await guest.evaluate(() => !document.body.innerText.includes('상차림을 골라'))) return; } if (!picked) await host.waitForTimeout(200); } throw new Error('상차림 단계가 끝나지 않음'); }, moves: [ ['ArrowUp', 'ArrowUp', 'Enter', 'ArrowUp', 'Enter'], ['ArrowUp', 'ArrowUp', 'Enter', 'ArrowUp', 'Enter'], ], }, }; const games = process.argv.slice(2).length ? process.argv.slice(2) : Object.keys(PLANS); const app = startServer({ config: loadConfig({ PORT: String(PORT), DB_PATH: join(mkdtempSync(join(process.env.TMPDIR ?? '/tmp', 'bg-e2e-')), 'app.db'), PUBLIC_ORIGIN: ORIGIN }), log: () => {}, staticDir: join(import.meta.dir, '../apps/web/dist'), }); const browser = await chromium.launch({ executablePath: process.env.CHROME ?? '/usr/bin/google-chrome', headless: true }); let failed = false; async function keys(page: Page, seq: string[]) { await page.locator('[role="grid"]').first().focus(); for (const k of seq) await page.keyboard.press(k); } for (const id of games) { const plan = PLANS[id]; if (!plan) { console.log(`✗ ${id}: no plan`); failed = true; continue; } const errors: string[] = []; const host = await (await browser.newContext({ viewport: { width: 1440, height: 900 }, locale: 'ko-KR' })).newPage(); const guests: Page[] = []; for (let g = 1; g < (plan.players ?? 2); g++) { guests.push(await (await browser.newContext({ viewport: { width: 390, height: 844 }, isMobile: true, hasTouch: true, locale: 'ko-KR' })).newPage()); } const guest = guests[0]!; for (const p of [host, ...guests]) p.on('pageerror', (e) => errors.push(`${id}: ${e.message}`)); try { await host.goto(`${ORIGIN}/g/${id}`); await host.getByRole('button', { name: /친구랑 하기/ }).click(); await host.getByLabel('내 이름(닉네임)').fill('방장'); await host.getByRole('button', { name: '이 이름으로 시작하기' }).click(); await host.waitForURL(/\/r\/\d{6}$/); const code = host.url().slice(-6); for (const [gi, g] of guests.entries()) { const nick = gi === 0 ? '친구' : `친구${gi + 1}`; await g.goto(`${ORIGIN}/r/${code}`); await g.getByLabel('내 이름(닉네임)').fill(nick); await g.getByRole('button', { name: '이 이름으로 입장하기' }).click(); await host.getByLabel('자리').getByText(nick, { exact: true }).waitFor(); } if (plan.lobby) await plan.lobby(host); await host.screenshot({ path: join(SHOTS, `${id}-0-lobby.png`) }); await host.getByRole('button', { name: '▶ 게임 시작' }).click(); await host.getByRole('button', { name: '시작하기' }).click(); if (plan.drive) { await host.locator('.turn-status').waitFor(); await plan.drive([host, ...guests]); } else { await host.locator('[role="grid"]').first().waitFor(); await guest.locator('[role="grid"]').first().waitFor(); } if (plan.setup) await plan.setup(host, guest); const status = async (p: Page) => (await p.locator('.turn-status').innerText()).trim(); // Sides may be random: whoever shows "내 차례예요" plays the next sequence. const myTurn = (p: Page) => p.evaluate(() => !!document.querySelector('.turn-status')?.textContent?.includes('내 차례예요')); for (const seq of plan.moves ?? []) { let mover: Page | null = null; for (let t = 0; t < 100 && !mover; t++) { if (await myTurn(host)) mover = host; else if (await myTurn(guest)) mover = guest; else await host.waitForTimeout(100); } if (!mover) throw new Error('nobody has the turn'); await keys(mover, seq); await mover.waitForFunction(() => !document.querySelector('.turn-status')?.textContent?.includes('내 차례예요'), null, { timeout: 5000 }); } await host.screenshot({ path: join(SHOTS, `${id}-1-game-pc.png`) }); await guest.screenshot({ path: join(SHOTS, `${id}-2-game-phone.png`) }); if (errors.length) throw new Error(errors.join(' | ')); console.log(`✓ ${id} (host: ${await status(host)})`); } catch (e) { failed = true; console.log(`✗ ${id}: ${(e as Error).message.split('\n')[0]}`); await host.screenshot({ path: join(SHOTS, `${id}-fail-host.png`) }).catch(() => {}); await guest.screenshot({ path: join(SHOTS, `${id}-fail-guest.png`) }).catch(() => {}); } } await browser.close(); await app.stop(); console.log(failed ? 'E2E FAILED' : 'E2E PASSED'); process.exit(failed ? 1 : 0);