Testing

This document outlines the testing architecture for the vania-novikau.me project, which primarily relies on Playwright for end-to-end (E2E) testing.

Local Testing

To run tests locally, ensure you have dependencies installed in the tests/ directory:

npm install
npx playwright install --with-deps

Running Tests

Run all tests:

npx playwright test

Run a specific test file:

npx playwright test tests/post_tabs_unregistered_user.spec.ts

Run in debug mode (opens inspector):

npx playwright test --debug

Generating Tests (Codegen)

Playwright includes a tool that records your interactions and generates test code. Ensure you have run npx playwright install before using this to download the required browser binaries.

Basic codegen (uses Playwright's default internal browser):

npx playwright codegen

Use your machine's actual Google Chrome:

npx playwright codegen --channel=chrome

To run it at a standard Full HD 1080p resolution (1920x1080), pass the width and height separated by a comma:

npx playwright codegen --viewport-size=1920,1080

Combining options to open a specific website at 1080p with your actual Chrome browser:

npx playwright codegen --viewport-size=1920,1080 --channel=chrome https://vania-novikau.me

GitHub Actions Integration (CI/CD)

Tests are executed in a remote environment using GitHub Actions.

Dockerized Environment

To speed up execution and ensure consistency, we use a custom Docker image:

• Image: ghcr.io/vanadiuz/vania-novikau.me/test-env:latest
• Build Workflow: .github/workflows/build-test-image.yml (Triggers on changes to package.json or .github/docker/Dockerfile.test)

This image pre-installs:

• Node.js
• Playwright Browsers (Chromium, Firefox, WebKit)
• Project dependencies (node_modules)

Manual Trigger

You can trigger tests manually from the GitHub UI or CLI.

Using GitHub CLI (gh):

# Must have GITHUB_TOKEN in .env
export $(grep -v '^#' .env | xargs) && gh workflow run playwright.yml -f test_file=tests/post_tabs_unregistered_user.spec.ts

Using GitHub UI:

1. Go to Actions > Playwright Tests.
2. Click Run workflow.
3. Enter the path to the test file (default runs all tests).

Test Cases

Unregistered User Flow

• File: tests/post_tabs_unregistered_user.spec.ts
• Scenario:
  1. Open parallel-text post.
  2. Scroll to content.
  3. Verify sticky tabs appear.
  4. Click L0 tab.
  5. Expect: Login Popup appears (blocking access).

Registered User Flow

• File: tests/plugin-flow-live.spec.ts (Renaming/Refactoring planned)
• Scenario:
  1. Login.
  2. Select text.
  3. Verify "Ask AI" button appears.
  4. Open chat.

Dynamic Style Validations (L0 & L1)

• Files: tests/post_l0_style.spec.ts and tests/post_l1_style.spec.ts
• Scenario:
  1. Login as a registered user.
  2. Navigate to Kant parallel texts.
  3. Assert comprehensive computed CSS values (backgrounds, fonts, computed rems to px) across English and German variants.
  4. Extract pseudo-element values via DOM .evaluate() to assert structural borders.
• Design Paradigm: Tests are deliberately dynamically-bound to UI properties (e.g. await page.locator('#tab-l0 .pac-horizontal-tab-link').first().getAttribute('data-post-id')) rather than hardcoded to specific WordPress Post IDs. This allows the suite to adapt flexibly to varying staging environments without manual maintenance.

Known Limitations & Troubleshooting

• Local Execution Errors (Root/WSL): Attempting to run WebKit or Firefox instances locally as a root user (especially in WSL context) may result in execution timeouts or $XDG_RUNTIME_DIR failures. To bypass this for immediate desktop checking, pass --project=chromium. Otherwise, use gh workflow run to execute remotely via the CI environment.