Epic 2 pbi 2.2

.eslintrc.json

@@ -1,13 +1,19 @@
 {
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "node": true
-  },
-  "extends": "eslint:recommended",
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
   "parserOptions": {
     "ecmaVersion": "latest",
-    "sourceType": "module"
+    "sourceType": "module",
+    "project": "./tsconfig.json" // Make sure this path is correct if you have a tsconfig.json
   },
-  "rules": {}
+  "rules": {
+    // Your custom rules here
+  }
 }

playwright.config.js

@@ -1,16 +1,62 @@
-const { defineConfig } = require('@playwright/test');
+import { defineConfig, devices } from '@playwright/test';
 
-module.exports = defineConfig({
+export default defineConfig({
+  // Directory where tests are located
   testDir: './tests',
+
+  // Directory for test artifacts (videos, traces, screenshots generated during runs)
+  outputDir: 'published-screenshots/test-results',
+
+  // Directory for visual snapshot baseline images.
+  // When you run `npx playwright test --update-snapshots`, images are saved here.
+  // When you run `npx playwright test`, images are compared against baselines here.
+  snapshotPathTemplate: 'published-screenshots/snapshots/{testFilePath}-{arg}-{projectName}{ext}',
+
+  // Run tests in parallel
+  fullyParallel: true,
+
+  // Fail the build on CI if you accidentally left test.only in the source code.
+  forbidOnly: !!process.env.CI,
+
+  // Retry on CI only
+  retries: process.env.CI ? 2 : 0,
+
+  // Opt out of parallel tests on CI.
+  workers: process.env.CI ? 1 : undefined,
+
+  // Reporter to use. 'blob' is good for CI as it produces a single JSON file.
+  // The interactive HTML report will be generated in the workflow.
+  reporter: 'blob',
+
   use: {
-    headless: true,
-    screenshot: 'on',
-    trace: 'on',
-    video: 'off',
-    ignoreHTTPSErrors: true,
+    // Base URL to use in actions like `await page.goto('/')`.
+    // baseURL: 'http://127.0.0.1:3000', // Uncomment and set if you have a local dev server
+
+    // Collect trace when retrying the first time.
+    trace: 'on-first-retry',
   },
-  reporter: [
-    ['json', { outputFile: 'playwright-metrics.json' }],
-    ['html', { outputFile: 'report.html', open: 'never' }],
+
+  // Configure projects for different browsers
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    // You can uncomment and add more projects for different browsers if needed:
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
   ],
-});
+
+  // If your tests require a development server to be running:
+  // webServer: {
+  //   command: 'npm run start', // Replace with your actual start command (e.g., 'npm start', 'yarn dev')
+  //   url: 'http://127.0.0.1:3000', // Replace with the URL your app runs on locally
+  //   reuseExistingServer: !process.env.CI, // Reuse server if already running locally
+  // },
+});

published-screenshots/.last-run.json

@@ -0,0 +1,6 @@
+{
+  "status": "failed",
+  "failedTests": [
+    "849da1cee0c412ce5534-4ebb083191c59dda5f31"
+  ]
+}

published-screenshots/demo-todo-app-Clear-comple-576e5-no-items-that-are-completed-chromium/error-context.md

@@ -0,0 +1,40 @@
+# Page snapshot
+
+```yaml
+- text: This is just a demo of TodoMVC for testing, not the
+- link "real TodoMVC app.":
+  - /url: https://todomvc.com/
+- heading "todos" [level=1]
+- textbox "What needs to be done?"
+- checkbox "❯Mark all as complete"
+- text: ❯Mark all as complete
+- list:
+  - listitem:
+    - checkbox "Toggle Todo"
+    - text: feed the cat
+  - listitem:
+    - checkbox "Toggle Todo"
+    - text: book a doctors appointment
+- strong: "2"
+- text: items left
+- list:
+  - listitem:
+    - link "All":
+      - /url: "#/"
+  - listitem:
+    - link "Active":
+      - /url: "#/active"
+  - listitem:
+    - link "Completed":
+      - /url: "#/completed"
+- contentinfo:
+  - paragraph: Double-click to edit a todo
+  - paragraph:
+    - text: Created by
+    - link "Remo H. Jansen":
+      - /url: http://github.com/remojansen/
+  - paragraph:
+    - text: Part of
+    - link "TodoMVC":
+      - /url: http://todomvc.com
+```