Set up Playwright Test

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -1,5 +1,18 @@
 node_modules/
 
+# Reserved for future use
+dist/
+build/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# Istanbul code coverage reports
+coverage/
+
 # Logs
 logs
 *.log

.vscode/settings.json

@@ -295,6 +295,7 @@
 		"tandard",
 		"taskbarless",
 		"TEMPLATEDIR",
+		"textbox",
 		"themepack",
 		"themeui",
 		"THISDIRNAME",

README.md

@@ -100,6 +100,14 @@ When pulling changes from git, run `npm install` again in case there are any new
 
 Some dependencies are versioned with npm, but pulled into the repo with `npm run pull-libs`
 
+### Quality Assurance
+
+Tests are written with Playwright.
+
+```
+npm test
+```
+
 ### Managing Subrepos
 
 To update subrepos, or push changes to them, install [git-subrepo](https://github.com/ingydotnet/git-subrepo). You don't need this tool to clone the project and get up and running, as subrepos are just normal subdirectories with a `.gitrepo` metadata file.

package.json

@@ -32,6 +32,8 @@
 		"javascript"
 	],
 	"devDependencies": {
+		"@playwright/test": "^1.45.0",
+		"@types/node": "^20.14.9",
 		"browserfs": "^1.4.3",
 		"butterchurn": "2.6.7",
 		"butterchurn-presets": "2.4.7",
@@ -47,8 +49,9 @@
 		"webamp": "1.5.0"
 	},
 	"scripts": {
+		"test": "playwright test --reporter=list",
 		"start": "run-p watch-fs-index start-server",
-		"start-server": "live-server --port=1998 --ignore=node_modules",
+		"start-server": "live-server --port=1998 --ignore=node_modules/,.git/,.history/,.idea/,.vscode/,test/,coverage/,test-results/,playwright-report/,blob-report/,playwright/.cache/,package.json,package-lock.json,README.md,LICENSE,CNAME,cspell.json,.gitignore,.gitattributes .",
 		"watch-fs-index": "onchange --initial --poll 1000 --kill -f add -f addDir -f unlink -f unlinkDir '**' --exclude 'filesystem-index.json' --exclude '**/.history/**' -- npm run make-fs-index",
 		"watch-fs-index @NOTE 1": "--kill makes it not queue up the events as tasks (as well as sending kill signal to old process)",
 		"watch-fs-index @NOTE 2": "When many files are changed, such as when doing a rebase or otherwise checking out old commits, it can take a long time to start working again. Add --verbose to view the stupid behavior. It probably makes it slower too, logging a lot.",

playwright.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// 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 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		// baseURL: 'http://127.0.0.1:3000',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] },
+		},
+
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] },
+		},
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: 'npm run start-server -- --no-browser',
+		url: 'http://127.0.0.1:1998',
+		reuseExistingServer: !process.env.CI,
+	},
+});

tests/explorer.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+
+test('can open My Computer and select a file in it and start to rename it', async ({ browserName, page }) => {
+	await page.goto('http://localhost:1998/');
+	// open file explorer
+	await page.getByText('My Computer').dblclick();
+	// wait for the folder contents to load
+	const appFrameLocator = page.frameLocator('iframe');
+	await expect(appFrameLocator.getByText(/^\d+ object\(s\)$/)).toBeVisible();
+	// try to select the file
+	const folderFrameLocator = appFrameLocator.frameLocator('iframe');
+	await folderFrameLocator.getByText('index.html').click();
+	// "index.html" should be shown in the sidebar now
+	await expect(folderFrameLocator.getByText('index.html')).toHaveCount(2);
+	const iconLocator = folderFrameLocator.locator('.desktop-icon').filter({ hasText: 'index.html' });
+	await expect(iconLocator).toHaveClass(/(^|\s)selected(\s|$)/);
+	// avoid double click
+	await page.waitForTimeout(1000);
+	// single click selected item to start renaming
+	await iconLocator.click();
+	await expect(folderFrameLocator.getByRole('textbox')).toBeFocused();
+	await expect(folderFrameLocator.getByRole('textbox')).toHaveValue('index.html');
+});