Skip to content

lint adjustments #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tiagonline wants to merge 2 commits into
base: master
Choose a base branch
from
Open

lint adjustments #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d723df5
lint adjustments
tsilva3 Feb 13, 2026
cd2f57f
report adjustments
tsilva3 Feb 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions .github/workflows/workflow-pipeline.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ name: workflow-pipeline

on:
push:
branches: [ main, master ]
branches: [main, master]
pull_request:
branches: [ main, master ]
branches: [main, master]
workflow_dispatch:

# Permissões necessárias para o deploy no GitHub Pages via Token
Expand All @@ -25,10 +25,10 @@ jobs:
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 18, cache: 'npm' }
with: { node-version: 18, cache: "npm" }
- run: npm ci
- run: npx playwright install --with-deps

- name: Run API Tests
run: npm run test:api
env:
Expand All @@ -48,22 +48,22 @@ jobs:
steps:
- uses: actions/checkout@v4
- uses: actions/setup-java@v3
with: { distribution: 'temurin', java-version: '17' }
with: { distribution: "temurin", java-version: "17" }
- uses: actions/setup-node@v4
with: { node-version: 18, cache: 'npm' }
with: { node-version: 18, cache: "npm" }
- run: npm ci
- run: npx playwright install --with-deps chromium

- name: Run E2E Tests
run: npm run test:e2e
env:
# 🤖 INJEÇÃO DA IA AQUI!
AZURE_AI_TOKEN: ${{ secrets.AZURE_AI_TOKEN }}
AZURE_AI_TOKEN: ${{ secrets.AZURE_AI_TOKEN }}
BASE_URL: ${{ secrets.BASE_URL }}
SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
SAUCE_PASSWORD: ${{ secrets.SAUCE_PASSWORD }}
CI: "true" # Garante modo Headless

# Upload do JSON para o Allure
- uses: actions/upload-artifact@v4
if: always()
Expand All @@ -87,15 +87,15 @@ jobs:
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 18, cache: 'npm' }
with: { node-version: 18, cache: "npm" }
- run: npm ci
- run: npx playwright install --with-deps

- name: Run Mobile Tests
run: npx playwright test tests/mobile --project='Mobile'
env:
BASE_URL: ${{ secrets.BASE_URL }}

- uses: actions/upload-artifact@v4
if: always()
with:
Expand All @@ -114,12 +114,12 @@ jobs:
- uses: actions/setup-node@v4
with: { node-version: 18 }
- run: npm ci

- name: Run Visual Tests
run: npx playwright test --project='Visual Regression'
env:
BASE_URL: ${{ secrets.BASE_URL }}

- uses: actions/upload-artifact@v4
if: always()
with:
Expand All @@ -137,7 +137,7 @@ jobs:
with: { node-version: 18 }
- run: npm ci
- uses: grafana/setup-k6-action@v1

- name: Run Load Tests
run: |
docker compose -f tests/k6-load/docker-compose.yml up -d influxdb grafana
Expand Down Expand Up @@ -172,7 +172,7 @@ jobs:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}

steps:
- uses: actions/checkout@v4

