# PraxisTable E2E (Playwright) - Column Drag

Este pacote valida gesto real de drag de colunas (pointer) em ambiente browser, reduzindo risco de regressao de drop area/layout que nao aparece em testes unitarios.

## Arquivos

- `projects/praxis-table/test-dev/e2e/column-drag.playwright.spec.ts`
- `projects/praxis-table/test-dev/e2e/column-drag-visual-evidence.playwright.spec.ts`
- `tools/e2e/playwright/praxis-table-column-drag.playwright.config.ts`
- `tools/e2e/playwright/run-praxis-table-column-drag.sh`

## Cobertura do teste

1. Abre `http://127.0.0.1:4003/table-local-data-features-demo` com storage limpo.
2. Valida contrato default: `Reordenar colunas por arraste` inicia habilitado no editor.
3. Valida affordance primario de drag no header (`grab` no idle, `grabbing` durante gesto quando suportado pelo browser).
4. Valida o contrato visual do grip: sem fundo/borda de botao, dimensao discreta e opacidade baixa no estado idle.
5. Valida a discoverability do grip em hover/focus (estado visivel sem ruído visual excessivo).
6. Valida o mesmo contrato na rota `http://127.0.0.1:4003/filter-demo`.
7. Desabilita drag via editor, persiste (`Salvar & Fechar`) e valida que os handles somem no runtime.
8. Valida gesto real: arrastar pelo titulo reordena; arrastar pelo icone visual de drag tambem reordena.
9. Executa o mesmo gesto com `prefers-reduced-motion: reduce`, validando transicoes desativadas e reorder funcional.

## Como executar

1. Suba a aplicacao:
   - `npm start`
2. Em outro terminal:
   - `tools/e2e/playwright/run-praxis-table-column-drag.sh`

Pre-requisito:

- `@playwright/test` instalado no workspace (`npm install -D @playwright/test`).

Variaveis opcionais:

- `PLAYWRIGHT_BASE_URL` (default: `http://127.0.0.1:4003`)
- `PLAYWRIGHT_CHROMIUM_EXECUTABLE` (override do binario Chromium)
- `PLAYWRIGHT_USE_WEB_SERVER=1` (delega start/stop do server ao Playwright usando `tools/e2e/playwright/start-filter-demo-server.sh`)

## Captura de evidencia visual (before/after)

1. BEFORE:
   - `EVIDENCE_OUT_DIR=artifacts/praxis-table/filter-demo-drag-affordance/before node node_modules/playwright/cli.js test --config tools/e2e/playwright/praxis-table-column-drag.playwright.config.ts projects/praxis-table/test-dev/e2e/column-drag-visual-evidence.playwright.spec.ts`
2. AFTER:
   - `EVIDENCE_OUT_DIR=artifacts/praxis-table/filter-demo-drag-affordance/after node node_modules/playwright/cli.js test --config tools/e2e/playwright/praxis-table-column-drag.playwright.config.ts projects/praxis-table/test-dev/e2e/column-drag-visual-evidence.playwright.spec.ts`

Artefatos gerados por run:

- `01-full-page.png`
- `02-component-table.png`
- `03-bug-element-crop.png`
- `04-dom-dump-header-cell.json`
- `05-computed-styles-handle.json`

## Notas enterprise

- O teste usa seletor funcional (settings button + switches + handles) e valida efeito final (ordem de colunas), nao apenas classes CSS.
- O contrato de UX fica coberto em pontos criticos de governanca: default seguro, opt-out no editor, cursor como affordance principal, discoverability do grip e modo de movimento reduzido.
- Em `pointer: coarse`, o grip permanece visivel em baixa opacidade para melhorar discoverability sem voltar ao padrao de botao circular.
- Seletores E2E sao locale-agnostic com `data-testid` estavel (evita flake por traducao/copy).
- O runner tenta usar Chromium do sistema para reduzir dependencia de download de browser no CI.