create-genia-os 2.1.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +154 -106
- package/bin/index.js +240 -240
- package/package.json +42 -37
- package/template/.claude/CLAUDE.md +215 -215
- package/template/.claude/agent-memory/analyst/MEMORY.md +20 -20
- package/template/.claude/agent-memory/architect/MEMORY.md +20 -20
- package/template/.claude/agent-memory/dev/MEMORY.md +20 -20
- package/template/.claude/agent-memory/devops/MEMORY.md +20 -20
- package/template/.claude/agent-memory/pm/MEMORY.md +20 -20
- package/template/.claude/agent-memory/po/MEMORY.md +20 -20
- package/template/.claude/agent-memory/qa/MEMORY.md +20 -20
- package/template/.claude/agent-memory/reviewer/MEMORY.md +20 -20
- package/template/.claude/agent-memory/sm/MEMORY.md +20 -20
- package/template/.claude/hooks/enforce-git-push-authority.py +70 -70
- package/template/.claude/hooks/metrics-tracker.cjs +65 -0
- package/template/.claude/hooks/precompact-session-digest.cjs +87 -87
- package/template/.claude/hooks/sql-governance.py +65 -65
- package/template/.claude/hooks/synapse-engine.cjs +122 -122
- package/template/.claude/hooks/write-path-validation.py +59 -59
- package/template/.claude/rules/agent-authority.md +39 -39
- package/template/.claude/rules/agent-handoff.md +71 -71
- package/template/.claude/rules/agent-memory.md +61 -61
- package/template/.claude/rules/ids-principles.md +52 -52
- package/template/.claude/rules/mcp-usage.md +49 -49
- package/template/.claude/rules/new-project.md +157 -0
- package/template/.claude/rules/story-lifecycle.md +87 -87
- package/template/.claude/rules/workflow-execution.md +68 -68
- package/template/.claude/settings.json +58 -58
- package/template/.claude/settings.local.json +14 -14
- package/template/.genia/CONSTITUTION.md +129 -129
- package/template/.genia/contexts/api-patterns.md +134 -134
- package/template/.genia/contexts/nextjs-react.md +210 -210
- package/template/.genia/contexts/projeto.md +18 -18
- package/template/.genia/contexts/supabase.md +152 -152
- package/template/.genia/contexts/whatsapp-cloud.md +176 -176
- package/template/.genia/core-config.yaml +192 -192
- package/template/.genia/development/agents/analyst.md +138 -138
- package/template/.genia/development/agents/architect.md +171 -171
- package/template/.genia/development/agents/dev.md +160 -160
- package/template/.genia/development/agents/devops.md +200 -200
- package/template/.genia/development/agents/pm.md +142 -142
- package/template/.genia/development/agents/po.md +165 -165
- package/template/.genia/development/agents/qa.md +183 -183
- package/template/.genia/development/agents/reviewer.md +198 -198
- package/template/.genia/development/agents/sm.md +230 -230
- package/template/.genia/development/checklists/architecture-review.md +189 -189
- package/template/.genia/development/checklists/pre-commit.md +205 -205
- package/template/.genia/development/checklists/pre-deploy.md +230 -230
- package/template/.genia/development/checklists/qa-gate.md +216 -216
- package/template/.genia/development/checklists/story-dod.md +155 -155
- package/template/.genia/development/tasks/code-review.md +197 -197
- package/template/.genia/development/tasks/criar-prd.md +170 -170
- package/template/.genia/development/tasks/criar-spec.md +188 -188
- package/template/.genia/development/tasks/criar-story.md +185 -185
- package/template/.genia/development/tasks/debug-sistematico.md +230 -230
- package/template/.genia/development/tasks/dev-implement.md +199 -199
- package/template/.genia/development/tasks/qa-review.md +224 -224
- package/template/.genia/development/workflows/brownfield.md +178 -178
- package/template/.genia/development/workflows/delivery.md +208 -208
- package/template/.genia/development/workflows/development.md +189 -189
- package/template/.genia/development/workflows/greenfield.md +166 -166
- package/template/.genia/development/workflows/planning.md +167 -167
- package/template/.genia/development/workflows/qa-loop.md +179 -179
- package/template/.genia/development/workflows/spec-pipeline.md +192 -192
- package/template/.genia/development/workflows/story-development-cycle.md +252 -252
- package/template/.genia/guidelines/clean-code.md +98 -98
- package/template/.genia/guidelines/testing.md +176 -176
- package/template/.genia/skills/design/canvas-design.md +109 -109
- package/template/.genia/skills/design/frontend-design.md +140 -140
- package/template/.genia/skills/dev/mcp-builder.md +172 -172
- package/template/.genia/skills/dev/webapp-testing.md +150 -150
- package/template/.genia/skills/documents/docx.md +153 -153
- package/template/.genia/skills/documents/pdf.md +134 -134
- package/template/.genia/skills/documents/pptx.md +118 -118
- package/template/.genia/skills/documents/xlsx.md +140 -140
- package/template/.synapse/agent-analyst +8 -8
- package/template/.synapse/agent-architect +8 -8
- package/template/.synapse/agent-dev +8 -8
- package/template/.synapse/agent-devops +8 -8
- package/template/.synapse/agent-pm +8 -8
- package/template/.synapse/agent-po +7 -7
- package/template/.synapse/agent-qa +8 -8
- package/template/.synapse/agent-reviewer +7 -7
- package/template/.synapse/agent-sm +7 -7
- package/template/.synapse/constitution +7 -7
- package/template/.synapse/context +8 -8
- package/template/.synapse/global +8 -8
- package/template/.synapse/manifest +14 -14
- package/template/README.md +53 -53
|
@@ -1,172 +1,172 @@
|
|
|
1
|
-
# Skill: /mcp-builder
|
|
2
|
-
|
|
3
|
-
## Metadata
|
|
4
|
-
- **Nome**: MCP Server Builder
|
|
5
|
-
- **Comando**: /mcp-builder
|
|
6
|
-
- **Agente**: @dev
|
|
7
|
-
- **Categoria**: dev
|
|
8
|
-
- **Versao**: 2.0
|
|
9
|
-
|
|
10
|
-
## Descricao
|
|
11
|
-
Guia para criar servidores MCP (Model Context Protocol) de alta qualidade que permitem LLMs interagirem com servicos externos atraves de tools bem projetadas.
|
|
12
|
-
|
|
13
|
-
## Quando Usar
|
|
14
|
-
- Construir servidores MCP
|
|
15
|
-
- Integrar APIs externas
|
|
16
|
-
- Criar tools para LLMs
|
|
17
|
-
- Python (FastMCP) ou TypeScript (MCP SDK)
|
|
18
|
-
|
|
19
|
-
## Stack Recomendada
|
|
20
|
-
|
|
21
|
-
- **Linguagem**: TypeScript (melhor suporte SDK)
|
|
22
|
-
- **Transport**: Streamable HTTP para servidores remotos, stdio para locais
|
|
23
|
-
|
|
24
|
-
## Workflow de Alto Nivel
|
|
25
|
-
|
|
26
|
-
### Fase 1: Pesquisa e Planejamento
|
|
27
|
-
|
|
28
|
-
#### 1.1 Design MCP Moderno
|
|
29
|
-
- **API Coverage vs Workflow Tools**: Balancear cobertura de endpoints com tools de workflow
|
|
30
|
-
- **Naming**: Prefixos consistentes (`github_create_issue`, `github_list_repos`)
|
|
31
|
-
- **Contexto**: Retornar dados focados e relevantes
|
|
32
|
-
- **Erros**: Mensagens que guiam para solucoes
|
|
33
|
-
|
|
34
|
-
#### 1.2 Documentacao MCP
|
|
35
|
-
```
|
|
36
|
-
Sitemap: https://modelcontextprotocol.io/sitemap.xml
|
|
37
|
-
Paginas: https://modelcontextprotocol.io/specification/draft.md
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
#### 1.3 Documentacao SDK
|
|
41
|
-
- **TypeScript**: https://github.com/modelcontextprotocol/typescript-sdk
|
|
42
|
-
- **Python**: https://github.com/modelcontextprotocol/python-sdk
|
|
43
|
-
|
|
44
|
-
### Fase 2: Implementacao
|
|
45
|
-
|
|
46
|
-
#### 2.1 Estrutura do Projeto (TypeScript)
|
|
47
|
-
```
|
|
48
|
-
mcp-server/
|
|
49
|
-
├── src/
|
|
50
|
-
│ ├── index.ts # Entry point
|
|
51
|
-
│ ├── tools/ # Tools definitions
|
|
52
|
-
│ ├── resources/ # Resources
|
|
53
|
-
│ └── utils/ # Helpers
|
|
54
|
-
├── package.json
|
|
55
|
-
└── tsconfig.json
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
#### 2.2 Infraestrutura Core
|
|
59
|
-
- Cliente API com autenticacao
|
|
60
|
-
- Helpers de error handling
|
|
61
|
-
- Formatacao de resposta (JSON/Markdown)
|
|
62
|
-
- Suporte a paginacao
|
|
63
|
-
|
|
64
|
-
#### 2.3 Implementar Tools
|
|
65
|
-
|
|
66
|
-
**Input Schema** (Zod para TypeScript, Pydantic para Python):
|
|
67
|
-
```typescript
|
|
68
|
-
const schema = z.object({
|
|
69
|
-
query: z.string().describe("Search query"),
|
|
70
|
-
limit: z.number().optional().default(10)
|
|
71
|
-
});
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
**Annotations**:
|
|
75
|
-
- `readOnlyHint`: true/false
|
|
76
|
-
- `destructiveHint`: true/false
|
|
77
|
-
- `idempotentHint`: true/false
|
|
78
|
-
|
|
79
|
-
### Fase 3: Review e Teste
|
|
80
|
-
|
|
81
|
-
#### 3.1 Qualidade de Codigo
|
|
82
|
-
- Sem codigo duplicado (DRY)
|
|
83
|
-
- Error handling consistente
|
|
84
|
-
- Cobertura de tipos completa
|
|
85
|
-
- Descricoes de tools claras
|
|
86
|
-
|
|
87
|
-
#### 3.2 Build e Teste
|
|
88
|
-
```bash
|
|
89
|
-
# TypeScript
|
|
90
|
-
npm run build
|
|
91
|
-
npx @modelcontextprotocol/inspector
|
|
92
|
-
|
|
93
|
-
# Python
|
|
94
|
-
python -m py_compile server.py
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
### Fase 4: Avaliacoes
|
|
98
|
-
|
|
99
|
-
Criar 10 perguntas de avaliacao:
|
|
100
|
-
- Independentes
|
|
101
|
-
- Read-only
|
|
102
|
-
- Complexas (multiplas tool calls)
|
|
103
|
-
- Realisticas
|
|
104
|
-
- Verificaveis
|
|
105
|
-
|
|
106
|
-
**Formato XML**:
|
|
107
|
-
```xml
|
|
108
|
-
<evaluation>
|
|
109
|
-
<qa_pair>
|
|
110
|
-
<question>Pergunta complexa aqui?</question>
|
|
111
|
-
<answer>Resposta verificavel</answer>
|
|
112
|
-
</qa_pair>
|
|
113
|
-
</evaluation>
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
## Exemplo TypeScript
|
|
117
|
-
|
|
118
|
-
```typescript
|
|
119
|
-
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
|
|
120
|
-
import { z } from "zod";
|
|
121
|
-
|
|
122
|
-
const server = new McpServer({
|
|
123
|
-
name: "my-mcp-server",
|
|
124
|
-
version: "1.0.0"
|
|
125
|
-
});
|
|
126
|
-
|
|
127
|
-
server.registerTool({
|
|
128
|
-
name: "search_items",
|
|
129
|
-
description: "Search for items by query",
|
|
130
|
-
inputSchema: z.object({
|
|
131
|
-
query: z.string(),
|
|
132
|
-
limit: z.number().optional()
|
|
133
|
-
}),
|
|
134
|
-
handler: async ({ query, limit = 10 }) => {
|
|
135
|
-
const results = await api.search(query, limit);
|
|
136
|
-
return {
|
|
137
|
-
content: [{ type: "text", text: JSON.stringify(results) }]
|
|
138
|
-
};
|
|
139
|
-
}
|
|
140
|
-
});
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
## Exemplo Python (FastMCP)
|
|
144
|
-
|
|
145
|
-
```python
|
|
146
|
-
from fastmcp import FastMCP
|
|
147
|
-
from pydantic import BaseModel
|
|
148
|
-
|
|
149
|
-
mcp = FastMCP("my-server")
|
|
150
|
-
|
|
151
|
-
class SearchInput(BaseModel):
|
|
152
|
-
query: str
|
|
153
|
-
limit: int = 10
|
|
154
|
-
|
|
155
|
-
@mcp.tool
|
|
156
|
-
async def search_items(input: SearchInput) -> str:
|
|
157
|
-
results = await api.search(input.query, input.limit)
|
|
158
|
-
return json.dumps(results)
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
## Recursos de Referencia
|
|
162
|
-
- `reference/mcp_best_practices.md` - Guidelines universais
|
|
163
|
-
- `reference/node_mcp_server.md` - Guia TypeScript
|
|
164
|
-
- `reference/python_mcp_server.md` - Guia Python
|
|
165
|
-
- `reference/evaluation.md` - Guia de avaliacoes
|
|
166
|
-
|
|
167
|
-
## Tasks Relacionadas
|
|
168
|
-
- task:criar-mcp-server
|
|
169
|
-
- task:integrar-api-externa
|
|
170
|
-
|
|
171
|
-
## Workflows
|
|
172
|
-
- workflow:desenvolvimento-integracao
|
|
1
|
+
# Skill: /mcp-builder
|
|
2
|
+
|
|
3
|
+
## Metadata
|
|
4
|
+
- **Nome**: MCP Server Builder
|
|
5
|
+
- **Comando**: /mcp-builder
|
|
6
|
+
- **Agente**: @dev
|
|
7
|
+
- **Categoria**: dev
|
|
8
|
+
- **Versao**: 2.0
|
|
9
|
+
|
|
10
|
+
## Descricao
|
|
11
|
+
Guia para criar servidores MCP (Model Context Protocol) de alta qualidade que permitem LLMs interagirem com servicos externos atraves de tools bem projetadas.
|
|
12
|
+
|
|
13
|
+
## Quando Usar
|
|
14
|
+
- Construir servidores MCP
|
|
15
|
+
- Integrar APIs externas
|
|
16
|
+
- Criar tools para LLMs
|
|
17
|
+
- Python (FastMCP) ou TypeScript (MCP SDK)
|
|
18
|
+
|
|
19
|
+
## Stack Recomendada
|
|
20
|
+
|
|
21
|
+
- **Linguagem**: TypeScript (melhor suporte SDK)
|
|
22
|
+
- **Transport**: Streamable HTTP para servidores remotos, stdio para locais
|
|
23
|
+
|
|
24
|
+
## Workflow de Alto Nivel
|
|
25
|
+
|
|
26
|
+
### Fase 1: Pesquisa e Planejamento
|
|
27
|
+
|
|
28
|
+
#### 1.1 Design MCP Moderno
|
|
29
|
+
- **API Coverage vs Workflow Tools**: Balancear cobertura de endpoints com tools de workflow
|
|
30
|
+
- **Naming**: Prefixos consistentes (`github_create_issue`, `github_list_repos`)
|
|
31
|
+
- **Contexto**: Retornar dados focados e relevantes
|
|
32
|
+
- **Erros**: Mensagens que guiam para solucoes
|
|
33
|
+
|
|
34
|
+
#### 1.2 Documentacao MCP
|
|
35
|
+
```
|
|
36
|
+
Sitemap: https://modelcontextprotocol.io/sitemap.xml
|
|
37
|
+
Paginas: https://modelcontextprotocol.io/specification/draft.md
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
#### 1.3 Documentacao SDK
|
|
41
|
+
- **TypeScript**: https://github.com/modelcontextprotocol/typescript-sdk
|
|
42
|
+
- **Python**: https://github.com/modelcontextprotocol/python-sdk
|
|
43
|
+
|
|
44
|
+
### Fase 2: Implementacao
|
|
45
|
+
|
|
46
|
+
#### 2.1 Estrutura do Projeto (TypeScript)
|
|
47
|
+
```
|
|
48
|
+
mcp-server/
|
|
49
|
+
├── src/
|
|
50
|
+
│ ├── index.ts # Entry point
|
|
51
|
+
│ ├── tools/ # Tools definitions
|
|
52
|
+
│ ├── resources/ # Resources
|
|
53
|
+
│ └── utils/ # Helpers
|
|
54
|
+
├── package.json
|
|
55
|
+
└── tsconfig.json
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
#### 2.2 Infraestrutura Core
|
|
59
|
+
- Cliente API com autenticacao
|
|
60
|
+
- Helpers de error handling
|
|
61
|
+
- Formatacao de resposta (JSON/Markdown)
|
|
62
|
+
- Suporte a paginacao
|
|
63
|
+
|
|
64
|
+
#### 2.3 Implementar Tools
|
|
65
|
+
|
|
66
|
+
**Input Schema** (Zod para TypeScript, Pydantic para Python):
|
|
67
|
+
```typescript
|
|
68
|
+
const schema = z.object({
|
|
69
|
+
query: z.string().describe("Search query"),
|
|
70
|
+
limit: z.number().optional().default(10)
|
|
71
|
+
});
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
**Annotations**:
|
|
75
|
+
- `readOnlyHint`: true/false
|
|
76
|
+
- `destructiveHint`: true/false
|
|
77
|
+
- `idempotentHint`: true/false
|
|
78
|
+
|
|
79
|
+
### Fase 3: Review e Teste
|
|
80
|
+
|
|
81
|
+
#### 3.1 Qualidade de Codigo
|
|
82
|
+
- Sem codigo duplicado (DRY)
|
|
83
|
+
- Error handling consistente
|
|
84
|
+
- Cobertura de tipos completa
|
|
85
|
+
- Descricoes de tools claras
|
|
86
|
+
|
|
87
|
+
#### 3.2 Build e Teste
|
|
88
|
+
```bash
|
|
89
|
+
# TypeScript
|
|
90
|
+
npm run build
|
|
91
|
+
npx @modelcontextprotocol/inspector
|
|
92
|
+
|
|
93
|
+
# Python
|
|
94
|
+
python -m py_compile server.py
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Fase 4: Avaliacoes
|
|
98
|
+
|
|
99
|
+
Criar 10 perguntas de avaliacao:
|
|
100
|
+
- Independentes
|
|
101
|
+
- Read-only
|
|
102
|
+
- Complexas (multiplas tool calls)
|
|
103
|
+
- Realisticas
|
|
104
|
+
- Verificaveis
|
|
105
|
+
|
|
106
|
+
**Formato XML**:
|
|
107
|
+
```xml
|
|
108
|
+
<evaluation>
|
|
109
|
+
<qa_pair>
|
|
110
|
+
<question>Pergunta complexa aqui?</question>
|
|
111
|
+
<answer>Resposta verificavel</answer>
|
|
112
|
+
</qa_pair>
|
|
113
|
+
</evaluation>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## Exemplo TypeScript
|
|
117
|
+
|
|
118
|
+
```typescript
|
|
119
|
+
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
|
|
120
|
+
import { z } from "zod";
|
|
121
|
+
|
|
122
|
+
const server = new McpServer({
|
|
123
|
+
name: "my-mcp-server",
|
|
124
|
+
version: "1.0.0"
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
server.registerTool({
|
|
128
|
+
name: "search_items",
|
|
129
|
+
description: "Search for items by query",
|
|
130
|
+
inputSchema: z.object({
|
|
131
|
+
query: z.string(),
|
|
132
|
+
limit: z.number().optional()
|
|
133
|
+
}),
|
|
134
|
+
handler: async ({ query, limit = 10 }) => {
|
|
135
|
+
const results = await api.search(query, limit);
|
|
136
|
+
return {
|
|
137
|
+
content: [{ type: "text", text: JSON.stringify(results) }]
|
|
138
|
+
};
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## Exemplo Python (FastMCP)
|
|
144
|
+
|
|
145
|
+
```python
|
|
146
|
+
from fastmcp import FastMCP
|
|
147
|
+
from pydantic import BaseModel
|
|
148
|
+
|
|
149
|
+
mcp = FastMCP("my-server")
|
|
150
|
+
|
|
151
|
+
class SearchInput(BaseModel):
|
|
152
|
+
query: str
|
|
153
|
+
limit: int = 10
|
|
154
|
+
|
|
155
|
+
@mcp.tool
|
|
156
|
+
async def search_items(input: SearchInput) -> str:
|
|
157
|
+
results = await api.search(input.query, input.limit)
|
|
158
|
+
return json.dumps(results)
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
## Recursos de Referencia
|
|
162
|
+
- `reference/mcp_best_practices.md` - Guidelines universais
|
|
163
|
+
- `reference/node_mcp_server.md` - Guia TypeScript
|
|
164
|
+
- `reference/python_mcp_server.md` - Guia Python
|
|
165
|
+
- `reference/evaluation.md` - Guia de avaliacoes
|
|
166
|
+
|
|
167
|
+
## Tasks Relacionadas
|
|
168
|
+
- task:criar-mcp-server
|
|
169
|
+
- task:integrar-api-externa
|
|
170
|
+
|
|
171
|
+
## Workflows
|
|
172
|
+
- workflow:desenvolvimento-integracao
|
|
@@ -1,150 +1,150 @@
|
|
|
1
|
-
# Skill: /webapp-testing
|
|
2
|
-
|
|
3
|
-
## Metadata
|
|
4
|
-
- **Nome**: Web Application Testing
|
|
5
|
-
- **Comando**: /webapp-testing
|
|
6
|
-
- **Agente**: @qa
|
|
7
|
-
- **Categoria**: dev
|
|
8
|
-
- **Versao**: 2.0
|
|
9
|
-
|
|
10
|
-
## Descricao
|
|
11
|
-
Toolkit para interagir e testar aplicacoes web locais usando Playwright. Suporta verificacao de funcionalidade frontend, debug de comportamento UI, capturas de tela e logs do browser.
|
|
12
|
-
|
|
13
|
-
## Quando Usar
|
|
14
|
-
- Testar aplicacoes web locais
|
|
15
|
-
- Verificar funcionalidade frontend
|
|
16
|
-
- Debugar comportamento de UI
|
|
17
|
-
- Capturar screenshots
|
|
18
|
-
- Ver logs do browser
|
|
19
|
-
|
|
20
|
-
## Scripts Helper
|
|
21
|
-
|
|
22
|
-
- `scripts/with_server.py` - Gerencia lifecycle do servidor
|
|
23
|
-
|
|
24
|
-
**Sempre rodar scripts com `--help` primeiro** para ver uso.
|
|
25
|
-
|
|
26
|
-
## Arvore de Decisao
|
|
27
|
-
|
|
28
|
-
```
|
|
29
|
-
Tarefa → E HTML estatico?
|
|
30
|
-
├── Sim → Ler arquivo HTML para identificar selectors
|
|
31
|
-
│ ├── Sucesso → Escrever script Playwright
|
|
32
|
-
│ └── Falha → Tratar como dinamico
|
|
33
|
-
│
|
|
34
|
-
└── Nao (webapp dinamico) → Servidor ja rodando?
|
|
35
|
-
├── Nao → Rodar: python scripts/with_server.py --help
|
|
36
|
-
│ Usar helper + script Playwright simplificado
|
|
37
|
-
│
|
|
38
|
-
└── Sim → Reconhecimento-depois-acao:
|
|
39
|
-
1. Navegar e esperar networkidle
|
|
40
|
-
2. Screenshot ou inspecionar DOM
|
|
41
|
-
3. Identificar selectors do estado renderizado
|
|
42
|
-
4. Executar acoes com selectors descobertos
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
## Usando with_server.py
|
|
46
|
-
|
|
47
|
-
### Servidor Unico
|
|
48
|
-
```bash
|
|
49
|
-
python scripts/with_server.py --server "npm run dev" --port 5173 -- python automation.py
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
### Multiplos Servidores (backend + frontend)
|
|
53
|
-
```bash
|
|
54
|
-
python scripts/with_server.py \
|
|
55
|
-
--server "cd backend && python server.py" --port 3000 \
|
|
56
|
-
--server "cd frontend && npm run dev" --port 5173 \
|
|
57
|
-
-- python automation.py
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
## Script de Automacao
|
|
61
|
-
|
|
62
|
-
```python
|
|
63
|
-
from playwright.sync_api import sync_playwright
|
|
64
|
-
|
|
65
|
-
with sync_playwright() as p:
|
|
66
|
-
browser = p.chromium.launch(headless=True) # Sempre headless
|
|
67
|
-
page = browser.new_page()
|
|
68
|
-
page.goto('http://localhost:5173')
|
|
69
|
-
page.wait_for_load_state('networkidle') # CRITICO: Esperar JS executar
|
|
70
|
-
|
|
71
|
-
# ... logica de automacao
|
|
72
|
-
|
|
73
|
-
browser.close()
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
## Padrao Reconhecimento-Depois-Acao
|
|
77
|
-
|
|
78
|
-
### 1. Inspecionar DOM renderizado
|
|
79
|
-
```python
|
|
80
|
-
page.screenshot(path='/tmp/inspect.png', full_page=True)
|
|
81
|
-
content = page.content()
|
|
82
|
-
page.locator('button').all()
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
### 2. Identificar selectors dos resultados
|
|
86
|
-
|
|
87
|
-
### 3. Executar acoes com selectors descobertos
|
|
88
|
-
|
|
89
|
-
## Armadilha Comum
|
|
90
|
-
|
|
91
|
-
**NAO** inspecionar DOM antes de esperar `networkidle` em apps dinamicos
|
|
92
|
-
|
|
93
|
-
**SIM** esperar `page.wait_for_load_state('networkidle')` antes de inspecao
|
|
94
|
-
|
|
95
|
-
## Best Practices
|
|
96
|
-
|
|
97
|
-
- Usar scripts bundled como caixas pretas
|
|
98
|
-
- Usar `sync_playwright()` para scripts sincronos
|
|
99
|
-
- Sempre fechar browser quando terminar
|
|
100
|
-
- Usar selectors descritivos: `text=`, `role=`, CSS, IDs
|
|
101
|
-
- Adicionar waits apropriados: `wait_for_selector()`, `wait_for_timeout()`
|
|
102
|
-
|
|
103
|
-
## Exemplos de Selectors
|
|
104
|
-
|
|
105
|
-
```python
|
|
106
|
-
# Por texto
|
|
107
|
-
page.click('text=Submit')
|
|
108
|
-
|
|
109
|
-
# Por role
|
|
110
|
-
page.get_by_role('button', name='Submit').click()
|
|
111
|
-
|
|
112
|
-
# Por CSS
|
|
113
|
-
page.click('.btn-primary')
|
|
114
|
-
page.click('#submit-button')
|
|
115
|
-
|
|
116
|
-
# Por data-testid
|
|
117
|
-
page.click('[data-testid="submit-btn"]')
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
## Capturando Logs do Console
|
|
121
|
-
|
|
122
|
-
```python
|
|
123
|
-
page.on('console', lambda msg: print(f"Console: {msg.text}"))
|
|
124
|
-
page.goto('http://localhost:5173')
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
## Screenshots
|
|
128
|
-
|
|
129
|
-
```python
|
|
130
|
-
# Pagina inteira
|
|
131
|
-
page.screenshot(path='screenshot.png', full_page=True)
|
|
132
|
-
|
|
133
|
-
# Elemento especifico
|
|
134
|
-
page.locator('.card').screenshot(path='card.png')
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
## Arquivos de Referencia
|
|
138
|
-
|
|
139
|
-
- `examples/element_discovery.py` - Descobrir botoes, links, inputs
|
|
140
|
-
- `examples/static_html_automation.py` - Usar file:// URLs
|
|
141
|
-
- `examples/console_logging.py` - Capturar logs do console
|
|
142
|
-
|
|
143
|
-
## Tasks Relacionadas
|
|
144
|
-
- task:testar-frontend
|
|
145
|
-
- task:automacao-e2e
|
|
146
|
-
- task:debug-ui
|
|
147
|
-
|
|
148
|
-
## Workflows
|
|
149
|
-
- workflow:qa-automatizado
|
|
150
|
-
- workflow:validacao-frontend
|
|
1
|
+
# Skill: /webapp-testing
|
|
2
|
+
|
|
3
|
+
## Metadata
|
|
4
|
+
- **Nome**: Web Application Testing
|
|
5
|
+
- **Comando**: /webapp-testing
|
|
6
|
+
- **Agente**: @qa
|
|
7
|
+
- **Categoria**: dev
|
|
8
|
+
- **Versao**: 2.0
|
|
9
|
+
|
|
10
|
+
## Descricao
|
|
11
|
+
Toolkit para interagir e testar aplicacoes web locais usando Playwright. Suporta verificacao de funcionalidade frontend, debug de comportamento UI, capturas de tela e logs do browser.
|
|
12
|
+
|
|
13
|
+
## Quando Usar
|
|
14
|
+
- Testar aplicacoes web locais
|
|
15
|
+
- Verificar funcionalidade frontend
|
|
16
|
+
- Debugar comportamento de UI
|
|
17
|
+
- Capturar screenshots
|
|
18
|
+
- Ver logs do browser
|
|
19
|
+
|
|
20
|
+
## Scripts Helper
|
|
21
|
+
|
|
22
|
+
- `scripts/with_server.py` - Gerencia lifecycle do servidor
|
|
23
|
+
|
|
24
|
+
**Sempre rodar scripts com `--help` primeiro** para ver uso.
|
|
25
|
+
|
|
26
|
+
## Arvore de Decisao
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
Tarefa → E HTML estatico?
|
|
30
|
+
├── Sim → Ler arquivo HTML para identificar selectors
|
|
31
|
+
│ ├── Sucesso → Escrever script Playwright
|
|
32
|
+
│ └── Falha → Tratar como dinamico
|
|
33
|
+
│
|
|
34
|
+
└── Nao (webapp dinamico) → Servidor ja rodando?
|
|
35
|
+
├── Nao → Rodar: python scripts/with_server.py --help
|
|
36
|
+
│ Usar helper + script Playwright simplificado
|
|
37
|
+
│
|
|
38
|
+
└── Sim → Reconhecimento-depois-acao:
|
|
39
|
+
1. Navegar e esperar networkidle
|
|
40
|
+
2. Screenshot ou inspecionar DOM
|
|
41
|
+
3. Identificar selectors do estado renderizado
|
|
42
|
+
4. Executar acoes com selectors descobertos
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Usando with_server.py
|
|
46
|
+
|
|
47
|
+
### Servidor Unico
|
|
48
|
+
```bash
|
|
49
|
+
python scripts/with_server.py --server "npm run dev" --port 5173 -- python automation.py
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Multiplos Servidores (backend + frontend)
|
|
53
|
+
```bash
|
|
54
|
+
python scripts/with_server.py \
|
|
55
|
+
--server "cd backend && python server.py" --port 3000 \
|
|
56
|
+
--server "cd frontend && npm run dev" --port 5173 \
|
|
57
|
+
-- python automation.py
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Script de Automacao
|
|
61
|
+
|
|
62
|
+
```python
|
|
63
|
+
from playwright.sync_api import sync_playwright
|
|
64
|
+
|
|
65
|
+
with sync_playwright() as p:
|
|
66
|
+
browser = p.chromium.launch(headless=True) # Sempre headless
|
|
67
|
+
page = browser.new_page()
|
|
68
|
+
page.goto('http://localhost:5173')
|
|
69
|
+
page.wait_for_load_state('networkidle') # CRITICO: Esperar JS executar
|
|
70
|
+
|
|
71
|
+
# ... logica de automacao
|
|
72
|
+
|
|
73
|
+
browser.close()
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Padrao Reconhecimento-Depois-Acao
|
|
77
|
+
|
|
78
|
+
### 1. Inspecionar DOM renderizado
|
|
79
|
+
```python
|
|
80
|
+
page.screenshot(path='/tmp/inspect.png', full_page=True)
|
|
81
|
+
content = page.content()
|
|
82
|
+
page.locator('button').all()
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### 2. Identificar selectors dos resultados
|
|
86
|
+
|
|
87
|
+
### 3. Executar acoes com selectors descobertos
|
|
88
|
+
|
|
89
|
+
## Armadilha Comum
|
|
90
|
+
|
|
91
|
+
**NAO** inspecionar DOM antes de esperar `networkidle` em apps dinamicos
|
|
92
|
+
|
|
93
|
+
**SIM** esperar `page.wait_for_load_state('networkidle')` antes de inspecao
|
|
94
|
+
|
|
95
|
+
## Best Practices
|
|
96
|
+
|
|
97
|
+
- Usar scripts bundled como caixas pretas
|
|
98
|
+
- Usar `sync_playwright()` para scripts sincronos
|
|
99
|
+
- Sempre fechar browser quando terminar
|
|
100
|
+
- Usar selectors descritivos: `text=`, `role=`, CSS, IDs
|
|
101
|
+
- Adicionar waits apropriados: `wait_for_selector()`, `wait_for_timeout()`
|
|
102
|
+
|
|
103
|
+
## Exemplos de Selectors
|
|
104
|
+
|
|
105
|
+
```python
|
|
106
|
+
# Por texto
|
|
107
|
+
page.click('text=Submit')
|
|
108
|
+
|
|
109
|
+
# Por role
|
|
110
|
+
page.get_by_role('button', name='Submit').click()
|
|
111
|
+
|
|
112
|
+
# Por CSS
|
|
113
|
+
page.click('.btn-primary')
|
|
114
|
+
page.click('#submit-button')
|
|
115
|
+
|
|
116
|
+
# Por data-testid
|
|
117
|
+
page.click('[data-testid="submit-btn"]')
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Capturando Logs do Console
|
|
121
|
+
|
|
122
|
+
```python
|
|
123
|
+
page.on('console', lambda msg: print(f"Console: {msg.text}"))
|
|
124
|
+
page.goto('http://localhost:5173')
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Screenshots
|
|
128
|
+
|
|
129
|
+
```python
|
|
130
|
+
# Pagina inteira
|
|
131
|
+
page.screenshot(path='screenshot.png', full_page=True)
|
|
132
|
+
|
|
133
|
+
# Elemento especifico
|
|
134
|
+
page.locator('.card').screenshot(path='card.png')
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## Arquivos de Referencia
|
|
138
|
+
|
|
139
|
+
- `examples/element_discovery.py` - Descobrir botoes, links, inputs
|
|
140
|
+
- `examples/static_html_automation.py` - Usar file:// URLs
|
|
141
|
+
- `examples/console_logging.py` - Capturar logs do console
|
|
142
|
+
|
|
143
|
+
## Tasks Relacionadas
|
|
144
|
+
- task:testar-frontend
|
|
145
|
+
- task:automacao-e2e
|
|
146
|
+
- task:debug-ui
|
|
147
|
+
|
|
148
|
+
## Workflows
|
|
149
|
+
- workflow:qa-automatizado
|
|
150
|
+
- workflow:validacao-frontend
|