Expand All @@ -189,7 +189,7 @@ jobs:
cp artifacts/allure-e2e/* allure-results/ || true
cp artifacts/allure-mobile/* allure-results/ || true
cp artifacts/allure-visual/* allure-results/ || true

# Copia as configs de ambiente para o Allure
cp environment.properties allure-results/ || true
cp categories.json allure-results/ || true
Expand All @@ -206,14 +206,14 @@ jobs:
- name: Organize Reports for Web
run: |
mkdir -p public

# --- A. Allure na Raiz ---
cp -r allure-report/* public/

# --- B. K6 na subpasta /k6 ---
mkdir -p public/k6
cp -r artifacts/k6-report/* public/k6/

# --- C. Cucumber na subpasta /cucumber ---
mkdir -p public/cucumber
# Renomeia para index.html para abrir direto no link
Expand All @@ -235,7 +235,7 @@ jobs:
run: |
# URL base do GitHub Pages
PAGES_URL="https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}"

echo "### 📊 Central de Relatórios Unificada" >> $GITHUB_STEP_SUMMARY
echo "" >> $GITHUB_STEP_SUMMARY
echo "| Tipo de Teste | Status | Link de Acesso |" >> $GITHUB_STEP_SUMMARY
Expand All @@ -244,4 +244,4 @@ jobs:
echo "| 🥒 **E2E (Detalhado)** | ✅ Gerado | [**Ver Cucumber BDD**]($PAGES_URL/cucumber/) |" >> $GITHUB_STEP_SUMMARY
echo "| 🚀 **Performance (K6)** | ✅ Gerado | [**Ver K6 Metrics**]($PAGES_URL/k6/) |" >> $GITHUB_STEP_SUMMARY
echo "" >> $GITHUB_STEP_SUMMARY
echo "> *Nota: Se a página der 404 nos primeiros segundos, aguarde o deploy finalizar.*" >> $GITHUB_STEP_SUMMARY
echo "> *Nota: Se a página der 404 nos primeiros segundos, aguarde o deploy finalizar.*" >> $GITHUB_STEP_SUMMARY
129 changes: 69 additions & 60 deletions README.MD
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,16 @@
O projeto utiliza uma arquitetura modular baseada em **TypeScript**, focada em escalabilidade e facilidade de manutenção.

### 1.1 Tecnologias e Versões
* **Linguagem:** TypeScript / JavaScript (Node.js v18+)
* **E2E & Mobile:** [Playwright v1.40+](https://playwright.dev/)
* **BDD:** [CucumberJS v10+](https://github.com/cucumber/cucumber-js)
* **Performance:** [K6](https://k6.io/) com InfluxDB e Grafana via Docker.
* **CI/CD:** GitHub Actions.
* **Auto Healing & RCA:** Mecanismo de autocura e Análise de Causa Raiz assistido por IA, integrando o framework ao **GitHub Models (GPT-4o)** para garantir a resiliência de seletores e diagnósticos automáticos de falhas.

- **Linguagem:** TypeScript / JavaScript (Node.js v18+)
- **E2E & Mobile:** [Playwright v1.40+](https://playwright.dev/)
- **BDD:** [CucumberJS v10+](https://github.com/cucumber/cucumber-js)
- **Performance:** [K6](https://k6.io/) com InfluxDB e Grafana via Docker.
- **CI/CD:** GitHub Actions.
- **Auto Healing & RCA:** Mecanismo de autocura e Análise de Causa Raiz assistido por IA, integrando o framework ao **GitHub Models (GPT-4o)** para garantir a resiliência de seletores e diagnósticos automáticos de falhas.

### 1.2 Estrutura de Pastas

```text
kit-qa-fullstack/
├── .github/workflows/ # Pipeline de CI/CD (GitHub Actions com Jobs Paralelos)
Expand Down Expand Up @@ -87,23 +89,26 @@ kit-qa-fullstack/

Para executar este projeto localmente, necessitas de:

1. **Node.js** (v18 ou superior)
1. **Node.js** (v18 ou superior)
2. **Docker** (para os testes de carga com monitorização)

#### **Dica**: Para rodar os testes de carga sem problemas de permissão no Linux, garanta que seu usuário esteja no grupo do docker:
```bash
#### **Dica**: Para rodar os testes de carga sem problemas de permissão no Linux, garanta que seu usuário esteja no grupo do docker:

```bash
sudo usermod -aG docker $USER && newgrp docker
```

### 2.1 Instalação

#### 2.1.1 Clonar o repositório:

```bash
git clone https://github.com/tiagonline/kit-qa-fullstack.git
cd kit-qa-fullstack
```

#### 2.1.2 Instalar dependências:

```bash
npm install
npx playwright install --with-deps
Expand Down Expand Up @@ -166,17 +171,17 @@ Este comando executa os testes comparando a tela atual com os "baselines" aprova

## 4. Como Executar os Testes

| Cenário | Comando |
|-------------------------|-----------------------------|
| Executar Tudo (CI) | `npm run test:all` |
| Testes de API | `npm run test:api` |
| Testes Web (BDD) | `npm run test:e2e` |
| Testes Mobile | `npm run test:mobile` |
| Teste de Performance | `npm run k6:run` |
| Modo Playwright | `npx playwright test --ui` |
| Teste de Acessibilidade | `npm run test:a11y` |
| Regressão Visual | `npm run test:visual` |
| Atualiza a base de imgs | `npm run test:visual:update`|
| Cenário | Comando |
| ----------------------- | ---------------------------- |
| Executar Tudo (CI) | `npm run test:all` |
| Testes de API | `npm run test:api` |
| Testes Web (BDD) | `npm run test:e2e` |
| Testes Mobile | `npm run test:mobile` |
| Teste de Performance | `npm run k6:run` |
| Modo Playwright | `npx playwright test --ui` |
| Teste de Acessibilidade | `npm run test:a11y` |
| Regressão Visual | `npm run test:visual` |
| Atualiza a base de imgs | `npm run test:visual:update` |

---

Expand All @@ -190,32 +195,31 @@ O projeto está configurado para gerar evidências detalhadas tanto em ambiente

Após rodar os testes na sua máquina, os relatórios podem ser encontrados nos seguintes locais:

- **API & Mobile (Playwright):**
- Local: `playwright-report/index.html`
- **API & Mobile (Playwright):**
- Local: `playwright-report/index.html`
- Para abrir: `npx playwright show-report`

- **E2E (Cucumber):**
- **E2E (Cucumber):**
- Local: `cucumber-report.html` (abrir diretamente no navegador)

- **Performance (k6):**
- **Performance (k6):**
- Local: `k6-summary.json` (resumo técnico) ou veja a execução em tempo real no [Grafana](http://localhost:3000/d/fullstack-load-test) enquanto estiver executando. Configurei para abrir o dash automaticamente quando for executado.

---

### 5.2 Execução no CI/CD (GitHub Actions)

Devido a execução dos **Jobs Paralelos**, o GitHub Actions gera arquivos separados para cada especialidade.
Devido a execução dos **Jobs Paralelos**, o GitHub Actions gera arquivos separados para cada especialidade.
Para visualizá-los:

1. Abra à aba **Actions** no repositório.
2. Clique no **workflow** executado (ex: `workflow-pipeline`).
1. Abra à aba **Actions** no repositório.
2. Clique no **workflow** executado (ex: `workflow-pipeline`).
3. No final da página, na seção **Artifacts**, encontrará os seguintes pacotes:
- **api-report:** Relatórios de status e payloads da API.
- **cucumber-report:** Fluxos BDD com as regras de negócio.
- **mobile-report:** Evidências de responsividade mobile.
- **k6-report:** Métricas de performance e carga.

- **api-report:** Relatórios de status e payloads da API.
- **cucumber-report:** Fluxos BDD com as regras de negócio.
- **mobile-report:** Evidências de responsividade mobile.
- **k6-report:** Métricas de performance e carga.

> **Nota:** Todos os relatórios HTML podem ser visualizados descompactando o `.zip` e abrindo o `.html` pelo navegador.

---
Expand All @@ -226,21 +230,21 @@ O teste de carga foi executado utilizando **k6** e conteinerização com **Docke

### 6.1 Resumo da Execução

| Métrica | Resultado Obtido | Status |
|--------------------------|------------------|------------------------------|
| Usuários Simultâneos | 500 VUs | ✅ Sucesso |
| Taxa de Sucesso (Checks) | 99.79% | ✅ Sucesso |
| Tempo de Resposta (P95) | 990ms | ✅ Dentro do Limite (< 2s) |
| Requisições Falhas | 0.41% | ✅ Dentro do Limite (< 5%) |
| Total de Requisições | 207.186 | ⚡ Alta Vazão |
| Métrica | Resultado Obtido | Status |
| ------------------------ | ---------------- | -------------------------- |
| Usuários Simultâneos | 500 VUs | ✅ Sucesso |
| Taxa de Sucesso (Checks) | 99.79% | ✅ Sucesso |
| Tempo de Resposta (P95) | 990ms | ✅ Dentro do Limite (< 2s) |
| Requisições Falhas | 0.41% | ✅ Dentro do Limite (< 5%) |
| Total de Requisições | 207.186 | ⚡ Alta Vazão |

### 6.2 Infraestrutura de Monitoramento

A solução foi implementada com uma stack de observabilidade completa:

- **k6:** Motor de execução dos testes.
- **InfluxDB:** Armazenamento de métricas em tempo real.
- **Grafana:** Dashboard para visualização de tendências e gargalos.
- **k6:** Motor de execução dos testes.
- **InfluxDB:** Armazenamento de métricas em tempo real.
- **Grafana:** Dashboard para visualização de tendências e gargalos.

### 6.3 Insights Técnicos e Identificação de Gargalos

Expand All @@ -258,9 +262,9 @@ A solução foi implementada com uma stack de observabilidade completa:

Este projeto foi desenvolvido seguindo padrões de mercado para **produção**:

- **Page Object Model (POM):** Separação clara entre lógica de teste e seletores.
- **Continuous Integration:** Pipeline automatizado que valida cada alteração.
- **Observabilidade:** Monitorização de performance com dashboards profissionais com **Grafana**.
- **Page Object Model (POM):** Separação clara entre lógica de teste e seletores.
- **Continuous Integration:** Pipeline automatizado que valida cada alteração.
- **Observabilidade:** Monitorização de performance com dashboards profissionais com **Grafana**.
- **Segurança:** Uso de **Secrets** para gestão de tokens e dados sensíveis.

### 7.1 Padrões de Projeto & Arquitetura
Expand Down Expand Up @@ -330,37 +334,42 @@ Como iniciativa de melhoria contínua e foco na experiência de **todos** os usu
A solução utiliza a engine do **axe-core** integrada nativamente aos testes do Playwright, permitindo "auditorias" rápidas durante a execução da pipeline.

### 10.1 Cobertura da Automação

O teste varre o DOM da aplicação em busca de violações das diretrizes internacionais **WCAG 2.1 (Web Content Accessibility Guidelines)**, cobrindo:

* ✅ Contraste de cores (Nível AA).
* ✅ Hierarquia de cabeçalhos.
* ✅ Rótulos de formulários (Labels).
* ✅ Textos alternativos em imagens (Alt text).
* ✅ Semântica ARIA.
- ✅ Contraste de cores (Nível AA).
- ✅ Hierarquia de cabeçalhos.
- ✅ Rótulos de formulários (Labels).
- ✅ Textos alternativos em imagens (Alt text).
- ✅ Semântica ARIA.

### 10.2 Benefícios para o Projeto
* **Inclusão:** Garante que o produto seja utilizável por pessoas com deficiência.
* **SEO:** Melhorias de acessibilidade impactam diretamente o rankeamento em motores de busca.
* **Prevenção:** Detecta cerca de 50% dos erros mais comuns de acessibilidade antes de chegar em produção.

- **Inclusão:** Garante que o produto seja utilizável por pessoas com deficiência.
- **SEO:** Melhorias de acessibilidade impactam diretamente o rankeamento em motores de busca.
- **Prevenção:** Detecta cerca de 50% dos erros mais comuns de acessibilidade antes de chegar em produção.

## 11. IA com Auto Healing

* **Observabilidade Assistida:** Eu não uso a IA para escrever testes, mas para explicar falhas, reduzindo o tempo de depuração de horas para segundos.
- **Observabilidade Assistida:** Eu não uso a IA para escrever testes, mas para explicar falhas, reduzindo o tempo de depuração de horas para segundos.

* **Abstração BasePage:** Eu centralizei a inteligência em uma classe pai, garantindo que o código das páginas permaneça limpo e reutilizável.
- **Abstração BasePage:** Eu centralizei a inteligência em uma classe pai, garantindo que o código das páginas permaneça limpo e reutilizável.

* **Segurança de Tokens:** Eu validei que o acesso é feito via PAT Classic com escopos mínimos, injetado via segredos do GitHub Actions, eliminando qualquer risco de vazamento de credenciais.
- **Segurança de Tokens:** Eu validei que o acesso é feito via PAT Classic com escopos mínimos, injetado via segredos do GitHub Actions, eliminando qualquer risco de vazamento de credenciais.

* Implementei uma camada de Observabilidade Inteligente que utiliza o GitHub Models (GPT-4o) para realizar Análise de Causa Raiz (RCA) automática em caso de falhas. Para garantir a resiliência do pipeline em ambientes corporativos/VPNs **sem desativar a validação de certificados SSL**, ajustei a cadeia de certificados/proxy corporativo e utilizei um agente HTTPS configurado corretamente, evitando o uso de `NODE_TLS_REJECT_UNAUTHORIZED = '0'` ou qualquer forma de *bypass* de certificados.
- Implementei uma camada de Observabilidade Inteligente que utiliza o GitHub Models (GPT-4o) para realizar Análise de Causa Raiz (RCA) automática em caso de falhas. Para garantir a resiliência do pipeline em ambientes corporativos/VPNs **sem desativar a validação de certificados SSL**, ajustei a cadeia de certificados/proxy corporativo e utilizei um agente HTTPS configurado corretamente, evitando o uso de `NODE_TLS_REJECT_UNAUTHORIZED = '0'` ou qualquer forma de _bypass_ de certificados.

### 11.1 IA com Auto Healing & RCA (Diferencial Técnico)
* Este framework implementa o conceito de Observabilidade Inteligente, utilizando a API do GitHub Models para reduzir drasticamente o custo de manutenção de testes.

- Este framework implementa o conceito de Observabilidade Inteligente, utilizando a API do GitHub Models para reduzir drasticamente o custo de manutenção de testes.

### 11.2 Auto Healing (Autocura)
* Através do método smartClick na BasePages.ts, o framework detecta quando um seletor falhou devido a mudanças de UI. Em tempo real, o DOM é enviado para o GPT-4o, que sugere o novo seletor funcional e permite que o teste continue sem intervenção humana manual inmediata.

- Através do método smartClick na BasePages.ts, o framework detecta quando um seletor falhou devido a mudanças de UI. Em tempo real, o DOM é enviado para o GPT-4o, que sugere o novo seletor funcional e permite que o teste continue sem intervenção humana manual inmediata.

## 11.3 Análise de Causa Raiz (RCA) Automática
* Sempre que um cenário falha no CI/CD, o sistema dispara uma análise de RCA. A IA interpreta o erro técnico e anexa uma explicação legível ao relatório (ex: "O teste falhou porque o botão 'Checkout' foi sobreposto por um banner publicitário"), poupando horas de depuração.

- Sempre que um cenário falha no CI/CD, o sistema dispara uma análise de RCA. A IA interpreta o erro técnico e anexa uma explicação legível ao relatório (ex: "O teste falhou porque o botão 'Checkout' foi sobreposto por um banner publicitário"), poupando horas de depuração.

---

Expand Down
Loading
Loading