nl-game/electron/e2e.cjs

// 端到端自检（开发用，不随应用打包），支持两种模式：
//   desktop（默认）：以 file:// 加载 dist 构建产物 + preload 注入，验证桌面端（hash 路由 + 配置服务器地址）
//   web：不带 preload 加载 Vite 开发服务器，等价纯浏览器环境，验证网页版（history 路由 + 同源代理）
// 流程：清空登录态 → 演示账号真实登录 → 大厅（含购买弹窗）→ 对战大厅 → WS 建房/退房 → 单机开一局 → 汇总页面报错
// 运行：npm run electron:e2e（桌面模式）；$env:NLG_E2E_MODE='web'; npx electron electron/e2e.cjs（网页模式，需 5173 开发服务器）
// NLG_E2E_GAME 可指定单机步骤玩哪款游戏（默认 snake，如 mario / linkgame）
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const fs = require('fs')

const MODE = process.env.NLG_E2E_MODE === 'web' ? 'web' : 'desktop'
const SERVER = process.env.NLG_SERVER || 'http://127.0.0.1:8080'
const WEB_URL = process.env.NLG_E2E_URL || 'http://localhost:5173'
const OUT_DIR = process.env.NLG_E2E_OUT || process.cwd()
const GAME = process.env.NLG_E2E_GAME || 'snake'
const SUFFIX = MODE === 'web' ? '-web' : ''
const pageErrors = []

// preload 依赖该同步 IPC 提供服务器地址（仅桌面模式挂 preload）
ipcMain.on('nlg:get-server-base', (e) => { e.returnValue = SERVER })
ipcMain.handle('nlg:set-server-base', () => ({ ok: true }))

const sleep = (ms) => new Promise((r) => setTimeout(r, ms))

