playwright_js - daniel-qa/RooCode GitHub Wiki

• 基本的 playwright 範例

login.spec.js

const { test, expect } = require('@playwright/test');  
// 引入 Playwright 測試模組，`test` 用來定義測試案例，`expect` 可用來做斷言（雖然這裡沒用到）

// 模擬兩位用戶進入指定頁面
test('模擬2位用戶連線MindMap', async ({ browser }) => {
  const TARGET_URL = 'https://localhost:5005/MindMapClone?id=xxx';
  // 測試目標頁面，可替換為實際 URL（包含 ID 或 token 參數）

  const NUM_USERS = 2;
  // 要模擬的使用者數量（這裡是兩位）

  for (let i = 0; i < NUM_USERS; i++) {
    // 用 for 迴圈依序建立每個使用者的瀏覽器環境（context）

    const context = await browser.newContext({ ignoreHTTPSErrors: true });
    // 建立一個新的 context，相當於不同的瀏覽器 session
    // ignoreHTTPSErrors: true 是為了避免本地開發環境 https 憑證問題

    const page = await context.newPage();
    // 為該 context 開一個新分頁（page），這就是模擬一位使用者的畫面

    console.log(`使用者 ${i + 1} 正在開啟頁面...`);
    // 記錄目前第幾位使用者開始測試

    await page.goto(TARGET_URL);
    // 讓使用者開啟指定的頁面（目標網址）

    await page.waitForLoadState('domcontentloaded');
    // 等待 DOM 元素載入完成（不是整頁喔，只是 HTML 主體）

    await page.waitForTimeout(1000); // 等一秒確保畫面出現
    // 額外等待 1 秒，保險一點，避免畫面還在轉場或 JS 還沒跑完

    try {
      await page.getByText('Save Changes').nth(1).click();
      // 嘗試找出第 2 個（nth(1)）含有 "Save Changes" 的按鈕並點擊
      // 如果頁面上有多個相同文字的按鈕，nth(1) 是確保點對目標

      console.log(`使用者 ${i + 1} 成功點擊按鈕`);
    } catch (err) {
      console.log(`使用者 ${i + 1} 點擊失敗：${err.message}`);
      // 如果找不到按鈕或點擊錯誤，就記錄錯誤訊息
    }

    // 不關閉 browser，保持連線
    // context 和 page 都還在，這樣可以觀察是否會自動斷線或有後續行為
  }

  console.log('模擬完成 ✅');
  // 所有使用者模擬流程跑完後的結尾訊息
});