e-Bank — demo web app for practising automated tests

A small static "internet bank" built with SvelteKit and adapter-static. Everything runs in the browser; sessions live in sessionStorage, mock account data in localStorage. No backend, no real money.

Features

• Username/password login against a hardcoded list of demo accounts
• Overview page with a running balance and a paginated bank statement
• Statement export to PDF (jsPDF) and Excel (SheetJS / xlsx)
• Cards page with a card-style summary and a details table
• Bank messages with read/unread state and a "mark all read" action
• New-payment flow: form → preview → SMS signing (code is shown in a banner)
• Auth-guarded routes with a global header and Log out button

Every interactive element has a stable data-testid attribute so it's easy to target from Playwright, Cypress, Selenium, etc.

Demo accounts

Username	Password
demo	demo123
alice	alice123
bob	bob123

Run locally

npm install
npm run dev      # http://localhost:5173
npm run build    # produces build/ with static HTML+CSS+JS
npm run preview  # serves the built bundle locally

The build output in build/ is the only thing that needs to be hosted — any static host works.

Deploy to GitHub Pages

A workflow is provided in .github/workflows/deploy.yml. To use it:

1. Push the repository to GitHub.
2. In Settings → Pages, set the Source to GitHub Actions.
3. Push to main (or run the workflow manually). The site becomes available at https://<your-user>.github.io/<repo-name>/.

The workflow passes BASE_PATH=/<repo-name> to the build so all asset URLs are prefixed correctly. To build for a custom domain or for the root path, override or omit BASE_PATH.

BASE_PATH=/ebank npm run build   # build with a subpath
npm run build                     # build for the root

Resetting demo data

Open the browser dev tools and run:

Object.keys(localStorage)
  .filter((k) => k.startsWith('ebank.'))
  .forEach((k) => localStorage.removeItem(k));
sessionStorage.clear();
location.reload();

Mock transactions, cards and messages are re-seeded the next time you log in.

Test targeting cheatsheet

A few of the more useful selectors:

Element	Selector
Login form	[data-testid="login-form"]
Login submit	[data-testid="login-submit"]
Statement rows	[data-testid="transaction-row"]
PDF / Excel export buttons	[data-testid="export-pdf"], …excel
New-payment continue	[data-testid="payment-continue"]
Preview confirm	[data-testid="preview-confirm"]
SMS code (visible for tests)	[data-testid="sms-code"]
Sign submit	[data-testid="sign-submit"]
Logout	[data-testid="logout-button"]