RHOAIENG-15152: feat(codeserver/e2e): add initial playwright e2e test…

… project skeleton (#755)

* NO-ISSUE: feat(codeserver/e2e): add initial playwright project skeleton

* NO-ISSUE: feat(codeserver/e2e): add a basic README.md

* NO-ISSUE: add testcontainers as a dependency

* NO-ISSUE: new customizable and flexible config

* check env variables to determine how to run
* take screenshots on failure
* don't open annoying html report
* disable parallel runs

* exclude pnpm-lock.yaml from yamllint

* move Playwright tests from codeserver/e2e to tests/browser

* create a new containers folder for (future) testing of containers in Python

ci/yamllint-config.yaml

@@ -6,3 +6,8 @@ rules:
   line-length: disable
   new-line-at-end-of-file:
     level: warning
+
+  document-start:
+    ignore:
+      # generated file
+      - 'pnpm-lock.yaml'

tests/browser/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

tests/browser/README.md

@@ -0,0 +1,53 @@
+This is a basic Playwright in Typescript that was setup like this
+
+```shell
+brew install node pnpm
+pnpm create playwright
+```
+
+## Getting started
+
+Playwright needs to fetch its own versions of instrumented browsers.
+Run the following on your machine
+
+```shell
+pnpm install
+pnpm exec playwright install
+```
+
+It downloads Chromium, Firefox, Webkit, and also ffmpeg.
+
+```commandline
+du -hs ${HOME}/Library/Caches/ms-playwright
+881M    /Users/jdanek/Library/Caches/ms-playwrigh
+```
+
+Use either the
+[VS Code Playwright extension](https://playwright.dev/docs/getting-started-vscode)
+or the IntelliJ one for nice UX.
+
+Also try out [the UI mode](https://playwright.dev/docs/test-ui-mode) and the [codegen mode](https://playwright.dev/docs/codegen).
+
+```shell
+pnpm playwright test --ui
+pnpm playwright codegen localhost:8787
+```
+
+The main differentiators of Playwright are
+[auto-waiting](https://playwright.dev/docs/actionability),
+the browser fetching seen above,
+and integration and access to browser APIs (geolocation, ...).
+
+Playwright test runner uses [fixtures](https://playwright.dev/docs/test-fixtures) injection, similarly to Pytest.
+
+For debugging, run test with `--headed` and put `await page.pause()` somewhere the test.
+This only works when you "run" and not "run with debug" the test in the IDE.
+
+The HTML report captures screenshot on failure, so maybe that's enough to figure out the failure.
+
+CI captures execution traces that can be opened in [the trace viewer](https://playwright.dev/docs/trace-viewer) and explored.
+
+```shell
+pnpm playwright show-trace path/to/trace.zip
+```
+

tests/browser/package.json

@@ -0,0 +1,16 @@
+{
+  "private": "true",
+  "name": "notebooks",
+  "version": "1.0.0",
+  "description": "Tests for Open Data Hub / OpenShift AI Notebook / Workbench images in TypeScript.",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@playwright/test": "^1.48.2",
+    "@types/node": "^22.8.1",
+    "testcontainers": "^10.13.2"
+  }
+}

tests/browser/playwright.config.ts

@@ -0,0 +1,81 @@
+import { defineConfig, devices } from '@playwright/test';
+import * as process from "node:process";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files 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 : 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [ ['html', { open: 'never' }], ['line'] ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    codeServerSource: {
+      image: process.env['TEST_TARGET'],
+    },
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    // https://github.com/microsoft/playwright/issues/14854#issuecomment-1666185768
+    screenshot: "only-on-failure",
+  },
+
+  projects: getProjects(),
+
+});
+
+function getProjects() {
+  if ('CI' in process.env) {
+    /* Configure projects for major browsers */
+    return [
+      {
+        name: 'chromium',
+        use: {...devices['Desktop Chrome']},
+      },
+
+      {
+        name: 'firefox',
+        use: {...devices['Desktop Firefox']},
+      },
+
+      {
+        name: 'webkit',
+        use: {...devices['Desktop Safari']},
+      }
+    ]
+  }
+
+  /* Test against branded browsers. */
+  return [
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome',
+        headless: false,  // the CDP browser configured below is not affected by this
+        /* custom properties, comment out as needed */
+        connectCDP: 9222,  // false | number: connect to an existing browser running at given port
+        codeServerSource: {  // prefers url if specified, otherwise will start the specified docker image
+          // url: "",  // not-present | string
+          image: "quay.io/modh/codeserver:codeserver-ubi9-python-3.11-2024b-20241018",  // string
+        }
+      },
+    }
+  ]
+
+}