Module: Validation/VisualRegression

INTELLIGENCE OPERATIVE PERSPECTIVE

This module provides end-to-end visual validation of generated news articles using Playwright browser automation. In an intelligence context, visual consistency testing ensures that political news narratives are presented uniformly across all supported languages and device types - critical for avoiding perception of bias or message distortion in multilingual intelligence dissemination.

OPERATIONAL ARCHITECTURE: The visual validator captures screenshots across three viewport configurations:

  • Mobile (375x667): Primary news consumption platform in Nordic markets
  • Tablet (768x1024): Secondary device for analytical reading
  • Desktop (1920x1080): Editorial review and long-form analysis

VALIDATION CAPABILITIES:

  1. Screenshot Capture: Evidence generation for PR reviews and post-publication audits
  2. Accessibility Validation: WCAG 2.1 AA compliance for multilingual content
  3. RTL Layout Testing: Arabic/Hebrew layout integrity for international editions
  4. Visual Regression: Detects unintended layout changes that could affect message clarity
  5. Text Rendering: Verifies typography integrity across 14 supported languages

INTELLIGENCE APPLICATIONS:

  • Ensures consistent political messaging across language editions
  • Detects accidental markup corruption that could alter article meaning
  • Provides visual evidence of article publication state
  • Validates accessibility for diverse reader populations
  • Supports quality gates before publication

SECURITY & ACCESSIBILITY:

  • Headless Chromium eliminates dependency on display servers
  • Accessibility tree validation ensures semantic HTML structure
  • RTL validation prevents layout-based distortions in Arabic/Hebrew editions
  • Screenshot archives support compliance auditing and incident review

MULTILINGUAL CONSIDERATIONS:

  • Swedish (SV): Baseline language, LTR layout
  • Nordic (EN, DA, NO, FI): LTR layouts, similar typography requirements
  • European (DE, FR, ES, NL): LTR, varying character widths
  • Middle Eastern (AR, HE): RTL layouts, special character handling
  • Asian (JA, KO, ZH): Vertical text considerations, CJK typography

OPERATIONAL WORKFLOW:

  1. Pre-publication: Validate new article HTML before deployment
  2. Multi-language validation: Test all translated versions simultaneously
  3. Screenshot archival: Store evidence for 90-day compliance period
  4. Regression detection: Compare against baseline for unintended changes
  5. Accessibility audit: Generate ARIA tree for manual review

PERFORMANCE CONSIDERATIONS:

  • Browser launch: ~3s per test run
  • Page load + capture: ~1s per article per viewport
  • Total validation: ~10s for 5-article batch (3 viewports)
  • Parallel execution: Process multiple articles concurrently

ERROR HANDLING STRATEGY:

  • Timeout handling for slow article rendering
  • Fallback validation for missing screenshots
  • Detailed error reporting for accessibility failures
  • Graceful degradation for unavailable features
Version:
  • 2.0.0
Since:
  • 2024-07-15
Author:
  • Hack23 AB (Digital Intelligence & Accessibility Team)
License:
  • Apache-2.0
Source:
See:

Members

(inner, constant) DEFAULT_CONFIG

Default configuration

Source:

(inner, constant) RTL_LANGUAGES

RTL languages

Source:

Methods

(static) generatePRComment()

Generate PR comment with screenshots

Source:

(static) validateAndSave()

Validate and save results to file

Source:

(static) validateArticlesWithPlaywright(articlePaths, options) → {Promise.<Object>}

Validate articles with Playwright

Parameters:
Name Type Description
articlePaths Array

Array of article file paths relative to news/
options Object

Validation options
Source:
Returns:

Validation results with screenshots

Type
Promise.<Object>

(inner) extractLanguage()

Helper functions

Source:

(async, inner) validateAccessibility()

Validate accessibility tree (WCAG 2.1 AA)

Source:

(async, inner) validateColorContrast()

Validate color contrast (4.5:1 for normal text)

Source:

(async, inner) validateHeadingHierarchy()

Validate heading hierarchy (h1 → h2 → h3)

Source:

(async, inner) validateRTL()

Validate RTL layout for Arabic and Hebrew

Source:

(async, inner) validateSingleArticle()

Validate a single article

Source: