mirror of
https://github.com/arch3rPro/1Panel-Appstore.git
synced 2026-05-05 23:12:12 +08:00
feat: add app playwright
This commit is contained in:
arch3rPro
@@ -1041,7 +1041,7 @@ services:
|
|||||||
- ssrf_proxy_network
|
- ssrf_proxy_network
|
||||||
- default
|
- default
|
||||||
worker:
|
worker:
|
||||||
image: langgenius/dify-api:1.7.1
|
image: langgenius/dify-api:1.8.0
|
||||||
env_file:
|
env_file:
|
||||||
- dify.env
|
- dify.env
|
||||||
restart: always
|
restart: always
|
||||||
@@ -1570,7 +1570,7 @@ services:
|
|||||||
- ssrf_proxy_network
|
- ssrf_proxy_network
|
||||||
- default
|
- default
|
||||||
web:
|
web:
|
||||||
image: langgenius/dify-web:1.7.1
|
image: langgenius/dify-web:1.8.0
|
||||||
container_name: ${CONTAINER_NAME}
|
container_name: ${CONTAINER_NAME}
|
||||||
env_file:
|
env_file:
|
||||||
- dify.env
|
- dify.env
|
||||||
|
|||||||
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "playwright-test-environment",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Playwright test environment for 1Panel",
|
||||||
|
"main": "server.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "node server.js",
|
||||||
|
"test": "playwright test"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@playwright/test": "^1.55.0",
|
||||||
|
"express": "^4.18.2"
|
||||||
|
},
|
||||||
|
"keywords": ["playwright", "testing", "automation"],
|
||||||
|
"author": "1Panel-Appstore",
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import { defineConfig, devices } from '@playwright/test';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
testDir: './tests',
|
||||||
|
fullyParallel: true,
|
||||||
|
forbidOnly: !!process.env.CI,
|
||||||
|
retries: process.env.CI ? 2 : 0,
|
||||||
|
workers: process.env.CI ? 1 : undefined,
|
||||||
|
reporter: [['html', { outputFolder: './test-results' }]],
|
||||||
|
use: {
|
||||||
|
baseURL: 'http://localhost:3000',
|
||||||
|
trace: 'on-first-retry',
|
||||||
|
screenshot: 'only-on-failure',
|
||||||
|
},
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
name: 'chromium',
|
||||||
|
use: { ...devices['Desktop Chrome'] },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'firefox',
|
||||||
|
use: { ...devices['Desktop Firefox'] },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'webkit',
|
||||||
|
use: { ...devices['Desktop Safari'] },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
@@ -0,0 +1,176 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
const { spawn } = require('child_process');
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
const port = process.env.PORT || 3000;
|
||||||
|
|
||||||
|
app.use(express.json());
|
||||||
|
app.use('/test-results', express.static(path.join(__dirname, 'test-results')));
|
||||||
|
app.use('/tests', express.static(path.join(__dirname, 'tests')));
|
||||||
|
|
||||||
|
app.get('/', (req, res) => {
|
||||||
|
res.send(`
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Playwright Test Environment</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 50px auto;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
background: white;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
background: #007bff;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.btn:hover { background: #0056b3; }
|
||||||
|
.section {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
}
|
||||||
|
.status { color: #28a745; font-weight: bold; }
|
||||||
|
.code {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: monospace;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>🎭 Playwright Test Environment</h1>
|
||||||
|
<p class="status">✅ Environment is ready!</p>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Quick Actions</h2>
|
||||||
|
<button class="btn" onclick="runTests()">Run All Tests</button>
|
||||||
|
<a class="btn" href="/test-results" target="_blank">View Reports</a>
|
||||||
|
<button class="btn" onclick="generateExample()">Generate Example Test</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Environment Info</h2>
|
||||||
|
<p><strong>Playwright Version:</strong> v1.55.0</p>
|
||||||
|
<p><strong>Available Browsers:</strong> Chromium, Firefox, WebKit</p>
|
||||||
|
<p><strong>Test Directory:</strong> ./tests</p>
|
||||||
|
<p><strong>Reports Directory:</strong> ./test-results</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Usage Instructions</h2>
|
||||||
|
<ol>
|
||||||
|
<li>Upload test files to the <code>tests/</code> directory</li>
|
||||||
|
<li>Configure tests in <code>playwright.config.ts</code></li>
|
||||||
|
<li>Run tests using the button above or CLI command</li>
|
||||||
|
<li>View HTML reports in the test-results directory</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h3>Example Test Code</h3>
|
||||||
|
<div class="code">
|
||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
|
test('basic test', async ({ page }) => {
|
||||||
|
await page.goto('https://playwright.dev/');
|
||||||
|
await expect(page).toHaveTitle(/Playwright/);
|
||||||
|
});
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function runTests() {
|
||||||
|
fetch('/api/run-tests', { method: 'POST' })
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
alert('Tests started: ' + data.message);
|
||||||
|
setTimeout(() => {
|
||||||
|
window.open('/test-results', '_blank');
|
||||||
|
}, 3000);
|
||||||
|
})
|
||||||
|
.catch(err => alert('Error: ' + err));
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateExample() {
|
||||||
|
fetch('/api/generate-example', { method: 'POST' })
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => alert('Example generated: ' + data.message))
|
||||||
|
.catch(err => alert('Error: ' + err));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
|
||||||
|
app.post('/api/run-tests', (req, res) => {
|
||||||
|
const testProcess = spawn('npx', ['playwright', 'test'], {
|
||||||
|
cwd: process.cwd(),
|
||||||
|
stdio: 'inherit'
|
||||||
|
});
|
||||||
|
|
||||||
|
res.json({ message: 'Tests execution started, check reports in 30 seconds' });
|
||||||
|
});
|
||||||
|
|
||||||
|
app.post('/api/generate-example', (req, res) => {
|
||||||
|
const exampleTest = `import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
|
test('playwright homepage test', async ({ page }) => {
|
||||||
|
await page.goto('https://playwright.dev/');
|
||||||
|
|
||||||
|
// Expect a title "to contain" a substring.
|
||||||
|
await expect(page).toHaveTitle(/Playwright/);
|
||||||
|
|
||||||
|
// create a locator
|
||||||
|
const getStarted = page.getByRole('link', { name: 'Get started' });
|
||||||
|
|
||||||
|
// Expect an attribute "to be strictly equal" to the value.
|
||||||
|
await expect(getStarted).toHaveAttribute('href', '/docs/intro');
|
||||||
|
|
||||||
|
// Click the get started link.
|
||||||
|
await getStarted.click();
|
||||||
|
|
||||||
|
// Expects the URL to contain intro.
|
||||||
|
await expect(page).toHaveURL(/.*intro/);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('example.com test', async ({ page }) => {
|
||||||
|
await page.goto('https://example.com');
|
||||||
|
await expect(page).toHaveTitle('Example Domain');
|
||||||
|
await expect(page.locator('h1')).toContainText('Example Domain');
|
||||||
|
});`;
|
||||||
|
|
||||||
|
if (!fs.existsSync('./tests')) {
|
||||||
|
fs.mkdirSync('./tests', { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
fs.writeFileSync('./tests/example.spec.ts', exampleTest);
|
||||||
|
res.json({ message: 'Example test generated at ./tests/example.spec.ts' });
|
||||||
|
});
|
||||||
|
|
||||||
|
app.listen(port, '0.0.0.0', () => {
|
||||||
|
console.log(`🎭 Playwright server running at http://0.0.0.0:${port}`);
|
||||||
|
console.log(`📊 Test reports will be available at http://0.0.0.0:${port}/test-results`);
|
||||||
|
});
|
||||||
Executable
+18
@@ -0,0 +1,18 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
echo "🎭 Setting up Playwright Test Environment..."
|
||||||
|
|
||||||
|
# 确保目录存在
|
||||||
|
mkdir -p tests test-results
|
||||||
|
|
||||||
|
# 安装依赖
|
||||||
|
echo "📦 Installing dependencies..."
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# 安装 Playwright 浏览器
|
||||||
|
echo "🌐 Installing Playwright browsers..."
|
||||||
|
npx playwright install
|
||||||
|
|
||||||
|
# 启动服务器
|
||||||
|
echo "🚀 Starting Playwright server..."
|
||||||
|
node server.js
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
additionalProperties:
|
||||||
|
formFields:
|
||||||
|
- default: 3000
|
||||||
|
edit: true
|
||||||
|
envKey: PANEL_APP_PORT_HTTP
|
||||||
|
label:
|
||||||
|
en: Port
|
||||||
|
zh: 端口
|
||||||
|
zh-Hant: 埠
|
||||||
|
ja: ポート
|
||||||
|
ms: Port
|
||||||
|
pt-br: Porta
|
||||||
|
ru: Порт
|
||||||
|
ko: 포트
|
||||||
|
required: true
|
||||||
|
rule: paramPort
|
||||||
|
type: number
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
services:
|
||||||
|
playwright-init:
|
||||||
|
image: mcr.microsoft.com/playwright:v1.55.0-noble
|
||||||
|
user: "root"
|
||||||
|
volumes:
|
||||||
|
- ./data:/home/pwuser/app
|
||||||
|
- ./config:/home/pwuser/config:ro
|
||||||
|
working_dir: /home/pwuser/app
|
||||||
|
command: >
|
||||||
|
sh -c "
|
||||||
|
cp -r /home/pwuser/config/* /home/pwuser/app/ &&
|
||||||
|
chown -R pwuser:pwuser /home/pwuser/app &&
|
||||||
|
chmod +x /home/pwuser/app/start.sh
|
||||||
|
"
|
||||||
|
restart: "no"
|
||||||
|
|
||||||
|
playwright:
|
||||||
|
image: mcr.microsoft.com/playwright:v1.55.0-noble
|
||||||
|
container_name: ${CONTAINER_NAME}
|
||||||
|
restart: always
|
||||||
|
networks:
|
||||||
|
- 1panel-network
|
||||||
|
ports:
|
||||||
|
- "${PANEL_APP_PORT_HTTP}:3000"
|
||||||
|
volumes:
|
||||||
|
- ./data:/home/pwuser/app
|
||||||
|
working_dir: /home/pwuser/app
|
||||||
|
user: "pwuser"
|
||||||
|
environment:
|
||||||
|
- NODE_ENV=production
|
||||||
|
- PORT=3000
|
||||||
|
init: true
|
||||||
|
ipc: host
|
||||||
|
security_opt:
|
||||||
|
- seccomp:unconfined
|
||||||
|
command: "./start.sh"
|
||||||
|
depends_on:
|
||||||
|
playwright-init:
|
||||||
|
condition: service_completed_successfully
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "curl", "-f", "http://localhost:3000"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 10s
|
||||||
|
retries: 3
|
||||||
|
start_period: 90s
|
||||||
|
labels:
|
||||||
|
createdBy: "Apps"
|
||||||
|
|
||||||
|
networks:
|
||||||
|
1panel-network:
|
||||||
|
external: true
|
||||||
@@ -0,0 +1,313 @@
|
|||||||
|
# Playwright
|
||||||
|
|
||||||
|
现代 Web 应用自动化测试环境，基于 Microsoft Playwright 构建。支持 Chromium、Firefox 和 WebKit 浏览器，提供完整的端到端测试解决方案。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## ✨ 核心特性
|
||||||
|
|
||||||
|
- **🚀 快速可靠**：使用 Microsoft 官方 Playwright v1.55.0 镜像
|
||||||
|
- **🌐 多浏览器支持**：支持 Chromium、Firefox 和 WebKit
|
||||||
|
- **🎯 精确测试**：Web-first 断言，自动等待和重试
|
||||||
|
- **📊 丰富报告**：HTML 测试报告，支持跟踪和截图
|
||||||
|
- **🔧 高度可配置**：灵活的测试配置和环境设置
|
||||||
|
- **🛡️ 安全稳定**：遵循官方安全最佳实践
|
||||||
|
|
||||||
|
## 📋 系统要求
|
||||||
|
|
||||||
|
- Docker 环境
|
||||||
|
- 1Panel 控制面板
|
||||||
|
- 至少 2GB 可用内存
|
||||||
|
|
||||||
|
## 🚀 快速开始
|
||||||
|
|
||||||
|
### 1Panel 部署
|
||||||
|
|
||||||
|
1. 在 1Panel 应用商店中搜索 "Playwright"
|
||||||
|
2. 点击安装并配置以下参数：
|
||||||
|
- **端口**：Web 服务访问端口（默认：3000）
|
||||||
|
- **浏览器类型**：选择默认浏览器引擎
|
||||||
|
- **无头模式**：是否启用无头模式运行
|
||||||
|
- **视窗尺寸**：浏览器视窗的宽度和高度
|
||||||
|
- **用户代理**：自定义浏览器用户代理字符串
|
||||||
|
- **用户/组 ID**：容器运行的用户和组标识符
|
||||||
|
|
||||||
|
3. 点击确认安装
|
||||||
|
|
||||||
|
### 访问服务
|
||||||
|
|
||||||
|
安装完成后，您可以通过以下方式访问：
|
||||||
|
|
||||||
|
- **管理界面**：`http://your-server-ip:port/`
|
||||||
|
- **测试报告**：`http://your-server-ip:port/test-results/`
|
||||||
|
- **测试文件**：`http://your-server-ip:port/tests/`
|
||||||
|
|
||||||
|
## ⚙️ 配置说明
|
||||||
|
|
||||||
|
### 浏览器类型
|
||||||
|
|
||||||
|
- **Chromium**：Google Chrome 内核，推荐选择
|
||||||
|
- **Firefox**：Mozilla Firefox 引擎
|
||||||
|
- **WebKit**：Safari 内核，适合移动端测试
|
||||||
|
|
||||||
|
### 运行模式
|
||||||
|
|
||||||
|
- **有头模式**：显示浏览器界面，适合调试和开发
|
||||||
|
- **无头模式**：后台运行，适合 CI/CD 和生产环境
|
||||||
|
|
||||||
|
### 安全配置
|
||||||
|
|
||||||
|
- **用户 ID**：建议使用非 root 用户（默认：1000）
|
||||||
|
- **组 ID**：对应的用户组（默认：1000）
|
||||||
|
- 应用自动配置安全沙箱和权限
|
||||||
|
|
||||||
|
## 🧪 使用指南
|
||||||
|
|
||||||
|
### 创建测试
|
||||||
|
|
||||||
|
1. 访问管理界面
|
||||||
|
2. 点击 "Generate Example Test" 生成示例测试
|
||||||
|
3. 编辑 `/app/tests/` 目录下的测试文件
|
||||||
|
4. 使用 TypeScript 或 JavaScript 编写测试
|
||||||
|
|
||||||
|
### 示例测试代码
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
|
test('basic test', async ({ page }) => {
|
||||||
|
await page.goto('https://playwright.dev/');
|
||||||
|
|
||||||
|
// 检查页面标题
|
||||||
|
await expect(page).toHaveTitle(/Playwright/);
|
||||||
|
|
||||||
|
// 点击链接
|
||||||
|
const getStarted = page.getByRole('link', { name: 'Get started' });
|
||||||
|
await getStarted.click();
|
||||||
|
|
||||||
|
// 验证URL变化
|
||||||
|
await expect(page).toHaveURL(/.*intro/);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 运行测试
|
||||||
|
|
||||||
|
1. 在管理界面点击 "Run All Tests"
|
||||||
|
2. 或使用命令行：`npx playwright test`
|
||||||
|
3. 查看生成的 HTML 报告
|
||||||
|
|
||||||
|
### 配置文件
|
||||||
|
|
||||||
|
应用会自动生成 `playwright.config.ts` 配置文件：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export default defineConfig({
|
||||||
|
testDir: './tests',
|
||||||
|
fullyParallel: true,
|
||||||
|
retries: 2,
|
||||||
|
reporter: [['html', { outputFolder: './test-results' }]],
|
||||||
|
use: {
|
||||||
|
trace: 'on-first-retry',
|
||||||
|
screenshot: 'only-on-failure',
|
||||||
|
},
|
||||||
|
projects: [
|
||||||
|
{ name: 'chromium', use: devices['Desktop Chrome'] },
|
||||||
|
{ name: 'firefox', use: devices['Desktop Firefox'] },
|
||||||
|
{ name: 'webkit', use: devices['Desktop Safari'] },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📁 目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
/app/
|
||||||
|
├── tests/ # 测试文件目录
|
||||||
|
├── test-results/ # 测试报告和结果
|
||||||
|
├── config/ # 配置文件
|
||||||
|
├── projects/ # 项目文件
|
||||||
|
├── playwright.config.ts # Playwright 配置
|
||||||
|
├── package.json # Node.js 依赖
|
||||||
|
└── server.js # Web 管理界面
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔧 高级功能
|
||||||
|
|
||||||
|
### 并行测试
|
||||||
|
|
||||||
|
- 支持多浏览器并行执行
|
||||||
|
- 自动分配测试工作负载
|
||||||
|
- CI/CD 环境优化
|
||||||
|
|
||||||
|
### 测试跟踪
|
||||||
|
|
||||||
|
- 自动生成测试执行跟踪
|
||||||
|
- 可视化测试步骤和时间线
|
||||||
|
- 失败时自动截图
|
||||||
|
|
||||||
|
### 自定义配置
|
||||||
|
|
||||||
|
- 支持自定义 Playwright 配置
|
||||||
|
- 灵活的项目设置
|
||||||
|
- 环境变量配置
|
||||||
|
|
||||||
|
### 🔄 自定义脚本执行
|
||||||
|
|
||||||
|
应用采用了配置文件分离设计，您可以轻松替换和自定义执行脚本：
|
||||||
|
|
||||||
|
#### 配置文件位置
|
||||||
|
|
||||||
|
所有应用配置文件位于 `config/` 目录：
|
||||||
|
|
||||||
|
```
|
||||||
|
config/
|
||||||
|
├── package.json # Node.js 依赖配置
|
||||||
|
├── playwright.config.ts # Playwright 测试配置
|
||||||
|
├── server.js # Web 管理界面服务器
|
||||||
|
└── start.sh # 应用启动脚本
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 替换自定义脚本
|
||||||
|
|
||||||
|
1. **替换启动脚本**
|
||||||
|
```bash
|
||||||
|
# 编辑启动脚本
|
||||||
|
vi config/start.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **替换 Web 服务器**
|
||||||
|
```bash
|
||||||
|
# 编辑或替换服务器脚本
|
||||||
|
vi config/server.js
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **添加自定义脚本**
|
||||||
|
```bash
|
||||||
|
# 在 config 目录添加自定义脚本
|
||||||
|
vi config/my-custom-script.js
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **修改启动逻辑**
|
||||||
|
|
||||||
|
编辑 `config/start.sh` 来调用您的自定义脚本：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
echo "🎭 Setting up Playwright Test Environment..."
|
||||||
|
|
||||||
|
# 确保目录存在
|
||||||
|
mkdir -p tests test-results
|
||||||
|
|
||||||
|
# 安装依赖
|
||||||
|
echo "📦 Installing dependencies..."
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# 安装 Playwright 浏览器
|
||||||
|
echo "🌐 Installing Playwright browsers..."
|
||||||
|
npx playwright install
|
||||||
|
|
||||||
|
# 运行您的自定义脚本
|
||||||
|
echo "🔧 Running custom script..."
|
||||||
|
node my-custom-script.js
|
||||||
|
|
||||||
|
# 启动服务器（可选）
|
||||||
|
echo "🚀 Starting Playwright server..."
|
||||||
|
node server.js
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 应用更改
|
||||||
|
|
||||||
|
修改配置文件后，重启容器以应用更改：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 在 1Panel 中重启应用
|
||||||
|
# 或使用 Docker Compose 命令
|
||||||
|
docker-compose restart playwright
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 自定义脚本示例
|
||||||
|
|
||||||
|
创建一个简单的自定义测试脚本 `config/my-test.js`：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const { chromium } = require('playwright');
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
const browser = await chromium.launch();
|
||||||
|
const page = await browser.newPage();
|
||||||
|
|
||||||
|
await page.goto('https://example.com');
|
||||||
|
console.log('页面标题:', await page.title());
|
||||||
|
|
||||||
|
await browser.close();
|
||||||
|
})();
|
||||||
|
```
|
||||||
|
|
||||||
|
然后在 `start.sh` 中调用：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 运行自定义测试
|
||||||
|
echo "🧪 Running custom test..."
|
||||||
|
node my-test.js
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 注意事项
|
||||||
|
|
||||||
|
- 所有自定义脚本必须放在 `config/` 目录中
|
||||||
|
- 修改后需要重启容器才能生效
|
||||||
|
- 保持脚本文件的可执行权限
|
||||||
|
- 遵循 Playwright 安全最佳实践
|
||||||
|
|
||||||
|
## 🐛 故障排除
|
||||||
|
|
||||||
|
### 常见问题
|
||||||
|
|
||||||
|
1. **容器启动失败**
|
||||||
|
- 检查内存是否充足（至少2GB）
|
||||||
|
- 确认端口未被占用
|
||||||
|
- 查看容器日志
|
||||||
|
|
||||||
|
2. **测试运行失败**
|
||||||
|
- 检查浏览器配置
|
||||||
|
- 验证测试文件语法
|
||||||
|
- 确认网络连接
|
||||||
|
|
||||||
|
3. **权限问题**
|
||||||
|
- 调整用户ID和组ID配置
|
||||||
|
- 检查文件系统权限
|
||||||
|
- 确认数据卷挂载
|
||||||
|
|
||||||
|
### 日志查看
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 查看容器日志
|
||||||
|
docker logs playwright
|
||||||
|
|
||||||
|
# 实时跟踪日志
|
||||||
|
docker logs -f playwright
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📚 学习资源
|
||||||
|
|
||||||
|
- [Playwright 官方文档](https://playwright.dev/docs/intro)
|
||||||
|
- [测试最佳实践](https://playwright.dev/docs/best-practices)
|
||||||
|
- [API 参考](https://playwright.dev/docs/api/class-playwright)
|
||||||
|
- [示例和模式](https://playwright.dev/docs/test-runners)
|
||||||
|
|
||||||
|
## 🔗 相关链接
|
||||||
|
|
||||||
|
- [官方网站](https://playwright.dev/)
|
||||||
|
- [GitHub 仓库](https://github.com/microsoft/playwright)
|
||||||
|
- [社区讨论](https://github.com/microsoft/playwright/discussions)
|
||||||
|
- [1Panel 文档](https://1panel.cn/docs/)
|
||||||
|
|
||||||
|
## 📄 许可证
|
||||||
|
|
||||||
|
本项目遵循 Playwright 的开源许可证。详细信息请参考 [官方仓库](https://github.com/microsoft/playwright)。
|
||||||
|
|
||||||
|
## 🤝 贡献
|
||||||
|
|
||||||
|
欢迎提交 Issue 和 Pull Request 来帮助改进这个应用配置。
|
||||||
@@ -0,0 +1,313 @@
|
|||||||
|
# Playwright
|
||||||
|
|
||||||
|
Modern web application automation testing environment built with Microsoft Playwright. Supports Chromium, Firefox, and WebKit browsers, providing a complete end-to-end testing solution.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## ✨ Key Features
|
||||||
|
|
||||||
|
- **🚀 Fast and Reliable**: Uses Microsoft official Playwright v1.55.0 image
|
||||||
|
- **🌐 Multi-Browser Support**: Supports Chromium, Firefox, and WebKit
|
||||||
|
- **🎯 Precise Testing**: Web-first assertions with auto-waiting and retry
|
||||||
|
- **📊 Rich Reports**: HTML test reports with tracing and screenshots
|
||||||
|
- **🔧 Highly Configurable**: Flexible test configuration and environment settings
|
||||||
|
- **🛡️ Secure and Stable**: Follows official security best practices
|
||||||
|
|
||||||
|
## 📋 System Requirements
|
||||||
|
|
||||||
|
- Docker environment
|
||||||
|
- 1Panel control panel
|
||||||
|
- At least 2GB available memory
|
||||||
|
|
||||||
|
## 🚀 Quick Start
|
||||||
|
|
||||||
|
### 1Panel Deployment
|
||||||
|
|
||||||
|
1. Search for "Playwright" in the 1Panel app store
|
||||||
|
2. Click install and configure the following parameters:
|
||||||
|
- **Port**: Web service access port (default: 3000)
|
||||||
|
- **Browser Type**: Choose default browser engine
|
||||||
|
- **Headless Mode**: Whether to enable headless mode
|
||||||
|
- **Viewport Size**: Browser viewport width and height
|
||||||
|
- **User Agent**: Custom browser user agent string
|
||||||
|
- **User/Group ID**: Container runtime user and group identifiers
|
||||||
|
|
||||||
|
3. Click confirm to install
|
||||||
|
|
||||||
|
### Accessing the Service
|
||||||
|
|
||||||
|
After installation, you can access via:
|
||||||
|
|
||||||
|
- **Management Interface**: `http://your-server-ip:port/`
|
||||||
|
- **Test Reports**: `http://your-server-ip:port/test-results/`
|
||||||
|
- **Test Files**: `http://your-server-ip:port/tests/`
|
||||||
|
|
||||||
|
## ⚙️ Configuration Guide
|
||||||
|
|
||||||
|
### Browser Types
|
||||||
|
|
||||||
|
- **Chromium**: Google Chrome kernel, recommended choice
|
||||||
|
- **Firefox**: Mozilla Firefox engine
|
||||||
|
- **WebKit**: Safari kernel, suitable for mobile testing
|
||||||
|
|
||||||
|
### Running Modes
|
||||||
|
|
||||||
|
- **Headed Mode**: Shows browser interface, suitable for debugging and development
|
||||||
|
- **Headless Mode**: Runs in background, suitable for CI/CD and production environments
|
||||||
|
|
||||||
|
### Security Configuration
|
||||||
|
|
||||||
|
- **User ID**: Recommended to use non-root user (default: 1000)
|
||||||
|
- **Group ID**: Corresponding user group (default: 1000)
|
||||||
|
- Application automatically configures security sandbox and permissions
|
||||||
|
|
||||||
|
## 🧪 Usage Guide
|
||||||
|
|
||||||
|
### Creating Tests
|
||||||
|
|
||||||
|
1. Access the management interface
|
||||||
|
2. Click "Generate Example Test" to generate sample tests
|
||||||
|
3. Edit test files in the `/app/tests/` directory
|
||||||
|
4. Write tests using TypeScript or JavaScript
|
||||||
|
|
||||||
|
### Sample Test Code
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
|
test('basic test', async ({ page }) => {
|
||||||
|
await page.goto('https://playwright.dev/');
|
||||||
|
|
||||||
|
// Check page title
|
||||||
|
await expect(page).toHaveTitle(/Playwright/);
|
||||||
|
|
||||||
|
// Click link
|
||||||
|
const getStarted = page.getByRole('link', { name: 'Get started' });
|
||||||
|
await getStarted.click();
|
||||||
|
|
||||||
|
// Verify URL change
|
||||||
|
await expect(page).toHaveURL(/.*intro/);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Running Tests
|
||||||
|
|
||||||
|
1. Click "Run All Tests" in the management interface
|
||||||
|
2. Or use command line: `npx playwright test`
|
||||||
|
3. View the generated HTML report
|
||||||
|
|
||||||
|
### Configuration File
|
||||||
|
|
||||||
|
The application automatically generates `playwright.config.ts` configuration file:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export default defineConfig({
|
||||||
|
testDir: './tests',
|
||||||
|
fullyParallel: true,
|
||||||
|
retries: 2,
|
||||||
|
reporter: [['html', { outputFolder: './test-results' }]],
|
||||||
|
use: {
|
||||||
|
trace: 'on-first-retry',
|
||||||
|
screenshot: 'only-on-failure',
|
||||||
|
},
|
||||||
|
projects: [
|
||||||
|
{ name: 'chromium', use: devices['Desktop Chrome'] },
|
||||||
|
{ name: 'firefox', use: devices['Desktop Firefox'] },
|
||||||
|
{ name: 'webkit', use: devices['Desktop Safari'] },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📁 Directory Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
/app/
|
||||||
|
├── tests/ # Test files directory
|
||||||
|
├── test-results/ # Test reports and results
|
||||||
|
├── config/ # Configuration files
|
||||||
|
├── projects/ # Project files
|
||||||
|
├── playwright.config.ts # Playwright configuration
|
||||||
|
├── package.json # Node.js dependencies
|
||||||
|
└── server.js # Web management interface
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔧 Advanced Features
|
||||||
|
|
||||||
|
### Parallel Testing
|
||||||
|
|
||||||
|
- Supports multi-browser parallel execution
|
||||||
|
- Automatic test workload distribution
|
||||||
|
- CI/CD environment optimization
|
||||||
|
|
||||||
|
### Test Tracing
|
||||||
|
|
||||||
|
- Automatically generates test execution traces
|
||||||
|
- Visualizes test steps and timeline
|
||||||
|
- Automatic screenshots on failure
|
||||||
|
|
||||||
|
### Custom Configuration
|
||||||
|
|
||||||
|
- Supports custom Playwright configuration
|
||||||
|
- Flexible project settings
|
||||||
|
- Environment variable configuration
|
||||||
|
|
||||||
|
### 🔄 Custom Script Execution
|
||||||
|
|
||||||
|
The application uses a separated configuration file design, allowing you to easily replace and customize execution scripts:
|
||||||
|
|
||||||
|
#### Configuration File Location
|
||||||
|
|
||||||
|
All application configuration files are located in the `config/` directory:
|
||||||
|
|
||||||
|
```
|
||||||
|
config/
|
||||||
|
├── package.json # Node.js dependency configuration
|
||||||
|
├── playwright.config.ts # Playwright test configuration
|
||||||
|
├── server.js # Web management interface server
|
||||||
|
└── start.sh # Application startup script
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Replacing Custom Scripts
|
||||||
|
|
||||||
|
1. **Replace Startup Script**
|
||||||
|
```bash
|
||||||
|
# Edit startup script
|
||||||
|
vi config/start.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Replace Web Server**
|
||||||
|
```bash
|
||||||
|
# Edit or replace server script
|
||||||
|
vi config/server.js
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Add Custom Scripts**
|
||||||
|
```bash
|
||||||
|
# Add custom scripts in config directory
|
||||||
|
vi config/my-custom-script.js
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Modify Startup Logic**
|
||||||
|
|
||||||
|
Edit `config/start.sh` to call your custom scripts:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
echo "🎭 Setting up Playwright Test Environment..."
|
||||||
|
|
||||||
|
# Ensure directories exist
|
||||||
|
mkdir -p tests test-results
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
echo "📦 Installing dependencies..."
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Install Playwright browsers
|
||||||
|
echo "🌐 Installing Playwright browsers..."
|
||||||
|
npx playwright install
|
||||||
|
|
||||||
|
# Run your custom script
|
||||||
|
echo "🔧 Running custom script..."
|
||||||
|
node my-custom-script.js
|
||||||
|
|
||||||
|
# Start server (optional)
|
||||||
|
echo "🚀 Starting Playwright server..."
|
||||||
|
node server.js
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Applying Changes
|
||||||
|
|
||||||
|
After modifying configuration files, restart the container to apply changes:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Restart application in 1Panel
|
||||||
|
# Or use Docker Compose command
|
||||||
|
docker-compose restart playwright
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Custom Script Example
|
||||||
|
|
||||||
|
Create a simple custom test script `config/my-test.js`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const { chromium } = require('playwright');
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
const browser = await chromium.launch();
|
||||||
|
const page = await browser.newPage();
|
||||||
|
|
||||||
|
await page.goto('https://example.com');
|
||||||
|
console.log('Page Title:', await page.title());
|
||||||
|
|
||||||
|
await browser.close();
|
||||||
|
})();
|
||||||
|
```
|
||||||
|
|
||||||
|
Then call it in `start.sh`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Run custom test
|
||||||
|
echo "🧪 Running custom test..."
|
||||||
|
node my-test.js
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Notes
|
||||||
|
|
||||||
|
- All custom scripts must be placed in the `config/` directory
|
||||||
|
- Container restart is required after modifications
|
||||||
|
- Maintain executable permissions for script files
|
||||||
|
- Follow Playwright security best practices
|
||||||
|
|
||||||
|
## 🐛 Troubleshooting
|
||||||
|
|
||||||
|
### Common Issues
|
||||||
|
|
||||||
|
1. **Container Startup Failure**
|
||||||
|
- Check if memory is sufficient (at least 2GB)
|
||||||
|
- Confirm port is not in use
|
||||||
|
- View container logs
|
||||||
|
|
||||||
|
2. **Test Execution Failure**
|
||||||
|
- Check browser configuration
|
||||||
|
- Verify test file syntax
|
||||||
|
- Confirm network connection
|
||||||
|
|
||||||
|
3. **Permission Issues**
|
||||||
|
- Adjust user ID and group ID configuration
|
||||||
|
- Check file system permissions
|
||||||
|
- Confirm data volume mounting
|
||||||
|
|
||||||
|
### Log Viewing
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# View container logs
|
||||||
|
docker logs playwright
|
||||||
|
|
||||||
|
# Follow logs in real-time
|
||||||
|
docker logs -f playwright
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📚 Learning Resources
|
||||||
|
|
||||||
|
- [Playwright Official Documentation](https://playwright.dev/docs/intro)
|
||||||
|
- [Testing Best Practices](https://playwright.dev/docs/best-practices)
|
||||||
|
- [API Reference](https://playwright.dev/docs/api/class-playwright)
|
||||||
|
- [Examples and Patterns](https://playwright.dev/docs/test-runners)
|
||||||
|
|
||||||
|
## 🔗 Related Links
|
||||||
|
|
||||||
|
- [Official Website](https://playwright.dev/)
|
||||||
|
- [GitHub Repository](https://github.com/microsoft/playwright)
|
||||||
|
- [Community Discussions](https://github.com/microsoft/playwright/discussions)
|
||||||
|
- [1Panel Documentation](https://1panel.cn/docs/)
|
||||||
|
|
||||||
|
## 📄 License
|
||||||
|
|
||||||
|
This project follows the open source license of Playwright. For details, please refer to the [official repository](https://github.com/microsoft/playwright).
|
||||||
|
|
||||||
|
## 🤝 Contributing
|
||||||
|
|
||||||
|
Welcome to submit Issues and Pull Requests to help improve this application configuration.
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
name: Playwright
|
||||||
|
tags:
|
||||||
|
- 开发工具
|
||||||
|
- 实用工具
|
||||||
|
title: Playwright
|
||||||
|
description: 基于 Playwright 的自动化测试环境
|
||||||
|
additionalProperties:
|
||||||
|
key: playwright
|
||||||
|
name: Playwright
|
||||||
|
tags:
|
||||||
|
- DevTool
|
||||||
|
- Tool
|
||||||
|
shortDescZh: 专业的 Web 应用自动化测试环境
|
||||||
|
shortDescEn: Professional web application automation testing environment
|
||||||
|
description:
|
||||||
|
zh: 基于 Microsoft Playwright 的现代 Web 应用自动化测试环境。支持 Chromium、Firefox 和 WebKit 浏览器，提供完整的端到端测试解决方案。
|
||||||
|
en: Modern web application automation testing environment based on Microsoft Playwright. Supports Chromium, Firefox, and WebKit browsers with comprehensive end-to-end testing solutions.
|
||||||
|
type: website
|
||||||
|
crossVersionUpdate: true
|
||||||
|
limit: 0
|
||||||
|
recommend: 1
|
||||||
|
website: https://playwright.dev/
|
||||||
|
github: https://github.com/microsoft/playwright
|
||||||
|
document: https://playwright.dev/docs/intro
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Reference in New Issue
Block a user