目录与依赖
crm-admin/
├─ application/ ThinkPHP 代码
├─ public/ Web 根目录
├─ tests/ Playwright 测试
│ ├─ e2e/ 业务场景脚本 (*.spec.js)
│ ├─ .auth/ 存放已登录的状态文件（会忽略提交）
│ ├─ global-setup.js 👉 只在 CI / 本地第一次跑时执行一次登录
│ └─ playwright.config.js
└─ package.json
global‑setup.js
// tests/global-setup.js
const { chromium } = require(‘@playwright/test’);
module.exports = async (config) => {
// ❶ 启动无头浏览器
const browser = await chromium.launch();
// ❷ 新建上下文 + 页面
const context = await browser.newContext();
const page = await context.newPage();
// ❸ 执行一次真实登录
await page.goto(‘http://localhost:8000/login’);
await page.fill(‘input[name=”username”]’, process.env.PW_USER || ‘testuser’);
await page.fill(‘input[name=”password”]’, process.env.PW_PWD || ‘testpassword’);
await page.click(‘button[type=”submit”]’);
await page.waitForURL(‘**/dashboard’);
// ❹ 把登录态持久化到文件
await context.storageState({ path: ‘tests/.auth/state.json’ });
await browser.close();
};
在 playwright.config.js 里开启复用
// tests/playwright.config.js
const { defineConfig } = require(‘@playwright/test’);
module.exports = defineConfig({
testDir: ‘./e2e’,
timeout: 30_000,
globalSetup: require.resolve(‘./global-setup’),
use: {
baseURL: ‘http://localhost:8000’,
storageState: ‘./.auth/state.json’, // ⬅️ 每个用例自动带 Cookie
},
});
playwright test 启动时流程：
-
先跑 globalSetup → 如果
.auth/state.json不存在或失效就重新登录。 -
后面所有
page/context会自动加载该文件中的 Cookie/LocalStorage。
写普通业务脚本，无需再登录
// tests/e2e/customer.spec.js
const { test, expect } = require(‘@playwright/test’);
test(‘新增客户并能在列表看到’, async ({ page }) => {
await page.goto(‘/customer/create’);
await page.fill(‘input[name=name]’, ‘张三’);
await page.fill(‘input[name=phone]’, ‘13800138000’);
await page.click(‘text=保存’);
await expect(page).toHaveURL(/\/customer\/list/);
await expect(page.locator(‘table’)).toContainText(‘张三’);
});
因为 storageState 已带 Cookie，脚本里 不需要任何登录步骤。
运行方式 & 常见问题
# 第一次 / Cookie 失效时会自动登录并生成 state.json
npx playwright test
# 如果想强行刷新登录态
rm tests/.auth/state.json
npx playwright test
| 常见疑问 | 答案 |
|---|---|
| 账号密码放哪？ | 放环境变量：PW_USER / PW_PWD；或在 CI 的 Secrets 里设置。 |
| Cookie 会过期？ | 过期时删掉 .auth/state.json，globalSetup 会再登陆一次。 |
| 安全性 | .auth/state.json 可能含有效 Cookie，务必 .gitignore 并限制权限。 |
CI 集成（GitHub Actions 片段）
steps:
– uses: actions/checkout@v4
– uses: actions/setup-node@v4
with: { node-version: 20 }
– run: npm ci
– uses: shivammathur/setup-php@v2
with: { php-version: ‘8.1’ }
– run: php -S localhost:8000 -t public & # 启动 ThinkPHP
– run: npx playwright install –with-deps
– env:
PW_USER: ${{ secrets.PW_USER }}
PW_PWD: ${{ secrets.PW_PWD }}
run: npx playwright test