|
| 1 | +# E2E Test Setup |
| 2 | + |
| 3 | +## Commands |
| 4 | + |
| 5 | +| Command | Purpose | |
| 6 | +|---|---| |
| 7 | +| `npm test` | Run all tests headlessly (fast, CI-friendly) | |
| 8 | +| `npm run test:ui` | Playwright UI mode — step through tests interactively | |
| 9 | +| `npm run test:video` | Run all tests with video recording + 600 ms slowMo per action | |
| 10 | + |
| 11 | +Videos are saved to `test-results-video/<test-name>/video.webm` after `test:video` finishes. |
| 12 | + |
| 13 | +## How it works |
| 14 | + |
| 15 | +**Bee node:** Tests run against a proxied Bee node whose URL is stored in `BEE_NODE_URL`. Copy `.env.example` to `.env` and set the value before running tests. The all-zeros postage stamp (default) is accepted by that node — no other configuration needed. |
| 16 | + |
| 17 | +**CORS workaround:** The browser can't call the Bee node directly because the proxy doesn't allow the `swarm-collection` header. `vite.config.ts` proxies `/bzz`, `/bytes`, `/chunks` through the Vite dev server when `BEE_PROXY_TARGET` is set. The Playwright config sets `BEE_PROXY_TARGET=$BEE_NODE_URL` and `VITE_BEE_HOSTS=http://localhost:3030` so the app sends same-origin requests that Vite then forwards to the real node. |
| 18 | + |
| 19 | +**Global setup (`e2e/global-setup.ts`):** Runs once before any tests. Uploads five files through the UI and writes each resulting hash to a `.test-hash-<name>` file. Tests that need a known-good hash read from those files. |
| 20 | + |
| 21 | +| File written | Content uploaded | |
| 22 | +|---|---| |
| 23 | +| `.test-hash` | Plain text (used by basic upload/access tests) | |
| 24 | +| `.test-hash-image` | `test-data/image.png` | |
| 25 | +| `.test-hash-video` | `test-data/video.webm` | |
| 26 | +| `.test-hash-website` | `test-data/website/` directory | |
| 27 | +| `.test-hash-folder` | `test-data/folder/` directory | |
| 28 | + |
| 29 | +## Test files |
| 30 | + |
| 31 | +| File | What it covers | |
| 32 | +|---|---| |
| 33 | +| `navigation.spec.ts` | Landing page buttons; navigation to /share and /access | |
| 34 | +| `upload.spec.ts` | Terms popup, file selection, upload flow, hash display, copy button | |
| 35 | +| `access.spec.ts` | Hash input, find button, invalid hash tooltip, not-found page | |
| 36 | +| `upload-types.spec.ts` | AssetPreview on the upload preview screen for image, video, website, folder | |
| 37 | +| `access-types.spec.ts` | AssetPreview on the access/download page for the same four types | |
| 38 | + |
| 39 | +## Test data (`e2e/test-data/`) |
| 40 | + |
| 41 | +| File | MIME type | Notes | |
| 42 | +|---|---|---| |
| 43 | +| `image.png` | `image/png` | 1×1 pixel PNG generated by Python | |
| 44 | +| `video.webm` | `video/webm; codecs=vp8` | Minimal 41-byte EBML/WebM header. **Must use the full codec string** — plain `video/webm` returns `'maybe'` from `canPlayType` in Chromium headless shell, which `isSupportedVideoType()` treats as unsupported. VP8 returns `'probably'`. | |
| 45 | +| `website/index.html` + `website/style.css` | `text/html` / `text/css` | Two files under a common `website/` prefix; `detectIndexHtml` finds `index.html` and sets `isWebsite = true` | |
| 46 | +| `folder/document.txt` + `folder/readme.txt` | `text/plain` | Two files under `folder/`; no `index.html` so `type = 'folder'`, `count = 2` | |
| 47 | + |
| 48 | +Website and folder uploads use the `folder-input` (the "add a folder or website" button), which has the `webkitdirectory` attribute. Playwright requires a real directory path for such inputs — file-object arrays are rejected. |
| 49 | + |
| 50 | +## `data-testid` selectors added to the app |
| 51 | + |
| 52 | +| testid | Component | Element | |
| 53 | +|---|---|---| |
| 54 | +| `share-button` | `LandingPage` | Share navigation button | |
| 55 | +| `access-button` | `LandingPage` | Access navigation button | |
| 56 | +| `agree-button` | `TermsAndConditionsPopup` | "I agree" button | |
| 57 | +| `file-input` | `AddFile` | Hidden `<input type="file">` for single/multiple files | |
| 58 | +| `folder-input` | `AddFile` | Hidden `<input type="file" webkitdirectory>` for directories | |
| 59 | +| `upload-button` | `Upload` (preview step) | Upload submit button | |
| 60 | +| `swarm-hash` | `Share` (result step) | Typography containing the Swarm hash string | |
| 61 | +| `copy-button` | `Share` (result step) | Copy-to-clipboard button | |
| 62 | +| `hash-input` | `Access` | Hash search text input | |
| 63 | +| `find-button` | `Access` | Find/navigate button | |
| 64 | +| `download-button` | `AccessHash` | Download button (both metadata and chunk-only paths) | |
0 commit comments