test(files): migrate files selection e2e from Cypress to Playwright

Author: pringelmann

cypress/e2e/files/files-selection.cy.ts

@@ -0,0 +1,63 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect, test } from '../../support/fixtures/files-page.ts'
+import { uploadContent } from '../../support/utils/dav.ts'
+
+// Names sort ascending, so the on-screen order is:
+// archive.zip, audio.mp3, document.pdf, image.jpg, readme.md, video.mp4, welcome.txt
+const files: Record<string, string> = {
+	'image.jpg': 'image/jpeg',
+	'document.pdf': 'application/pdf',
+	'archive.zip': 'application/zip',
+	'audio.mp3': 'audio/mpeg',
+	'video.mp4': 'video/mp4',
+	'readme.md': 'text/markdown',
+	'welcome.txt': 'text/plain',
+}
+const filesCount = Object.keys(files).length
+
+test.describe('Files: Select files', () => {
+	test.beforeEach(async ({ page, user, filesListPage }) => {
+		// Uploading welcome.txt overwrites the auto-created one, so the list holds exactly these files
+		for (const [name, mime] of Object.entries(files)) {
+			await uploadContent(page.request, user, Buffer.alloc(0), mime, `/${name}`)
+		}
+		await filesListPage.open()
+	})
+
+	test('selects and deselects all files', async ({ page, filesListPage }) => {
+		await expect(filesListPage.getRows()).toHaveCount(filesCount)
+		await expect(filesListPage.getRowCheckboxes()).toHaveCount(filesCount)
+
+		await filesListPage.selectAll()
+		await expect(page.getByText(`${filesCount} selected`)).toBeVisible()
+		await expect(filesListPage.getSelectedRowCheckboxes()).toHaveCount(filesCount)
+
+		await filesListPage.deselectAll()
+		await expect(page.getByText(/\d+ selected/)).toHaveCount(0)
+		await expect(filesListPage.getSelectedRowCheckboxes()).toHaveCount(0)
+	})
+
+	test('selects an arbitrary subset of files', async ({ page, filesListPage }) => {
+		const subset = ['image.jpg', 'document.pdf', 'audio.mp3', 'readme.md']
+
+		for (const name of subset) {
+			await filesListPage.selectRowForFile(name)
+		}
+
+		await expect(page.getByText(`${subset.length} selected`)).toBeVisible()
+		await expect(filesListPage.getSelectedRowCheckboxes()).toHaveCount(subset.length)
+	})
+
+	test('selects a range of files with the shift key', async ({ page, filesListPage }) => {
+		// audio.mp3 -> readme.md spans audio.mp3, document.pdf, image.jpg, readme.md
+		await filesListPage.selectRowForFile('audio.mp3')
+		await filesListPage.selectRowForFile('readme.md', { shift: true })
+
+		await expect(page.getByText('4 selected')).toBeVisible()
+		await expect(filesListPage.getSelectedRowCheckboxes()).toHaveCount(4)
+	})
+})

tests/playwright/e2e/files/files-selection.spec.ts

@@ -25,6 +25,21 @@ export class FilesListPage {
 		return this.page.locator(`[data-cy-files-list-row-fileid="${fileid}"]`)
 	}
 
+	/** All file rows currently rendered in the list (e.g. for count assertions). */
+	getRows(): Locator {
+		return this.page.locator('[data-cy-files-list-row-fileid]')
+	}
+
+	/** The per-row selection checkboxes. */
+	getRowCheckboxes(): Locator {
+		return this.page.locator('[data-cy-files-list-row-checkbox]')
+	}
+
+	/** The per-row selection checkboxes that are currently checked (i.e. selected rows). */
+	getSelectedRowCheckboxes(): Locator {
+		return this.getRowCheckboxes().locator('input:checked')
+	}
+
 	private getActionsButtonForFile(filename: string): Locator {
 		return this.getRowForFile(filename)
 			.getByRole('button', { name: 'Actions' })
@@ -66,17 +81,42 @@ export class FilesListPage {
 		return this.getRowForFile(filename).getByRole('img', { name: 'Favorite' })
 	}
 
-	async selectAll(): Promise<void> {
-		await this.page.locator('[data-cy-files-list-selection-checkbox]')
+	private getSelectAllCheckbox(): Locator {
+		return this.page.locator('[data-cy-files-list-selection-checkbox]')
 			.getByRole('checkbox')
-			.click({ force: true })
 	}
 
-	async selectRowForFile(filename: string): Promise<void> {
-		// The checkbox is visually hidden inside NcCheckboxRadioSwitch, so force the check
-		await this.getRowForFile(filename)
+	async selectAll(): Promise<void> {
+		await this.getSelectAllCheckbox().click({ force: true })
+	}
+
+	/**
+	 * Clear the current selection via the master checkbox. It is a toggle, so it
+	 * clicks the same control as {@link selectAll}; call it while rows are
+	 * selected to deselect them all.
+	 */
+	async deselectAll(): Promise<void> {
+		await this.getSelectAllCheckbox().click({ force: true })
+	}
+
+	/**
+	 * Select a single row's checkbox. Pass `{ shift: true }` to extend the
+	 * selection as a range from the previously selected row. Range selection
+	 * reads the global keyboard store, so Shift is held with real keyboard
+	 * events rather than a click modifier.
+	 */
+	async selectRowForFile(filename: string, { shift = false }: { shift?: boolean } = {}): Promise<void> {
+		// The checkbox is visually hidden inside NcCheckboxRadioSwitch, so force the interaction
+		const checkbox = this.getRowForFile(filename)
 			.getByRole('checkbox', { name: /Toggle selection/ })
-			.check({ force: true })
+
+		if (shift) {
+			await this.page.keyboard.down('Shift')
+			await checkbox.click({ force: true })
+			await this.page.keyboard.up('Shift')
+		} else {
+			await checkbox.check({ force: true })
+		}
 	}
 
 	/**