async function main() {
  const win = new BrowserWindow({
    width: 1280,
    height: 820,
    show: true,
    backgroundColor: '#0f1220',
    webPreferences: MODE === 'desktop' ? { preload: path.join(__dirname, 'preload.cjs') } : {},
  })
  // 收集页面报错（Electron 新版事件对象：event.level 为 'error' 等字符串）
  win.webContents.on('console-message', (e) => {
    if (e?.level === 'error' && e?.message) pageErrors.push(e.message)
  })
  const js = (code) => win.webContents.executeJavaScript(code, true)
  // 截图：capturePage 在 Windows 上偶发 UnknownVizError（GPU 合成器抖动），重试且失败不阻断流程
  const shot = async (name) => {
    for (let i = 0; i < 3; i++) {
      try {
        const img = await win.webContents.capturePage()
        const file = path.join(OUT_DIR, `${name}${SUFFIX}.png`)
        fs.writeFileSync(file, img.toPNG())
        console.log('[e2e] screenshot:', file)
        return
      } catch (err) {
        if (i === 2) console.warn(`[e2e] 截图 ${name} 失败（不影响流程）：${err.message}`)
        else await sleep(600)
      }
    }
  }
  // 轮询等待页面条件成立
  const waitFor = async (cond, timeoutMs, desc) => {
    const t0 = Date.now()
    while (Date.now() - t0 < timeoutMs) {
      try {
        if (await js(cond)) return true
      } catch {}
      await sleep(300)
    }
    throw new Error(`等待超时：${desc}`)
  }
  // 路由条件与跳转：桌面端 hash 模式，网页版 history 模式
  const atRoute = (p) => (MODE === 'desktop' ? `location.hash === '#${p}'` : `location.pathname === '${p}'`)
  const goto = async (p) => {
    if (MODE === 'desktop') {
      await js(`location.hash = '#${p}'; true`)
    } else {
      // history 模式下直接整页跳转（等价用户输入地址），开发服务器有 SPA 回退
      await win.loadURL(`${WEB_URL}${p}`)
    }
    await waitFor(atRoute(p), 5000, `路由到 ${p}`)
  }

  if (MODE === 'desktop') {
    const distIndex = path.join(__dirname, '../dist/index.html')
    if (!fs.existsSync(distIndex)) throw new Error('缺少 dist/index.html，请先 npm run electron:dist')
    await win.loadFile(distIndex)
  } else {
    await win.loadURL(WEB_URL).catch(() => {
      throw new Error(`无法访问 ${WEB_URL}，请先 npm run dev 启动开发服务器`)
    })
  }

  // 第 0 步：清空历史登录态，确保从登录页开始
  await js('localStorage.clear(); true')
  await win.webContents.reload()
  await waitFor(`!!document.querySelector('input[placeholder^="用户名"]')`, 10000, '登录页渲染')
  console.log(`[e2e] 登录页已渲染（${MODE === 'desktop' ? 'file:// + hash 路由' : 'http + history 路由'}）`)

  // 第 1 步：填写演示账号并提交（触发 input 事件以驱动 v-model）
  await js(`
    (() => {
      const u = document.querySelector('input[placeholder^="用户名"]')
      u.value = 'xiaoming'; u.dispatchEvent(new Event('input', { bubbles: true }))
      const p = document.querySelector('input[type="password"]')
      p.value = '123456'; p.dispatchEvent(new Event('input', { bubbles: true }))
      document.querySelector('button.submit').click()
      return true
    })()
  `)
  // 第 2 步：等待登录成功（Token 落库 + 路由跳到大厅）
  await waitFor(`!!localStorage.getItem('token') && ${atRoute('/')}`, 10000, '登录成功并跳转大厅')
  console.log('[e2e] 登录成功，Token 已写入，已跳转大厅')
  await sleep(1800) // 等游戏列表与字体渲染
  await shot('electron-smoke-lobby')

  // 第 2.5 步：大厅购买弹窗（若存在待解锁游戏则点开验证展示与关闭）
  const hasBuyBtn = await js(
    `!![...document.querySelectorAll('.game-card button')].find((b) => b.textContent.includes('去购买'))`
  )
  if (hasBuyBtn) {
    await js(`
      [...document.querySelectorAll('.game-card button')].find((b) => b.textContent.includes('去购买')).click(); true
    `)
    await waitFor(`!!document.querySelector('.buy-modal')`, 4000, '购买弹窗打开')
    await sleep(400)
    await shot('electron-smoke-buymodal')
    await js(`document.querySelector('.buy-modal .bm-close').click(); true`)
    await waitFor(`!document.querySelector('.buy-modal')`, 3000, '购买弹窗关闭')
    console.log('[e2e] 大厅购买弹窗：打开展示详情 / 关闭均正常')
  } else {
    console.log('[e2e] 大厅无待解锁游戏，跳过购买弹窗检查')
  }

  // 第 2.6 步：确保目标游戏可玩——未拥有则通过弹窗「立即购买」走一遍真实购买闭环
  const gameName = await js(`
    fetch((window.desktop && window.desktop.serverBase ? window.desktop.serverBase : '') + '/api/games', {
      headers: { Authorization: 'Bearer ' + localStorage.getItem('token') },
    }).then((r) => r.json()).then((j) => ((j.data || []).find((g) => g.code === '${GAME}') || {}).name || '')
  `)
  if (!gameName) throw new Error(`游戏 ${GAME} 不存在或列表接口异常`)
  const cardBtnLabel = `(() => {
    const card = [...document.querySelectorAll('.game-card')].find((c) => (c.querySelector('.name')?.textContent || '').trim() === ${JSON.stringify(gameName)})
    const btn = card && card.querySelector('.actions button:last-child')
    return btn ? btn.textContent.trim() : ''
  })()`
  if ((await js(cardBtnLabel)) === '去购买') {
    await js(`(() => {
      const card = [...document.querySelectorAll('.game-card')].find((c) => (c.querySelector('.name')?.textContent || '').trim() === ${JSON.stringify(gameName)})
      card.querySelector('.actions button:last-child').click()
      return true
    })()`)
    await waitFor(`!!document.querySelector('.buy-modal')`, 4000, '目标游戏购买弹窗打开')
    const canBuy = await js(`!document.querySelector('.buy-modal .bm-actions .btn:last-child').disabled`)
    if (!canBuy) throw new Error(`积分不足，无法购买 ${gameName}，无法继续单机游戏步骤`)
    await js(`document.querySelector('.buy-modal .bm-actions .btn:last-child').click(); true`)
    await waitFor(`!document.querySelector('.buy-modal')`, 6000, '购买完成弹窗自动关闭')
    await waitFor(`${cardBtnLabel} === '开始游戏'`, 6000, '购买后卡片刷新为可玩')
    console.log(`[e2e] 已通过大厅弹窗直接购买「${gameName}」，卡片已解锁`)
  } else {
    console.log(`[e2e] 「${gameName}」已可玩，无需购买`)
  }

  // 第 3 步：进入对战大厅
  await goto('/battle')
  await sleep(1500)
  await shot('electron-smoke-battle')

  // 第 4 步：WebSocket 建房（联机核心链路）——创建斗地主 AI 房间并拿到邀请码
  await js(`
    (() => {
      const btn = [...document.querySelectorAll('button')].find((b) => b.textContent.includes('创建房间'))
      btn.click()
      return true
    })()
  `)
  await waitFor(
    `${atRoute('/battle/room')} && /^[A-Z0-9]{6}$/.test(document.querySelector('.code-box b')?.textContent?.trim() || '')`,
    10000,
    'WS 建房成功并显示 6 位邀请码'
  )
  const roomCode = await js(`document.querySelector('.code-box b').textContent.trim()`)
  console.log('[e2e] WebSocket 建房成功，邀请码：' + roomCode)
  await sleep(900)
  await shot('electron-smoke-room')
  // 退出房间，回到对战大厅
  await js(`
    (() => {
      const btn = [...document.querySelectorAll('button')].find((b) => b.textContent.includes('退出房间'))
      btn.click()
      return true
    })()
  `)
  await waitFor(atRoute('/battle'), 5000, '退房返回对战大厅')
  console.log('[e2e] 已退出房间')

  // 第 5 步：单机游戏运行（渲染与游戏循环）——默认贪吃蛇，可用 NLG_E2E_GAME 换游戏
  // 普通游戏是「开始游戏」按钮；带关卡的游戏（连连看/消消乐/马里奥）是关卡选择面板的继续按钮
  await goto(`/play/${GAME}`)
  const startBtnExpr = `(() => {
    return document.querySelector('.overlay .ls-continue') ||
      [...document.querySelectorAll('.overlay button')].find((b) => b.textContent.includes('开始游戏')) || null
  })()`
  await waitFor(`!!${startBtnExpr}`, 10000, `${GAME} 游玩页就绪`)
  const isLevelGame = await js(`!!document.querySelector('.overlay .level-select')`)
  if (isLevelGame) {
    console.log(`[e2e] ${GAME} 为关卡制游戏，关卡选择面板已展示`)
  }
  await js(`(${startBtnExpr}).click(); true`)
  await sleep(2200) // 让游戏跑几帧
  // Canvas 游戏看画布，DOM 游戏（连连看/消消乐）看棋盘容器
  await waitFor(
    `!!document.querySelector('.stage canvas') || !!document.querySelector('.stage .link-board') || !!document.querySelector('.stage .m3-board .board')`,
    5000,
    '游戏画面渲染'
  )
  console.log(`[e2e] ${GAME} 已开局，画面渲染正常`)
  await shot('electron-smoke-game')

  // 汇总
  if (pageErrors.length) {
    console.error(`[e2e] 页面报错 ${pageErrors.length} 条：`)
    for (const m of pageErrors.slice(0, 10)) console.error('  -', m)
    app.exit(1)
    return
  }
  console.log(`[e2e] 全部通过（${MODE} 模式）：登录 / 路由 / 大厅 / WS 建房退房 / 单机游戏均正常，无页面报错`)
  app.exit(0)
}

app.whenReady().then(() =>
  main().catch((err) => {
    console.error('[e2e] 失败：', err.message)
    app.exit(1)
  })
)
// 兜底超时
setTimeout(() => {
  console.error('[e2e] 总超时')
  app.exit(1)
}, 90000)