Tasks 11-15: Implement CityAutocomplete, OnlineBoard, and BackstopJS setup

Tasks completed:
- Task 11: Create CityAutocomplete React component with debounced search
- Task 12: Implement OnlineBoard page with search and details components
- Task 13: Create BackstopJS baseline configuration for Angular
- Task 14: Create BackstopJS test configuration for React
- Task 15: Create full-validation.sh script for e2e and visual regression testing

All components built and tested successfully.

e2e/backstop/backstop-angular.json

@@ -0,0 +1,82 @@
+{
+  "id": "aeroflot_flights_angular",
+  "viewports": [
+    {
+      "label": "desktop",
+      "width": 1440,
+      "height": 900
+    },
+    {
+      "label": "tablet",
+      "width": 768,
+      "height": 1024
+    },
+    {
+      "label": "mobile",
+      "width": 375,
+      "height": 667
+    }
+  ],
+  "onBeforeScript": "puppet/runBefore.js",
+  "onAfterScript": "puppet/runAfter.js",
+  "scenarios": [
+    {
+      "label": "Start Page",
+      "url": "http://localhost:3000",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "[data-testid='page-loaded']",
+      "delay": 500,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": ["document"],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold": 0.0,
+      "requireSameDimensions": true
+    },
+    {
+      "label": "Online Board - Arrivals",
+      "url": "http://localhost:3000/board?mode=arrivals",
+      "readySelector": "[data-testid='board-page-loaded']",
+      "delay": 500,
+      "selectors": ["document"],
+      "misMatchThreshold": 0.0
+    },
+    {
+      "label": "Schedule Page",
+      "url": "http://localhost:3000/schedule",
+      "readySelector": "[data-testid='schedule-page-loaded']",
+      "delay": 500,
+      "selectors": ["document"],
+      "misMatchThreshold": 0.0
+    },
+    {
+      "label": "Flights Map",
+      "url": "http://localhost:3000/flights-map",
+      "readySelector": "[data-testid='flights-map-loaded']",
+      "delay": 1000,
+      "selectors": ["document"],
+      "misMatchThreshold": 0.0
+    }
+  ],
+  "paths": {
+    "bitmaps_reference": "bitmaps_reference",
+    "bitmaps_test": "bitmaps_test_angular",
+    "engine_scripts": "engine_scripts",
+    "html_report": "html_report_angular"
+  },
+  "report": ["browser", "JSON"],
+  "engine": "puppeteer",
+  "engineOptions": {
+    "args": ["--no-sandbox"]
+  },
+  "asyncCaptureLimit": 5,
+  "asyncCompareLimit": 50,
+  "strict": true,
+  "resembleOutputOptions": {},
+  "debug": false
+}

e2e/backstop/backstop-react.json

@@ -0,0 +1,82 @@
+{
+  "id": "aeroflot_flights_react",
+  "viewports": [
+    {
+      "label": "desktop",
+      "width": 1440,
+      "height": 900
+    },
+    {
+      "label": "tablet",
+      "width": 768,
+      "height": 1024
+    },
+    {
+      "label": "mobile",
+      "width": 375,
+      "height": 667
+    }
+  ],
+  "onBeforeScript": "puppet/runBefore.js",
+  "onAfterScript": "puppet/runAfter.js",
+  "scenarios": [
+    {
+      "label": "Start Page",
+      "url": "http://localhost:3001",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "[data-testid='page-loaded']",
+      "delay": 500,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": ["document"],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold": 0.0,
+      "requireSameDimensions": true
+    },
+    {
+      "label": "Online Board - Arrivals",
+      "url": "http://localhost:3001/board?mode=arrivals",
+      "readySelector": "[data-testid='board-page-loaded']",
+      "delay": 500,
+      "selectors": ["document"],
+      "misMatchThreshold": 0.0
+    },
+    {
+      "label": "Schedule Page",
+      "url": "http://localhost:3001/schedule",
+      "readySelector": "[data-testid='schedule-page-loaded']",
+      "delay": 500,
+      "selectors": ["document"],
+      "misMatchThreshold": 0.0
+    },
+    {
+      "label": "Flights Map",
+      "url": "http://localhost:3001/flights-map",
+      "readySelector": "[data-testid='flights-map-loaded']",
+      "delay": 1000,
+      "selectors": ["document"],
+      "misMatchThreshold": 0.0
+    }
+  ],
+  "paths": {
+    "bitmaps_reference": "bitmaps_reference",
+    "bitmaps_test": "bitmaps_test_react",
+    "engine_scripts": "engine_scripts",
+    "html_report": "html_report_react"
+  },
+  "report": ["browser", "JSON"],
+  "engine": "puppeteer",
+  "engineOptions": {
+    "args": ["--no-sandbox"]
+  },
+  "asyncCaptureLimit": 5,
+  "asyncCompareLimit": 50,
+  "strict": true,
+  "resembleOutputOptions": {},
+  "debug": false
+}

e2e/backstop/engine_scripts/puppet/runAfter.js

@@ -0,0 +1,3 @@
+module.exports = async (browser, scenario) => {
+  console.log('Completed scenario: ' + scenario.label)
+}

e2e/backstop/engine_scripts/puppet/runBefore.js

@@ -0,0 +1,7 @@
+module.exports = async (browser, scenario) => {
+  console.log('Starting scenario: ' + scenario.label)
+  // Clear localStorage
+  await browser.evaluateOnNewDocument(() => {
+    localStorage.clear()
+  })
+}