@silasfmartins/testhub 1.0.0

package/dist/scripts/init-frontend.js

@@ -0,0 +1,627 @@
+#!/usr/bin/env node
+// @ts-nocheck
+import fs from 'node:fs';
+import { execSync } from 'child_process';
+import yaml from 'js-yaml';
+import path from 'path';
+import { generateBiomeConfigString, generateCoverageReadme, generatePackageJson, generateTsConfigForProject, generateVitestConfigString, getLatestVersions, } from './package-versions.js';
+import { setupUltracite } from './ultracite-setup.js';
+const root = process.cwd();
+const catalogPath = path.join(root, 'catalog-info.yaml');
+if (!fs.existsSync(catalogPath)) {
+    console.error('❌ Arquivo catalog-info.yaml não encontrado.');
+    process.exit(1);
+}
+const catalog = yaml.load(fs.readFileSync(catalogPath, 'utf-8'));
+const projectName = catalog?.metadata?.name || 'meu-projeto';
+const projectNameUnderscore = projectName.replace(/-/g, '_');
+const write = (filePath, content) => {
+    const fullPath = path.join(root, filePath);
+    fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+    fs.writeFileSync(fullPath, content);
+};
+async function main() {
+    console.log('🚀 Inicializando projeto Frontend com versões atualizadas...');
+    console.log(`📦 Projeto: ${projectName}`);
+    console.log('');
+    // ✅ Buscar versões mais recentes
+    const versions = await getLatestVersions();
+    // ✅ Gerar package.json com versões atualizadas
+    const packageJsonContent = generatePackageJson(projectName, 'frontend', versions);
+    // ✅ Gerar tsconfig.json baseado no AutoCore
+    const tsconfigContent = generateTsConfigForProject('frontend');
+    // ✅ Gerar vitest.config.ts baseado no AutoCore (NOVO!)
+    const vitestConfigContent = generateVitestConfigString('frontend');
+    // ✅ Gerar biome.json sincronizado com AutoCore
+    const biomeConfigContent = generateBiomeConfigString();
+    console.log('📝 Criando arquivos do projeto...');
+    // package.json com versões dinâmicas
+    write('package.json', JSON.stringify(packageJsonContent, null, 2));
+    // ✅ tsconfig.json sempre sincronizado com o AutoCore
+    write('tsconfig.json', JSON.stringify(tsconfigContent, null, 2));
+    // ✅ vitest.config.ts sempre sincronizado com o AutoCore (NOVO!)
+    write('vitest.config.ts', vitestConfigContent);
+    // ✅ biome.json sincronizado automaticamente com o AutoCore
+    write('biome.json', biomeConfigContent);
+    // playwright.config.ts
+    write('playwright.config.ts', `
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  globalSetup: '@silasfmartins/testhub/setup',
+  reporter: [['list'], ['html', { open: 'never' }], ['@silasfmartins/testhub/reporter']],
+  testDir: './tests',
+  testMatch: ['**/**/*.spec.ts', '**/**/*.test.ts'],
+  timeout: 1_800_000,
+  expect: {
+    timeout: 1_800_000,
+  },
+  fullyParallel: false,
+  workers: 1,
+  retries: 0,
+  use: {
+    baseURL: '',
+    screenshot: 'on',
+    trace: 'on',
+    video: 'on',
+  },
+  projects: [
+    // ✅ Projetos "headless" (sem browser) — para SSH, API, Banco, Mobile
+    {
+      name: 'ssh',
+      use: { browserName: undefined },
+    },
+    {
+      name: 'api',
+      use: { browserName: undefined },
+    },
+    {
+      name: 'banco',
+      use: { browserName: undefined },
+    },
+    {
+      name: 'mobile',
+      use: { browserName: undefined },
+    },
+
+    // ✅ Projetos de browser — só serão usados se você solicitar via --project
+    {
+      name: 'chromium',
+      use: {
+        browserName: 'chromium',
+        viewport: null,
+        headless: process.env.PLAYWRIGHT_HEADLESS === 'false' ? false : true,
+        launchOptions: {
+          args: ['--start-maximized'],
+        }
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        browserName: 'firefox',
+        viewport: null,
+        headless: process.env.PLAYWRIGHT_HEADLESS === 'false' ? false : true,
+        launchOptions: {
+          args: ['--start-maximized'],
+        }
+      },
+    },
+    {
+      name: 'webkit',
+      use: {
+        browserName: 'webkit',
+        viewport: null,
+        headless: process.env.PLAYWRIGHT_HEADLESS === 'false' ? false : true,
+        launchOptions: {
+          args: ['--start-maximized'],
+        }
+      },
+    },
+  ],
+});
+`);
+    // .npmrc
+    write('.npmrc', `registry=https://pkgs.dev.azure.com/telefonica-vivo-brasil/_packaging/DevOps/npm/registry/`);
+    // .gitignore
+    write('.gitignore', `# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+playwright-videos
+/playwright-videos/
+/playwright-videos
+
+# Tests e logs
+/tests
+/logs
+
+# Environment files
+.env
+.env.preprod
+.env.esteira1
+.env.esteira2
+.env.prodlike
+.env.prod
+
+.vscode
+.vscode/
+docs
+docs/
+
+# AutoCore específicos
+.test-data-store.json
+.env.lock
+.configlogger.lock
+
+# VS Code
+.vscode/settings.json
+.github/
+.github
+
+# Biome
+.biome.log
+
+# Coverage
+coverage/
+*.lcov
+
+# Screenshots e videos
+/test-results/
+/playwright-report/`);
+    // Arquivo de environment padrão
+    write('.env', `# Arquivo que seleciona o ambiente a ser utilizado
+ENV=preprod`);
+    // Arquivo de environment padrão
+    write('.env.preprod', `# Configurações de ambiente para preprod
+BASE_URL=https://your-app.preprod.com
+NAVIGATION_TIMEOUT=15000
+SLOW_MO=0
+WORKERS=undefined
+RETRIES=0
+# Adicione suas variáveis específicas aqui`);
+    // Arquivo de environment esteira1
+    write('.env.esteira1', `# Configurações de ambiente para esteira1
+BASE_URL=https://your-app.esteira1.com
+# Adicione suas variáveis específicas aqui`);
+    // Arquivo de environment esteira2
+    write('.env.esteira2', `# Configurações de ambiente para esteira2
+BASE_URL=https://your-app.esteira2.com
+# Adicione suas variáveis específicas aqui`);
+    // Arquivo de environment prodlike
+    write('.env.prodlike', `# Configurações de ambiente para prodlike
+BASE_URL=https://your-app.prodlike.com
+# Adicione suas variáveis específicas aqui`);
+    // Attributes exemplo
+    write('src/attributes/AttributesAcessarPagina.ts', `export class AttributesAcessarPagina {
+  protected readonly modal = '//h5[text()="Acesso Ferramentas"]'
+}`);
+    //env.ts
+    write('src/env.ts', `import { config } from 'dotenv'
+
+config()
+
+const rawEnv = {
+  ENV: process.env.ENV,
+}
+export const env = rawEnv
+`);
+    // Page Object para Dashboard
+    write('src/pages/AcessarPagina.ts', `import { WebActions } from '@silasfmartins/testhub'
+import { AttributesAcessarPagina } from '../attributes/AttributesAcessarPagina.js'
+
+export default class AcessarPagina extends AttributesAcessarPagina {
+  async navigateToLoginPage(): Promise<void> {
+    await WebActions.navigateTo('/', 'Página inicial')
+  }
+
+  async validarModal(): Promise<void> {
+    await WebActions.waitForVisible(
+      this.modal,
+      5000,
+      'Título Acesso Ferramentas'
+    )
+  }
+}
+`);
+    // Attributes para Dashboard
+    write('src/attributes/AttributesAcessarPagina.ts', `import { type ILocator, TestContext } from '@silasfmartins/testhub'
+
+export class AttributesAcessarPagina {
+  protected get modal(): ILocator {
+    return TestContext.page.locator('//h5[text()="Acesso Ferramentas"]')
+  }
+}
+`);
+    // Exemplo de teste básico (padrão recomendado)
+    write('tests/login.spec.ts', `import { type TestInfo, test, TestAnnotations } from '@silasfmartins/testhub'
+import AcessarPagina from '../src/pages/AcessarPagina.js'
+
+test.describe('Página Inicial', () => {
+  test('Deve visitar a página inicial [octane-123456]', async ({}, testInfo: TestInfo) => {
+    TestAnnotations.Frontend.testInfo = testInfo
+    await TestAnnotations.setSystem('MEU_SISTEMA')
+    await new AcessarPagina().navigateToLoginPage()
+  })
+})
+`);
+    // Pipeline Azure DevOps
+    write('.azuredevops/azure-pipeline.yml', `trigger:
+  batch: true
+  branches:
+    include:
+    - 'master'
+  paths:
+    include:
+    - '*'
+    exclude:
+    - .azuredevops/*
+    - docs/*
+    - catalog-info.yaml
+    - mkdocs.yml
+    - scripts.py
+    - catalog/*
+
+resources:
+  repositories:
+    - repository: CodePlay
+      name: DevOps/Vivo.CodePlay.Pipelines
+      type: git
+      ref: refs/heads/test-playwright
+      endpoint: CodePlay
+
+pool:
+  name: GeneralPurposeLinuxAgentsCI
+
+extends:
+  template: tech_products/qa/build/pipeline_node_npm.yml@CodePlay
+  parameters:
+    jobName: 'build_${projectNameUnderscore}_pkg'
+    commitSHA: '$(Build.SourceVersion)'
+    registryServiceConnection: 'ACR-DEVOPS'
+    govAppAcronym: ''
+    skipScan: false  # Alterado para false para executar Fortify e SonarQube
+`);
+    // SonarQube configuration
+    write('.azuredevops/sonar-project.properties', `################### NÃO ALTERAR!!! ###################
+# Informações gerais sobre o projeto.                #
+# Todas as variáveis de ambiente são fornecidas pela #
+# automação, não alterar!                            #
+######################################################
+
+sonar.projectDescription=Projeto Frontend com AutoCore
+sonar.analysis.orgName=\${env.AZ_ORG_NAME}
+sonar.analysis.buildAuthor=\${env.AZ_BUILD_AUTHOR}
+sonar.scm.exclusions.disabled=false
+sonar.scm.forceReloadAll=true
+sonar.log.level=DEBUG
+sonar.verbose=true
+sonar.sourceEncoding=UTF-8
+
+# Diretórios e arquivos relevantes para Node.js/TypeScript
+sonar.sources=src
+sonar.inclusions=**/*.ts
+sonar.test.inclusions=**/*.spec.ts,**/*.test.ts
+sonar.typescript.lcov.reportPaths=coverage/lcov.info
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+
+# Exclusões de cobertura e análise
+sonar.exclusions=node_modules/**,dist/**,coverage/**,**/*.config.js,**/*.config.ts
+sonar.coverage.exclusions=**/*.d.ts,node_modules/**,dist/**,coverage/**,**/*.config.js,**/*.config.ts,**/*.spec.ts,**/*.test.ts
+sonar.test.exclusions=node_modules/**,dist/**,coverage/**
+
+# Configurações específicas para projetos Frontend
+sonar.javascript.environments=browser,node
+sonar.typescript.node=true
+`);
+    // ✅ Estrutura de testes
+    console.log('📝 Criando estrutura de testes...');
+    // tests/example.spec.ts - Teste E2E com Playwright
+    write('tests/example.spec.ts', `import { type TestInfo, test, TestAnnotations } from '@silasfmartins/testhub'
+import AcessarPagina from '../src/pages/AcessarPagina.js'
+
+test.describe('Página Inicial', () => {
+  test('Deve visitar a página inicial [octane-123456]', async ({}, testInfo: TestInfo) => {
+    TestAnnotations.Frontend.testInfo = testInfo
+    await TestAnnotations.setSystem('MEU_SISTEMA')
+    await new AcessarPagina().navigateToLoginPage()
+  })
+})
+`);
+    // README.md
+    write('README.md', `# ${projectName}
+
+Projeto de automação de testes Frontend baseado no TestHub (AutoCore).
+
+## 🚀 Como usar
+
+### Instalação de dependências
+\`\`\`bash
+npm install
+\`\`\`
+
+### Executar testes
+\`\`\`bash
+# Ambiente preprod
+npm run test:preprod
+
+# Ambiente esteira1
+npm run test:esteira1
+
+# Ambiente esteira2
+npm run test:esteira2
+
+# Ambiente prodlike
+npm run test:prodlike
+\`\`\`
+
+### Gerar Artefato para Projetos de Cenários
+npm run build
+
+### Configuração de ambiente
+
+1. Configure as variáveis de ambiente nos arquivos \`.env.*\`
+2. Defina BASE_URL para cada ambiente
+3. Configure viewport, timeouts conforme necessário
+
+## 📋 Estrutura do projeto
+
+\`\`\`
+${projectName}/
+├── src/
+│   ├── pages/        # Page Objects para interação com páginas
+│   └── attributes/          # Seletores e elementos das páginas
+│   └── setup/fixtures               # Fixtures e setup customizado (opcional)
+|   └── env.ts                # Configuração de environment
+├── tests/                   # Arquivos de teste
+├── .env.*                  # Variáveis de ambiente por ambiente
+├── playwright.config.ts    # Configuração do Playwright
+├── tsconfig.json          # Configuração TypeScript (sincronizada)
+├── biome.json           # Configuração Biome (sincronizada)
+└── README.md            # Esta documentação
+\`\`\`
+
+## 🔧 Desenvolvimento
+
+- **TypeScript**: Configurado e sincronizado com AutoCore
+- **Playwright**: Framework de testes E2E
+- **AutoCore**: Biblioteca de utilitários para automação
+- **Page Object Model**: Padrão de design implementado
+- **Suporte a múltiplos browsers**: Chrome, Firefox, Safari
+- **Biome**: Linting e formatação (configuração sincronizada)
+- **Ultracite**: Experiência de desenvolvimento aprimorada
+
+## 📊 Relatórios
+
+Os relatórios são gerados automaticamente em:
+- \`playwright-report/\` - Relatório HTML visual
+- \`test-results/\` - Resultados detalhados e artifacts
+- Logs estruturados no console
+- Screenshots automáticos em falhas
+- Vídeos de execução (quando habilitados)
+
+## 🧪 Exemplos de Uso
+
+### Teste básico de página
+\`\`\`typescript
+// ✅ Importe 'test' do @silasfmartins/testhub - a page é injetada automaticamente!
+import { type TestInfo, test, TestAnnotations } from '@silasfmartins/testhub'
+import PageLogin from '../src/pages/PageLogin.js';
+
+test.describe('Login', () => {
+  test('Login test', async ({}, testInfo: TestInfo) => {
+    TestAnnotations.Frontend.testInfo = testInfo;
+    await TestAnnotations.setSystem('MEU_SISTEMA');
+    
+    await new PageLogin().navigateToLogin();
+  });
+});
+\`\`\`
+
+### Page Object personalizado
+\`\`\`typescript
+import { WebActions, TestContext } from '@silasfmartins/testhub';
+import { AttributesMyPage } from '../attributes/AttributesMyPage.js';
+
+export class MyPage extends AttributesMyPage {
+  async clickButton(buttonName: string) {
+    // Exemplo seguro sem usar template-placeholder dentro do README template
+    // const button = TestContext.page.locator("button:has-text('" + buttonName + "')");
+    await WebActions.click(this.button, 'Clicando em ' + buttonName);
+  }
+}
+\`\`\`
+
+## 🔧 Comandos Úteis
+
+\`\`\`bash
+# Desenvolvimento
+npm run test:preprod         # Executar testes em preprod
+npm run test:preprod:chromium # Executar apenas no Chrome
+npm run ui:preprod          # Interface visual dos testes
+npm run debug:preprod       # Modo debug
+
+# Qualidade de código
+npx biome check            # Verificar código com Biome
+npx biome format           # Formatar código com Biome
+npx biome check --apply    # Aplicar correções automáticas
+
+# Debug avançado
+npm run test:preprod -- --debug        # Executar em modo debug
+npm run test:preprod -- --headed       # Executar com interface visual
+npm run test:preprod -- --ui           # Executar com UI do Playwright
+npm run test:preprod -- --trace=on     # Executar com traces habilitados
+\`\`\`
+
+## 🎯 Configuração de Ambiente
+
+### Para debug local:
+\`\`\`bash
+# Ativar modo lento
+SLOW_MO=1000 npm run test:preprod
+\`\`\`
+
+## 🔄 Sincronização com AutoCore
+
+Este projeto mantém sincronização automática com o AutoCore para:
+
+- **tsconfig.json**: Configuração de compilação TypeScript
+- **biome.json**: Configuração de linting e formatação
+- **Versões de dependências**: Sempre atualizadas
+
+Para sincronizar manualmente:
+\`\`\`bash
+npm i
+\`\`\`
+
+## 📈 Métricas e Monitoramento
+
+- **Relatórios HTML**: Visualização rica dos resultados
+- **Logs estruturados**: Para análise e debugging
+- **Screenshots automáticos**: Em caso de falhas
+- **Vídeos de execução**: Para análise detalhada
+- **Traces do Playwright**: Para debug avançado
+- **Métricas de performance**: Tempo de carregamento de páginas
+
+## 🎨 Boas Práticas
+
+### Page Object Model:
+- **Separação clara**: Attributes (seletores) e Page Objects (ações)
+- **Reutilização**: Métodos comuns entre páginas
+- **Manutenibilidade**: Fácil atualização quando UI muda
+
+### Seletores:
+- **Prioridade**: data-testid > id > class > text
+- **Estabilidade**: Evitar seletores frágeis como CSS complexos
+- **Consistência**: Padrão de nomenclatura uniforme
+
+### Testes:
+- **Independência**: Cada teste deve ser independente
+- **Limpeza**: Setup e teardown adequados
+- **Assertivas**: Validações claras e específicas
+
+## 🆘 Resolução de Problemas
+
+### Erro de timeout
+\`\`\`bash
+# Aumentar timeout no playwright.config.ts
+timeout: 120000  # 2 minutos
+
+# Ou aumentar timeout específico
+NAVIGATION_TIMEOUT=30000 npm run test:preprod
+\`\`\`
+
+### Problemas de seletores
+\`\`\`bash
+# Usar modo debug para inspecionar elementos
+npm run debug:preprod
+\`\`\`
+
+### Performance lenta
+\`\`\`bash
+# Reduzir workers em CI
+workers: process.env.WORKERS ? 1 : undefined
+
+# Desabilitar recursos desnecessários
+video: 'retain-on-failure'  # Ao invés de 'on'
+\`\`\`
+
+### Atualizar dependências
+\`\`\`bash
+npx npm-check-updates -u && npm install
+npx playwright install  # Atualizar browsers
+\`\`\`
+
+## 📝 Contribuição
+
+1. Mantenha os padrões de código (Biome configurado)
+2. Adicione testes para novas funcionalidades
+3. Use o Page Object Model
+4. Documente seletores complexos
+5. Valide em múltiplos browsers quando relevante
+
+## 📚 Referências
+
+- [AutoCore WebSite](http://brtlvlty0559pl:3002/)
+- [Playwright Documentation](https://playwright.dev/)
+- [Page Object Model](https://playwright.dev/docs/pom)
+- [Best Practices](https://playwright.dev/docs/best-practices)
+
+---
+
+**Gerado automaticamente pelo AutoCore v${versions?.dependencies?.['@silasfmartins/testhub'] || 'latest'}**
+`);
+    // 📊 README específico para Coverage
+    const coverageReadmeTemplate = generateCoverageReadme(projectName);
+    write('docs/COVERAGE.md', coverageReadmeTemplate);
+    console.log('📊 Documentação de cobertura criada: docs/COVERAGE.md');
+    // 📦 Instalação de dependências NPM
+    console.log('📦 Instalando dependências NPM...');
+    try {
+        execSync('npm install', {
+            stdio: 'inherit',
+            cwd: root,
+        });
+        console.log('✅ Dependências NPM instaladas com sucesso');
+    }
+    catch (err) {
+        console.warn('⚠️ Erro ao instalar dependências automaticamente', err);
+        console.log('💡 Execute manualmente: npm install');
+    }
+    // 🎭 CRÍTICO: Sempre instalar browsers Playwright
+    console.log('🎭 Instalando browsers Playwright...');
+    try {
+        execSync('npx playwright install', {
+            stdio: 'inherit',
+            cwd: root,
+        });
+        console.log('✅ Browsers Playwright instalados com sucesso');
+    }
+    catch (err) {
+        console.warn('⚠️ Erro ao instalar browsers automaticamente', err);
+        console.log('💡 Execute manualmente: npx playwright install');
+    }
+    // ✅ Configurar Ultracite automaticamente
+    console.log('🤖 Configurando ambiente de desenvolvimento...');
+    await setupUltracite(root);
+    // ✅ Garantir sincronização final do biome.json
+    console.log('🔧 Sincronizando configuração do Biome...');
+    const finalBiomeConfig = generateBiomeConfigString();
+    write('biome.json', finalBiomeConfig);
+    // ✅ Instalação finalizada com sucesso
+    console.log('');
+    console.log('🎉 Projeto Frontend gerado com sucesso!');
+    console.log('');
+    console.log('📋 Próximos passos:');
+    console.log('   1. Configure suas variáveis de ambiente nos arquivos .env.*');
+    console.log('   2. Adicione sua BASE_URL nos ambientes');
+    console.log('   3. Execute: npm run test:preprod');
+    console.log('   4. O Ultracite está configurado para VS Code');
+    console.log('');
+    console.log('🛠️ Comandos úteis:');
+    console.log('   npm run test:preprod         - Executar testes em preprod');
+    console.log('   npm run test:esteira1        - Executar testes em esteira1');
+    console.log('   npm run test:esteira2        - Executar testes em esteira2');
+    console.log('   npm run test:prodlike        - Executar testes em prodlike');
+    console.log('   npm run ui:preprod          - Interface visual dos testes');
+    console.log('   npm run debug:preprod       - Modo debug');
+    console.log('   npx biome check            - Verificar código com Biome');
+    console.log('   npx biome format           - Formatar código com Biome');
+    console.log('');
+    console.log('✅ Configurações sincronizadas com AutoCore:');
+    console.log('   📝 tsconfig.json - Compilação TypeScript');
+    console.log('   🎨 biome.json - Linting e formatação (SINCRONIZADO)');
+    console.log('   🤖 Ultracite - Experiência de desenvolvimento');
+    console.log('   📦 Dependências - Versões mais recentes');
+    console.log('   🎭 Playwright - Configuração otimizada para frontend');
+    console.log('   🌐 Browsers - Chromium, Firefox e WebKit instalados');
+    console.log('');
+    console.log('🚀 Projeto pronto para desenvolvimento de testes frontend!');
+}
+// Executar função principal
+main().catch((error) => {
+    console.error('❌ Erro durante inicialização:', error);
+    process.exit(1);
+});

package/dist/scripts/init-mobile.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};