test: docker tooling with playwright

Signed-off-by: Max <max@nextcloud.com>

Author: max-nextcloud

.gitignore

@@ -65,3 +65,7 @@ typings/
 /dist
 cypress/screenshots
 cypress/videos
+
+# playwright artifacts
+test-results/
+playwright-report/

README.md

@@ -25,9 +25,29 @@ In particular cypress specific utils such as selectors will be dropped unless th
 
 ### Playwright
 
-This repository does not include playwritght configurations or examples yet.
+1. Copy `playwright.config.mjs` and `playwright` folder from this repository!
+2. Add the `@playwright/test` dependency:
+  ```
+    npm install --save-dev '@playwright/test'
+  ```
+3. Add the `start:nextcloud` script to your package.json
+  ```json
+    {
+      "start:nextcloud": "node playwright/start-nextcloud-server.mjs",
+    }
+  ```
+4. Install chromium for playwright:
+  ```
+    npx playwright install chromium --only-shell
+  ```
+5. Run playwright tests:
+  ```
+    npx playwright test
+  ```
+6. Add `.github/workflows/playwright.yml` to your repository!
+7. Write your own tests!
+
 
-Please take a look at the [forms app](https://github.com/nextcloud/forms) for an example of using `@nextlcloud/e2e-test-server` with playwright.
 
 ### Cypress
 

package-lock.json

@@ -64,7 +64,8 @@
     "cypress": "npm run cypress:e2e && npm run cypress:component",
     "cypress:e2e": "cypress run --e2e",
     "cypress:component": "cypress run --component",
-    "cypress:gui": "cypress open"
+    "cypress:gui": "cypress open",
+    "start:nextcloud": "node playwright/start-nextcloud-server.mjs"
   },
   "repository": {
     "type": "git",
@@ -87,6 +88,7 @@
     "@cypress/code-coverage": "^3.12.39",
     "@nextcloud/upload": "^1.1.1",
     "@nextcloud/webpack-vue-config": "^6.0.1",
+    "@playwright/test": "^1.50.1",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.1",

package.json

@@ -0,0 +1,58 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './playwright',
+
+	/* 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: process.env.CI ? 'github' : '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://localhost:8089/index.php/',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	projects: [
+		// Our global setup to configure the Nextcloud docker container
+		{
+			name: 'setup',
+			testMatch: /setup\.ts$/,
+		},
+
+		{
+			name: 'chromium',
+			use: {
+				...devices['Desktop Chrome'],
+			},
+			dependencies: ['setup'],
+		},
+	],
+
+	webServer: {
+		// Starts the Nextcloud docker container
+		command: 'npm run start:nextcloud',
+		reuseExistingServer: !process.env.CI,
+		url: 'http://127.0.0.1:8089',
+		stderr: 'pipe',
+		stdout: 'pipe',
+		timeout: 5 * 60 * 1000, // max. 5 minutes for creating the container
+	},
+})

playwright.config.ts

@@ -0,0 +1,16 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect } from '@playwright/test'
+import { test } from '../support/fixtures/random-user'
+
+test.beforeEach(async ({ page }) => {
+	await page.goto('apps/files')
+	await page.waitForURL(/apps\/files/)
+})
+
+test('Random user is authenticated', async ({ page }) => {
+	await expect(page.getByLabel('Settings menu')).toBeVisible()
+})

playwright/e2e/random-user.spec.ts

@@ -0,0 +1,39 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { startNextcloud, stopNextcloud } from '../dist/docker.mjs'
+import { readFileSync } from 'fs'
+
+const start = async () => {
+	return await startNextcloud(getBranch(), true, {
+		exposePort: 8089,
+	})
+}
+
+const getBranch = () => {
+	try {
+		const appinfo = readFileSync('appinfo/info.xml').toString()
+		const maxVersion = appinfo.match(
+			/<nextcloud min-version="\d+" max-version="(\d\d+)" \/>/,
+		)?.[1]
+		return maxVersion ? `stable${maxVersion}` : undefined
+	} catch (err) {
+		if (err.code === 'ENOENT') {
+			console.warn('No appinfo/info.xml found. Using default server banch.')
+		}
+	}
+}
+
+// Start the Nextcloud docker container
+await start()
+// Listen for process to exit (tests done) and shut down the docker container
+process.on('beforeExit', (code) => {
+	stopNextcloud()
+})
+
+// Idle to wait for shutdown
+while (true) {
+	await new Promise((resolve) => setTimeout(resolve, 5000))
+}

playwright/start-nextcloud-server.mjs

@@ -0,0 +1,26 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { test as base } from '@playwright/test'
+import { createRandomUser, login } from '../utils/session'
+
+/**
+ * This test fixture ensures a new random user is created and used for the test (current page)
+ */
+export const test = base.extend({
+	page: async ({ browser, baseURL }, use) => {
+		// Important: make sure we authenticate in a clean environment by unsetting storage state.
+		const page = await browser.newPage({
+			storageState: undefined,
+			baseURL,
+		})
+
+		const uid = await createRandomUser()
+		await login(page.request, uid, uid)
+
+		await use(page)
+		await page.close()
+	},
+})

playwright/support/fixtures/random-user.ts

@@ -0,0 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { test as setup } from '@playwright/test'
+import { configureNextcloud } from '../../dist'
+
+/**
+ * We use this to ensure Nextcloud is configured correctly before running our tests
+ *
+ * This can not be done in the webserver startup process,
+ * as that only checks for the URL to be accessible which happens already before everything is configured.
+ */
+setup('Configure Nextcloud', async () => {
+	const appsToInstall = []
+	await configureNextcloud(appsToInstall)
+})