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.
Files changed (89) hide show
  1. package/README.md +154 -106
  2. package/bin/index.js +240 -240
  3. package/package.json +42 -37
  4. package/template/.claude/CLAUDE.md +215 -215
  5. package/template/.claude/agent-memory/analyst/MEMORY.md +20 -20
  6. package/template/.claude/agent-memory/architect/MEMORY.md +20 -20
  7. package/template/.claude/agent-memory/dev/MEMORY.md +20 -20
  8. package/template/.claude/agent-memory/devops/MEMORY.md +20 -20
  9. package/template/.claude/agent-memory/pm/MEMORY.md +20 -20
  10. package/template/.claude/agent-memory/po/MEMORY.md +20 -20
  11. package/template/.claude/agent-memory/qa/MEMORY.md +20 -20
  12. package/template/.claude/agent-memory/reviewer/MEMORY.md +20 -20
  13. package/template/.claude/agent-memory/sm/MEMORY.md +20 -20
  14. package/template/.claude/hooks/enforce-git-push-authority.py +70 -70
  15. package/template/.claude/hooks/metrics-tracker.cjs +65 -0
  16. package/template/.claude/hooks/precompact-session-digest.cjs +87 -87
  17. package/template/.claude/hooks/sql-governance.py +65 -65
  18. package/template/.claude/hooks/synapse-engine.cjs +122 -122
  19. package/template/.claude/hooks/write-path-validation.py +59 -59
  20. package/template/.claude/rules/agent-authority.md +39 -39
  21. package/template/.claude/rules/agent-handoff.md +71 -71
  22. package/template/.claude/rules/agent-memory.md +61 -61
  23. package/template/.claude/rules/ids-principles.md +52 -52
  24. package/template/.claude/rules/mcp-usage.md +49 -49
  25. package/template/.claude/rules/new-project.md +157 -0
  26. package/template/.claude/rules/story-lifecycle.md +87 -87
  27. package/template/.claude/rules/workflow-execution.md +68 -68
  28. package/template/.claude/settings.json +58 -58
  29. package/template/.claude/settings.local.json +14 -14
  30. package/template/.genia/CONSTITUTION.md +129 -129
  31. package/template/.genia/contexts/api-patterns.md +134 -134
  32. package/template/.genia/contexts/nextjs-react.md +210 -210
  33. package/template/.genia/contexts/projeto.md +18 -18
  34. package/template/.genia/contexts/supabase.md +152 -152
  35. package/template/.genia/contexts/whatsapp-cloud.md +176 -176
  36. package/template/.genia/core-config.yaml +192 -192
  37. package/template/.genia/development/agents/analyst.md +138 -138
  38. package/template/.genia/development/agents/architect.md +171 -171
  39. package/template/.genia/development/agents/dev.md +160 -160
  40. package/template/.genia/development/agents/devops.md +200 -200
  41. package/template/.genia/development/agents/pm.md +142 -142
  42. package/template/.genia/development/agents/po.md +165 -165
  43. package/template/.genia/development/agents/qa.md +183 -183
  44. package/template/.genia/development/agents/reviewer.md +198 -198
  45. package/template/.genia/development/agents/sm.md +230 -230
  46. package/template/.genia/development/checklists/architecture-review.md +189 -189
  47. package/template/.genia/development/checklists/pre-commit.md +205 -205
  48. package/template/.genia/development/checklists/pre-deploy.md +230 -230
  49. package/template/.genia/development/checklists/qa-gate.md +216 -216
  50. package/template/.genia/development/checklists/story-dod.md +155 -155
  51. package/template/.genia/development/tasks/code-review.md +197 -197
  52. package/template/.genia/development/tasks/criar-prd.md +170 -170
  53. package/template/.genia/development/tasks/criar-spec.md +188 -188
  54. package/template/.genia/development/tasks/criar-story.md +185 -185
  55. package/template/.genia/development/tasks/debug-sistematico.md +230 -230
  56. package/template/.genia/development/tasks/dev-implement.md +199 -199
  57. package/template/.genia/development/tasks/qa-review.md +224 -224
  58. package/template/.genia/development/workflows/brownfield.md +178 -178
  59. package/template/.genia/development/workflows/delivery.md +208 -208
  60. package/template/.genia/development/workflows/development.md +189 -189
  61. package/template/.genia/development/workflows/greenfield.md +166 -166
  62. package/template/.genia/development/workflows/planning.md +167 -167
  63. package/template/.genia/development/workflows/qa-loop.md +179 -179
  64. package/template/.genia/development/workflows/spec-pipeline.md +192 -192
  65. package/template/.genia/development/workflows/story-development-cycle.md +252 -252
  66. package/template/.genia/guidelines/clean-code.md +98 -98
  67. package/template/.genia/guidelines/testing.md +176 -176
  68. package/template/.genia/skills/design/canvas-design.md +109 -109
  69. package/template/.genia/skills/design/frontend-design.md +140 -140
  70. package/template/.genia/skills/dev/mcp-builder.md +172 -172
  71. package/template/.genia/skills/dev/webapp-testing.md +150 -150
  72. package/template/.genia/skills/documents/docx.md +153 -153
  73. package/template/.genia/skills/documents/pdf.md +134 -134
  74. package/template/.genia/skills/documents/pptx.md +118 -118
  75. package/template/.genia/skills/documents/xlsx.md +140 -140
  76. package/template/.synapse/agent-analyst +8 -8
  77. package/template/.synapse/agent-architect +8 -8
  78. package/template/.synapse/agent-dev +8 -8
  79. package/template/.synapse/agent-devops +8 -8
  80. package/template/.synapse/agent-pm +8 -8
  81. package/template/.synapse/agent-po +7 -7
  82. package/template/.synapse/agent-qa +8 -8
  83. package/template/.synapse/agent-reviewer +7 -7
  84. package/template/.synapse/agent-sm +7 -7
  85. package/template/.synapse/constitution +7 -7
  86. package/template/.synapse/context +8 -8
  87. package/template/.synapse/global +8 -8
  88. package/template/.synapse/manifest +14 -14
  89. 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