test: setup E2E tests

Author: pkerschbaum

.github/workflows/ci.yml

@@ -48,3 +48,33 @@ jobs:
             - name: Check formatting of everything (prettier)
               run: |
                   npm run fmt
+
+    e2e-test:
+        name: E2E Tests (Playwright)
+        timeout-minutes: 60
+        # run only if triggered by push on a branch or by a PR event for a PR which is not a draft
+        if: ${{ !github.event.pull_request || github.event.pull_request.draft == false }}
+        runs-on: ubuntu-24.04
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version-file: ".nvmrc"
+                  cache: npm
+
+            - name: Install dependencies
+              run: |
+                  npm ci
+
+            - name: Run Playwright tests
+              run: |
+                  npm run test:e2e
+
+            - uses: actions/upload-artifact@v4
+              if: ${{ !cancelled() }}
+              with:
+                  name: playwright-report
+                  path: playwright-report/
+                  retention-days: 30

.gitignore

@@ -58,3 +58,9 @@ next-env.d.ts
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -13,6 +13,7 @@ To install and set up the project, follow these steps:
 1. Ensure you have Node.js v20 installed. You can download it from the [official Node.js website](https://nodejs.org/).
 2. Clone the repository to your local machine.
 3. Install the project dependencies using npm - `npm install`.
+4. Setup Docker to run E2E tests via Playwright ([Docker Desktop](https://www.docker.com/products/docker-desktop/) or [Docker Engine](https://docs.docker.com/engine/install/)).
 
 This will install all the necessary packages and dependencies required to run the project.
 
@@ -28,6 +29,7 @@ Open [http://localhost:5173](http://localhost:5173) with your browser to see the
 
 -   `npm run start`: Starts the development server.
 -   `npm run build`: Builds the app for production.
+-   `npm run test:e2e:update`: Runs all End-to-End tests and updates the screenshots/snapshots.
 
 ## Configuration
 

e2e-tests/code-editing-and-ast-interaction.spec.ts

@@ -0,0 +1,60 @@
+/**
+ * Tests for code editing functionality and AST tool interaction.
+ */
+import test, { expect } from "@playwright/test";
+
+/**
+ * This test verifies that:
+ * - Users can edit code in the editor
+ * - The AST updates in response to code changes
+ * - ESQuery selectors correctly highlight matching code and AST nodes
+ * - AST node expansion functionality works properly
+ */
+test(`should change code, then highlight code and AST nodes matching ESQuery selector`, async ({
+	page,
+}) => {
+	await page.goto("/");
+
+	// focus code editor textbox
+	await page
+		.getByRole("region", { name: "Code Editor Panel" })
+		.getByRole("textbox")
+		.nth(1)
+		.click();
+
+	// delete the default code
+	await page.keyboard.press("Control+KeyA");
+	await page.keyboard.press("Backspace");
+
+	// add new code
+	await page.keyboard.type("console.log('Hello, World!');");
+
+	// add an ESQuery selector
+	await page.getByRole("textbox", { name: "ESQuery Selector" }).click();
+	await page.keyboard.type("CallExpression");
+
+	// wait for the debounced update of the AST to happen
+	await expect(
+		page
+			.getByRole("listitem")
+			.filter({ hasText: "end" })
+			.filter({ hasText: "29" }),
+	).toBeVisible();
+
+	// expand AST nodes for ExpressionStatement and CallExpression
+	await page
+		.getByRole("region", { name: "Program" })
+		.getByRole("listitem")
+		.filter({ hasText: "Array" })
+		.getByRole("button", { name: "Toggle Property" })
+		.click();
+	await page.getByRole("button", { name: "ExpressionStatement" }).click();
+	await page
+		.getByRole("region", { name: "ExpressionStatement" })
+		.getByLabel("Toggle Property")
+		.click();
+	await page.getByRole("button", { name: "CallExpression" }).click();
+
+	// screenshot
+	await expect(page).toHaveScreenshot();
+});

e2e-tests/code-editing-and-ast-interaction.spec.ts-snapshots/should-change-code-then-highlight-code-and-AST-nodes-matching-ESQuery-selector-1-chromium-linux.png

@@ -0,0 +1,24 @@
+/**
+ * Tests for theme switching functionality.
+ */
+
+import { test, expect } from "@playwright/test";
+
+/**
+ * This test verifies that:
+ * - The application shows light theme by default
+ * - Users can toggle between light and dark themes
+ * - Theme changes are visually reflected in the UI
+ */
+test("should show light theme by default and switch to dark theme", async ({
+	page,
+}) => {
+	await page.goto("/");
+
+	await expect(page).toHaveScreenshot("light-theme.png");
+
+	await page.getByRole("button", { name: "Toggle theme" }).click();
+	await page.getByRole("menuitem", { name: "Dark" }).click();
+
+	await expect(page).toHaveScreenshot("dark-theme.png");
+});