react
精选
react
React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.
AI 仓库情报摘要
FR-AI / ANALYSIS为什么值得关注
它将自动化爬虫与 AI 驱动的修复建议相结合，提供可视化仪表盘和编程接口，且无需任何密钥即可运行基本规则检测。
适合谁使用
- Web 开发人员和 QA 工程师
- 审计客户网站的独立开发者
- CI/CD 流水线维护人员
- 可访问性和性能审计员
典型使用场景
- 发布前对 web 应用进行自动化 QA
- 对生产站点进行持续回归监控
- 在开发过程中快速检查可访问性和死链接
- 生成带截图的交互式 HTML 报告以供利益相关者审查
项目优势
- 支持三大 AI 提供商（Anthropic、OpenAI、Google），且无需密钥即可使用基础功能
- 为每个检测到的问题截取高亮元素的精确截图
- 同时提供固定规则建议（免费）和 AI 建议（上下文相关，含截图）
- 提供 CLI、可视化 Web UI、编程接口和配置文件，使用方式灵活
使用前须知
- 仅爬取 <a href> 链接，不会填写表单或模拟用户流程（如登录、结账）
- 可访问性检查较为基础，不能替代 axe-core 等完整 WCAG 合规工具
- 无法爬取需要认证的网站
README 快速开始
WebAudit
Crawler automático de QA. Navega sozinho por uma aplicação web, detecta erros e problemas, captura screenshot exata de cada um, e sugere como corrigir — combinando regras fixas com análise de IA (Anthropic, OpenAI ou Gemini, à sua escolha).
O que ele detecta
| Categoria | O que verifica |
|---|---|
| Erros JavaScript | Exceções não tratadas no console (pageerror) |
| Console | console.error / console.warn |
| Rede | Requisições com status 4xx/5xx ou que falham (requestfailed) |
| Imagens quebradas | `` que retornam erro HTTP |
| Links quebrados | Todos os `` da página são checados via HEAD/GET |
| Acessibilidade | Imagem sem alt, input sem label, botão vazio, hierarquia de heading incorreta, página sem h1 |
| Performance | Tempo de carregamento (Navigation Timing API), imagens grandes sem loading="lazy" |
Cada problema vira um screenshot com o elemento destacado em vermelho, e recebe:
- uma sugestão de regra fixa (sempre disponível, sem custo)
- uma sugestão da IA (provedor configurado: Claude, GPT ou Gemini), analisando a descrição técnica e o screenshot, priorizada pelos itens mais críticos
Instalação
npm install
npx playwright install chromium # baixa o navegador usado pelo crawler
Configurando a IA (opcional, nenhum provedor é obrigatório)
A ferramenta suporta três provedores de IA, e você só precisa configurar a chave de um deles:
| Provedor | Variável de ambiente | Cobre |
|---|---|---|
| Anthropic | ANTHROPIC_API_KEY | Claude |
| OpenAI | OPENAI_API_KEY | GPT-4o e o que as pessoas costumam chamar de "ChatGPT" (mesma API/chave) |
GEMINI_API_KEY (ou GOOGLE_API_KEY) | Gemini, incluindo chaves geradas pelo Google AI Studio — é a mesma API por trás (generativelanguage.googleapis.com), o AI Studio é só a interface web onde a chave é criada |
A chave nunca deve ficar dentro de um arquivo .js ou ser commitada no código. Use uma das duas formas abaixo:
Opção A — arquivo .env na raiz do projeto (recomendado):
cp .env.example .env
Edite o .env e descomente apenas a linha do provedor que você vai usar:
GEMINI_API_KEY=sua-chave-aqui
O .env é lido automaticamente ao rodar webaudit e já está no .gitignore — não é commitado por engano.
**Opção B — variável de ambiente no terminal (sem c
相关仓库与替代方案
根据分类、Topic 和编程语言匹配的相似项目。
tandpfun
精选
wardrobe
A GPT‑image powered app that extracts individual garment cutouts from photos, organizes them into a digital wardrobe, and generates modeled outfit previews.
mshumer
精选
Claude-of-Duty
A browser-based first-person shooter built entirely with procedural generation and orchestrated AI agents, featuring 55k lines of Three.js/WebGL2 code and no art assets.