ilia/sdetProfile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
sdetProfile/IDEAS.md
Builder 7564148c3c Add README, IDEAS, and .gitignore
2026-05-11 00:25:09 +00:00

7.3 KiB
Raw Blame History

IDEAS — portfolio.spec.ts roadmap

Future enhancements, ranked by payoff ÷ effort. Quick wins on top.

Quick wins (an evening or less)

1. Add a deliberate "failure" or "skipped" test

Set one test (e.g. should accept inbound contact) to status skipped with an amber ⊘ icon, or have a should match expected response time test that fails with a stack trace. Adds visual variety + shows you understand real test output.

  • Why: A test suite that's 100% green looks fake. Mixed outcomes feel authentic and let you show error-rendering chops.
  • Where: data.js → add status: 'skipped' | 'failed' field on tests; extend statusIcon() / statusClass() in app.js.

2. Workers indicator (--workers=4)

Add a dropdown next to --headed that picks 1, 2, or 4 workers. Run-all then runs N tests in parallel visually, with N progress bars filling concurrently.

  • Why: Shows off parallelization (your daily reality), looks cool.
  • Where: app.js → rewrite runAll() to pull from a queue with Promise.all of N workers.

3. Keyboard shortcuts overlay

  • R runs all, Esc stops, T toggles theme, / focuses grep, 1–9 runs that test, ? opens a help overlay.
  • Why: Power-user keybindings feel native to VS Code / terminal users.
  • Where: app.js → add document.addEventListener('keydown', ...) near init().

4. Persist filter + tab state in URL

Add ?grep=@playwright&tab=trace so links into specific views work. Mirror to / from location.hash.

  • Why: Shareable deep links to "what I want a recruiter to see."
  • Where: app.js → wrap applyFilter and tab clicks to call history.replaceState.

5. Footer "playback speed" slider

1×, 2×, 5×, 10× — multiply the duration of every test. Pairs well with the --headed toggle.

  • Where: app.js → make headed() return a numeric multiplier, not a boolean.

6. Real Playwright HTML report download button

A "View report" button that bundles the current run state into an actual playwright-report/index.html-style page and downloads it. Bonus points: include screenshots of the current page.

Medium lift (a weekend)

7. Trace tab drill-down

Click a bar on the career timeline → scroll the Report tab to that company and highlight it. Add a hover tooltip with role + bullet count + key tech.

  • Where: app.js → bind click handlers in renderTrace(), animate scrollIntoView.

8. Network tab

A new tab modeled after Playwright's network panel. Each project entry becomes a fake XHR — GET git.levkin.ca/api/repos/playwright-mcp 200 142ms — clicking expands request/response detail. Same visual language as Source.

  • Why: Plays directly into your "I see networks every day" identity.

9. Pinned-repo / activity feed

On Projects, pull live data from your Gitea (git.levkin.ca) or GitHub: latest commit, last build status, star count. Render with the same green-check / red-x vocabulary.

  • Approach: small backend (Cloudflare Workers / Vercel function) that proxies a couple of API calls and caches for 5–10 minutes.

10. Real resume PDF generation

The current download resume.pdf opens a print-styled HTML page. Replace with a true PDF generated server-side (Puppeteer) or client-side (pdf-lib, jsPDF). Multi-page, properly hyphenated, with embedded fonts.

11. Search-runner: open-command style

Ctrl+P opens a command palette with fuzzy matching across test names, sections, and tags — VS Code-style.

12. Code-coverage strip

A small bar at the top of the report saying coverage: 9 / 9 tests · 100%. When tests are filtered out, it shows the current selection's coverage. Tiny detail, big SDET energy.

13. Custom domain on iliadobkin.com

  • Buy / point domain → static host (S3 + CloudFront, or your Proxmox box behind Caddy)
  • Set up Caddy site block with auto-TLS
  • Add og:image (a screenshot of the runner) and og:title for nice link previews
  • Plumb a tiny analytics pixel (Plausible or self-hosted Umami) — bonus: render a private /admin route that shows live visitor data in a Console-tab style

14. Dark+ light high-contrast variant

Third theme — high-contrast accessible mode (WCAG AAA). Toggle cycles dark → light → high-contrast. Reinforces your AODA/WCAG expertise.

Ambitious experiments (a project on its own)

15. Real Playwright tests of the portfolio

Ship a tests/ directory with actual Playwright specs that exercise the site (page.click('#run-all'), asserts that 9 tests pass). Include the report in CI. The site that looks like a Playwright report is itself tested by Playwright. Self-referential, beautiful.

16. MCP integration showcase

Make a tiny live demo of your Playwright MCP server — embed a Cursor-style sidebar showing fake assistant chat where an LLM "writes a test" against the site and you watch the test appear and run. Pure flex.

17. Live "watch mode"

Add a fake file-tree on the left (portfolio.spec.ts, fixtures/, playwright.config.ts). Clicking a file opens it in a code-editor view (Monaco editor, full syntax highlighting). Editing reruns the affected tests. Becomes more "interactive IDE" than portfolio.

18. Multi-spec navigation

Split content across multiple "spec files":

  • portfolio.spec.ts — about, experience, contact
  • projects.spec.ts — homelab, MCP server, local AI
  • skills.spec.ts — tag-driven
  • playground.spec.ts — interactive demos, mini-games, fun stuff

Each gets its own tab in the editor strip at the top.

19. Tag-driven "narrative mode"

Click a tag and the site replays as a story: it runs only tests with that tag, in a deliberate order, with auto-scroll between sections. Great for recruiters with 30 seconds. "Show me the iGaming story" → runs experience@iGaming, skills@playwright, metrics tests in sequence.

20. Recording mode (literal demo videos)

Use the MediaRecorder API to capture a 20-second video of a Run All cycle and offer it as a download — recruiters can embed in Slack. Closing the loop on "you're a tester, prove the site works" with video evidence.

Content / polish backlog

  • Add 1–2 GIFs or screenshots in this README
  • Generate og:image social card (screenshot the dark hero)
  • Write a short blog post on iliadobkin.com/blog titled "I built my portfolio as a Playwright test runner" — pair with this repo
  • Add a "References" test: collapsed quotes from past managers / colleagues, each rendered as a test assertion (expect(reference.satisfaction).toBeGreaterThan(threshold))
  • Audit color contrast in light theme (WCAG AA minimum)
  • Add ARIA labels to the run buttons (aria-label="Run test: should introduce Ilia Dobkin")
  • Test on iOS Safari + Firefox (currently QA'd in Chromium)
  • Add a "print" stylesheet so the whole Report tab prints clean

Notes to self

Things to keep invariant as the project grows:

  1. No build step. The day this needs npm install is the day it loses its character.
  2. data.js stays human-editable. No code-gen, no schema validation, no DSL. Just JS objects.
  3. Vanilla, framework-free. If a feature genuinely needs React or a charting lib, weigh the bundle cost — the whole site is ~30 KB unminified.
  4. Every interaction should feel like a real test runner. When in doubt, ask: "what would Playwright / Vitest UI do here?"