https://github.com/tosheto/playwright-portfolio
Playwright end-to-end testing portfolio project using Page Object Model (POM), helpers, and GitHub Actions CI pipeline.
https://github.com/tosheto/playwright-portfolio
allure-report automation ci-cd continuous-integration github-actions jest nodejs page-object-model playwright playwright-typescript qa-automation qa-engineer reporting software-testing test-automation testing typescript
Last synced: 3 months ago
JSON representation
Playwright end-to-end testing portfolio project using Page Object Model (POM), helpers, and GitHub Actions CI pipeline.
- Host: GitHub
- URL: https://github.com/tosheto/playwright-portfolio
- Owner: tosheto
- License: mit
- Created: 2025-08-23T14:47:44.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-10T13:20:36.000Z (10 months ago)
- Last Synced: 2025-09-10T16:52:25.906Z (10 months ago)
- Topics: allure-report, automation, ci-cd, continuous-integration, github-actions, jest, nodejs, page-object-model, playwright, playwright-typescript, qa-automation, qa-engineer, reporting, software-testing, test-automation, testing, typescript
- Language: TypeScript
- Homepage:
- Size: 124 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎭 Todor Stavrev's Playwright Portfolio Project
[](https://github.com/tosheto/playwright-portfolio/actions/workflows/playwright.yml)
[](https://tosheto.github.io/playwright-portfolio/)
## Connect with me
[](https://www.linkedin.com/in/todor-stavrev-7843105b/)
---
## Live Reports
- **Playwright HTML Report** — steps, logs, screenshots, trace links:
https://tosheto.github.io/playwright-portfolio/playwright-report/index.html
- **Allure Report** — suites, categories, trends & analytics:
https://tosheto.github.io/playwright-portfolio/allure-report/index.html
> Reports are re-generated on every push/PR via GitHub Actions.
---
## Tech stack
- **Playwright + @playwright/test** (TypeScript)
- **POM (Page Object Model)** — `tests/pages/*` encapsulate selectors + actions
- **Helpers/fixtures** — `tests/helpers/*`, `tests/fixtures/*`
- **Reporters** — `html` + `allure-playwright`
- **Artifacts policy** (in `playwright.config.ts`):
`trace: 'on-first-retry'`, `screenshot: 'only-on-failure'`, `video: 'retain-on-failure'`
---
## ⚙️ CI pipeline (GitHub Actions)
- Workflow: .github/workflows/playwright.yml
- On every push/PR it:
1. Installs deps & Playwright browsers
2. Runs the full suite (all projects)
3. Produces one Allure report report and one Playwright HTML
4. Publishes static reports to GitHub Pages:
- /playwright-report/index.html
- /allure-report/index.html
---
## What this project tests
| Area | Spec file | What it verifies | Key assertions / notes |
|---|---|---|---|
| **Accessibility (a11y smoke)** | `tests/specs/a11y.smoke.spec.ts` | Presence of core ARIA landmarks on key pages | `banner`, `navigation`, `main`, `footer` on home/docs |
| **Public API (GET/POST)** | `tests/specs/api.spec.ts` | HTTP status codes and JSON payload shape using `jsonplaceholder` | `GET /posts/1` ⇒ 200 + expected fields; `POST /posts` ⇒ 201 + `id` |
| **Artifacts demo** | `tests/specs/artifacts-demo.spec.ts` | How traces, videos and screenshots are collected on failure | Intentionally triggers artifacts for demo purposes |
| **Docs UI** | `tests/specs/docs.spec.ts` | Navigation and headings in the docs section | Page titles, visible sections, basic smoke checks |
| **Home UI** | `tests/specs/home.spec.ts` | Hero/intro, CTAs and structure | `toHaveTitle`, visible elements, navigation |
| **Navbar** | `tests/specs/navbar.spec.ts` | Header/menu links | Visibility + navigation |
| **Footer** | `tests/specs/footer.spec.ts` | Footer links & copyright | Structure + working links |
| **Search** | `tests/specs/search.spec.ts` | Search input and results | Typing queries, results shown |
| **Graph/visuals** | `tests/specs/graph.spec.ts` | Graph/chart rendering | Expected nodes/elements are visible |
| **Code blocks** | `tests/specs/codeblocks.spec.ts` | Code examples render on key pages | At least one code block per page |
| **Example** | `tests/specs/example.spec.ts` | Minimal smoke: title + navigation to iana.org | Basic selector usage with Playwright |
> All UI specs run against the `baseURL` from `playwright.config.ts` across **Chromium / Firefox / WebKit**.
---
## 🚀 Quick start
```bash
npm i
npm run pw:install
npm test
npm run report
npm test
```
## 🧪 What’s inside
- **UI test specs**: all end-to-end tests live under `tests/specs/*.spec.ts`
- **API tests**: `tests/specs/api.spec.ts` checks GET/POST endpoints and validates JSON responses
- **Artifacts demo**: `tests/specs/artifacts-demo.spec.ts` is designed to fail on purpose, so you can see how Playwright captures:
- trace files
- screenshots
- videos
- **Global settings**: retries, trace/screenshot/video policies, and reporters are all configured in `playwright.config.ts`
## 📦 Artifacts & debugging
- HTML report: step-by-step log, attachments, screenshots.
- Trace viewer: open from the HTML report → timeline, console, network.
- Video: attached on test failure.
- Allure: suites/categories view + trend charts.
-
## 🧑💻 Best practices
- **Role-based selectors** for stability (`getByRole`, `getByLabel`, etc.)
- **Page Object Model (POM)** for reusable navigation/actions (`tests/pages/*`)
- **Artifacts on failure** — trace, screenshot, video available in HTML report