mirror of
https://github.com/arch3rPro/1Panel-Appstore.git
synced 2026-04-14 16:07:13 +08:00
feat: add app playwright
This commit is contained in:
arch3rPro
@@ -1041,7 +1041,7 @@ services:
|
||||
- ssrf_proxy_network
|
||||
- default
|
||||
worker:
|
||||
image: langgenius/dify-api:1.7.1
|
||||
image: langgenius/dify-api:1.8.0
|
||||
env_file:
|
||||
- dify.env
|
||||
restart: always
|
||||
@@ -1570,7 +1570,7 @@ services:
|
||||
- ssrf_proxy_network
|
||||
- default
|
||||
web:
|
||||
image: langgenius/dify-web:1.7.1
|
||||
image: langgenius/dify-web:1.8.0
|
||||
container_name: ${CONTAINER_NAME}
|
||||
env_file:
|
||||
- dify.env
|
||||
|
||||
17
apps/playwright/1.55.0-noble/config/package.json
Normal file
17
apps/playwright/1.55.0-noble/config/package.json
Normal file
@@ -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"
|
||||
}
|
||||
29
apps/playwright/1.55.0-noble/config/playwright.config.ts
Normal file
29
apps/playwright/1.55.0-noble/config/playwright.config.ts
Normal file
@@ -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'] },
|
||||
},
|
||||
],
|
||||
});
|
||||
176
apps/playwright/1.55.0-noble/config/server.js
Normal file
176
apps/playwright/1.55.0-noble/config/server.js
Normal file
@@ -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`);
|
||||
});
|
||||
18
apps/playwright/1.55.0-noble/config/start.sh
Executable file
18
apps/playwright/1.55.0-noble/config/start.sh
Executable file
@@ -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
|
||||
17
apps/playwright/1.55.0-noble/data.yml
Normal file
17
apps/playwright/1.55.0-noble/data.yml
Normal file
@@ -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
|
||||
51
apps/playwright/1.55.0-noble/docker-compose.yml
Normal file
51
apps/playwright/1.55.0-noble/docker-compose.yml
Normal file
@@ -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
|
||||
313
apps/playwright/README.md
Normal file
313
apps/playwright/README.md
Normal file
@@ -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 来帮助改进这个应用配置。
|
||||
313
apps/playwright/README_en.md
Normal file
313
apps/playwright/README_en.md
Normal file
@@ -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.
|
||||
24
apps/playwright/data.yml
Normal file
24
apps/playwright/data.yml
Normal file
@@ -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
|
||||
BIN
apps/playwright/logo.png
Normal file
BIN
apps/playwright/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Reference in New Issue
Block a user