Add Playwright e2e tests characterizing the news feed screen

[devin-ai-integration]

Summary

Adds Playwright as the e2e harness (alongside the existing Protractor e2e/) and a suite of characterization tests that lock in the current behavior of the home/news feed (news/1) and header.

All Hacker News API calls (https://node-hnapi.herokuapp.com/{feedType}?page={page}) are intercepted via page.route('**/node-hnapi.herokuapp.com/**', ...) and served from a 30-story fixture, so tests are deterministic and never hit the live API.

What's added

• playwright.config.ts — baseURL: http://localhost:4200, tests in tests/, and a webServer running npm start (ng serve) that waits on 4200.
  • Angular 9 (webpack 4) fails to build on Node 17+, so the config conditionally injects NODE_OPTIONS=--openssl-legacy-provider only when running on Node ≥17 (no-op on the Node 12/13 versions this app targets):

    const nodeMajor = parseInt(process.versions.node.split('.')[0], 10);
    env: nodeMajor >= 17 ? { NODE_OPTIONS: '--openssl-legacy-provider' } : {}

• tests/fixtures/news.json — 30 stories shaped from the Story model + item.component.html fields (id, title, url, domain, points, user, time_ago, comments_count, type). Index 0 = external url story, index 1 = no url (internal /item/:id link), index 2 = job type.
• tests/support/api.ts — helpers: mockFeed, mockFeedError (500 → non-JSON body → service error branch), and mockFeedDeferred (gated response to observe the pending/loading state).
• tests/home-feed.spec.ts & tests/header.spec.ts — the test suite.
• package.json — "test:e2e": "playwright test"; @playwright/test@1.61.1 devDependency.
• .gitignore — Playwright output dirs.

Behavior covered

Home feed: / → /news/1 redirect; app-loader visible + no ol while pending; ol of 30 li.post; external anchor href == story.url vs internal routerLink /item/:id; points/user(/user/:user)/time_ago/comments present for non-job items and absent for job; page-1 pagination (‹ Prev absent, More › → /news/2 with 30 items, absent with <30); error path shows app-error-message "Could not load news stories." and no list.

Header: logo → /news/1; nav new/show/ask/jobs → /newest/1,/show/1,/ask/1,/jobs/1; settings cog opens app-settings.

Notes on characterization choices (assert actual, not idealized, behavior)

• Item points/user/comments are asserted with toBeAttached() rather than toBeVisible(), because the item renders two responsive variants (subtext-palm / subtext-laptop) and CSS hides one per viewport.
• The settings panel is opened by the cog but the open state renders a full-screen .overlay that intercepts the cog; the test therefore closes it via the panel's own × control (.close), which reflects the real UX.

Test plan

npm run test:e2e → 15 passed. Run on Node 20 (@playwright/test requires Node ≥18); the config's webServer builds ng serve with the legacy OpenSSL flag.

Link to Devin session: https://app.devin.ai/sessions/aae8804bb4b648f09216bad43ccaa3ab
Requested by: @lburgers

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring