chore: automated tests for select one for map

.github/workflows/ci.yml

@@ -470,8 +470,17 @@ jobs:
       - if: ${{ matrix.target == 'Web' && matrix.browser != 'webkit' }}
         run: 'yarn workspace @getodk/web-forms test-browser:${{ matrix.browser }}'
 
+      # xvfb-run is used for visual tests to compare snapshots more accurately.
       - if: ${{ matrix.target == 'Web' }}
-        run: 'yarn workspace @getodk/web-forms test:e2e:${{ matrix.browser }}'
+        run: 'xvfb-run --auto-servernum yarn workspace @getodk/web-forms test:e2e:${{ matrix.browser }}'
+
+      - name: 'Upload Playwright results'
+        if: always() && matrix.target == 'Web'
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-results-${{ matrix.browser }}
+          path: packages/web-forms/test-results
+          retention-days: 10
 
       - if: ${{ matrix.node-version == '22.12.0' && matrix.target == 'Node' }}
         uses: actions/upload-artifact@v4

packages/common/src/fixtures/preview-service/xforms/cities.geojson

@@ -4,60 +4,48 @@
         {
             "type": "Feature",
             "properties": {
-		"title": "Warsaw",
-                "info": "Capital city of Poland",
+                "title": "Last time red kangaroo was spotted",
+                "info": "A a large red kangaroo was observed at 10:45 AM",
                 "id": "1"
             },
             "geometry": {
                 "type": "Point",
-                "coordinates": [
-		    21.0122,
-                    52.2297
-                ]
+                "coordinates": [134.795, -28.978]
             }
         },
         {
             "type": "Feature",
             "properties": {
-		"title": "Berlin",
-                "info": "Capital city of Germany",
+                "title": "Red kangaroo feeding trail",
+                "info": "The trail that red kangaroos follow to reach their favorite spot food",
                 "id": "2"
             },
             "geometry": {
-                "type": "Point",
+                "type": "LineString",
                 "coordinates": [
-                    13.4050,
-		    52.5200
+                    [134.75, -28.981],
+                    [134.76, -28.981],
+                    [134.77, -28.981]
                 ]
             }
         },
         {
             "type": "Feature",
             "properties": {
-		"title": "Paris",
-                "info": "Capital city of France",
+                "title": "Red kangaroo resting area",
+                "info": "The area where kangaroos are typically found when resting",
                 "id": "3"
             },
             "geometry": {
-                "type": "Point",
-                "coordinates": [
-                    2.3522,
-                    48.8566
-                ]
-            }
-        },
-        {
-            "type": "Feature",
-            "properties": {
-		"title": "Kyiv",
-                "info": "Capital city of Ukraine",
-                "id": "4"
-            },
-            "geometry": {
-                "type": "Point",
+                "type": "Polygon",
                 "coordinates": [
-                    30.5234,
-	            50.4501
+                    [
+                        [134.77, -28.957],
+                        [134.79, -28.957],
+                        [134.79, -28.945],
+                        [134.77, -28.945],
+                        [134.77, -28.957]
+                    ]
                 ]
             }
         }

packages/web-forms/e2e/page-objects/controls/MapControl.ts

@@ -0,0 +1,183 @@
+import { expect, Locator, Page } from '@playwright/test';
+
+export class MapControl {
+	private readonly MAP_COMPONENT_SELECTOR = '.map-block-component';
+	private readonly MAP_CONTAINER_SELECTOR = '.map-container';
+	private readonly MAP_SELECTOR = '.map-block';
+	private readonly ANIMATION_TIME = 1000; // Map has a default of 1s rendering and animation time
+
+	private readonly page: Page;
+
+	constructor(page: Page) {
+		this.page = page;
+	}
+
+	getMapComponentLocator(label: string) {
+		const question = this.page
+			.locator('.question-container')
+			.filter({ has: this.page.locator(`.control-text label span:text-is("${label}")`) });
+		return question.locator(this.MAP_COMPONENT_SELECTOR);
+	}
+
+	async expectMapVisible(mapComponent: Locator) {
+		const map = mapComponent.locator(this.MAP_SELECTOR);
+		await expect(map, `Map not found`).toBeVisible();
+	}
+
+	/**
+	 * Playwright's scrollIntoViewIfNeeded() scrolls minimally and doesn't guarantee to center
+	 * the element, so JavaScript scroll is used to ensure the map is centered and fully visible.
+	 */
+	async scrollMapIntoView(mapComponent: Locator) {
+		const handle = await mapComponent.elementHandle();
+		if (handle) {
+			await handle.evaluate((el) => el.scrollIntoView({ block: 'center' }));
+		}
+	}
+
+	/**
+	 * Pans the map starting from the center of the component.
+	 * @param moveX Pixels. Relative to the map component center.
+	 * @param moveY Pixels. Relative to the map component center.
+	 */
+	async panMap(mapComponent: Locator, moveX: number, moveY: number) {
+		await mapComponent.scrollIntoViewIfNeeded();
+		const mapContainer = mapComponent.locator(this.MAP_CONTAINER_SELECTOR);
+		const box = await mapContainer.boundingBox();
+		if (!box) {
+			return;
+		}
+
+		const centerX = box.x + box.width / 2;
+		const centerY = box.y + box.height / 2;
+
+		await this.page.mouse.move(centerX, centerY);
+		await this.page.mouse.down();
+		await this.page.mouse.move(centerX + moveX, centerY + moveY, { steps: 40 });
+
+		await this.page.mouse.up();
+	}
+
+	async zoomIn(mapComponent: Locator, times = 1) {
+		const button = mapComponent.locator('.ol-zoom').getByText('+', { exact: true });
+		await expect(button).toBeVisible();
+		for (let i = 0; i < times; i++) {
+			await button.click();
+			// Allows reaching the expected zoom level before zooming again for consistent results.
+			await this.page.waitForTimeout(this.ANIMATION_TIME);
+		}
+	}
+
+	async zoomOut(mapComponent: Locator, times = 1) {
+		const button = mapComponent.locator('.ol-zoom').getByText('–', { exact: true });
+		await expect(button).toBeVisible();
+		for (let i = 0; i < times; i++) {
+			await button.click();
+			// Allows reaching the expected zoom level before zooming again for consistent results.
+			await this.page.waitForTimeout(this.ANIMATION_TIME);
+		}
+	}
+
+	async zoomToFitAll(mapComponent: Locator) {
+		const button = mapComponent.locator('button[title="Zoom to fit all options"]');
+		await expect(button).toBeVisible();
+		await button.click();
+	}
+
+	async centerCurrentLocation(mapComponent: Locator) {
+		const button = mapComponent.locator('button[title="Zoom to current location"]');
+		await expect(button).toBeVisible();
+		await button.click();
+	}
+
+	async toggleFullScreen(mapComponent: Locator) {
+		const button = mapComponent.locator('button[title="Full Screen"]');
+		await expect(button).toBeVisible();
+		await button.click();
+	}
+
+	async expectFullScreenActive(mapComponent: Locator) {
+		await expect(mapComponent).toHaveAttribute('class', expect.stringContaining('map-full-screen'));
+	}
+
+	async exitFullScreen(mapComponent: Locator) {
+		await this.page.keyboard.press('Escape');
+		await expect(mapComponent.locator('.map-full-screen')).not.toBeVisible();
+	}
+
+	/**
+	 * Selects feature on map
+	 * @param positionX Pixels. Relative to the left of the browser's viewport.
+	 * @param positionY Pixels. Relative to the top of the browser's viewport.
+	 */
+	async selectFeature(positionX: number, positionY: number) {
+		await this.page.mouse.move(positionX, positionY);
+		await this.page.mouse.down();
+		await this.page.mouse.up();
+	}
+
+	async saveSelection(mapComponent: Locator) {
+		const button = mapComponent.locator('.map-properties').getByText('Save selected');
+		await expect(button).toBeVisible();
+		await button.click();
+	}
+
+	async removeSavedFeature(mapComponent: Locator) {
+		const button = mapComponent.locator('.map-properties').getByText('Remove selection');
+		await expect(button).toBeVisible();
+		await button.click();
+	}
+
+	async viewDetailsOfSavedFeature(mapComponent: Locator) {
+		const button = mapComponent.locator('.map-status-saved').getByText('View details');
+		await expect(button).toBeVisible();
+		await button.click();
+	}
+
+	async closeProperties(mapComponent: Locator) {
+		const button = mapComponent.locator('.map-properties .close-icon');
+		await expect(button).toBeVisible();
+		await button.click();
+		await expect(mapComponent.locator('.map-properties')).not.toBeVisible();
+	}
+
+	async expectErrorMessage(mapComponent: Locator, expectedTitle: string, expectedMessage: string) {
+		const error = mapComponent.locator('.map-block-error');
+		await expect(error.locator('strong')).toHaveText(expectedTitle);
+		await expect(error.locator('span')).toHaveText(expectedMessage);
+	}
+
+	async expectMapScreenshot(mapComponent: Locator, snapshotName: string, isFullScreen = false) {
+		// It cannot disable map's JS animations. So setting timeout.
+		await this.page.waitForTimeout(this.ANIMATION_TIME);
+
+		const map = mapComponent.locator(this.MAP_CONTAINER_SELECTOR);
+		const browserName = this.page.context().browser()?.browserType().name();
+		const isChromiumLinux = process.platform === 'linux' && browserName === 'chromium';
+
+		if (isChromiumLinux) {
+			// Chrome for Linux has an issue when taking the snapshot (ref. https://github.com/microsoft/playwright/issues/18827)
+			const width = isFullScreen ? 1280 : 802;
+			const heigth = isFullScreen ? 720 : 507;
+			await this.page.addStyleTag({
+				content: `
+        .map-container {
+          width: ${width}px !important;
+          height: ${heigth}px !important;
+          max-width: ${width}px !important;
+          max-height: ${heigth + 1}px !important;
+        }
+        body, html {
+          overflow: hidden !important;
+        }
+      `,
+			});
+
+			await this.page.waitForTimeout(this.ANIMATION_TIME);
+		}
+
+		await expect(map).toHaveScreenshot(snapshotName, {
+			maxDiffPixels: 5000,
+		});
+	}
+}

packages/web-forms/e2e/page-objects/pages/FillFormPage.ts

@@ -1,29 +1,36 @@
 import { Page } from '@playwright/test';
 import { GeopointControl } from '../controls/GeopointControl.js';
 import { InputControl } from '../controls/InputControl.js';
+import { MapControl } from '../controls/MapControl.js';
 import { RepeatControl } from '../controls/RepeatControl.js';
 import { TextControl } from '../controls/TextControl.js';
 
 export class FillFormPage {
 	private readonly page: Page;
 
 	public readonly geopoint: GeopointControl;
+	public readonly input: InputControl;
+	public readonly map: MapControl;
 	public readonly repeat: RepeatControl;
 	public readonly text: TextControl;
-	public readonly input: InputControl;
 
 	constructor(page: Page) {
 		this.page = page;
 
 		this.geopoint = new GeopointControl(page);
+		this.input = new InputControl(page);
+		this.map = new MapControl(page);
 		this.repeat = new RepeatControl(page);
 		this.text = new TextControl(page);
-		this.input = new InputControl(page);
 	}
 
 	async copyToClipboard(valueToCopy: string) {
 		await this.page.evaluate((value) => {
 			return navigator.clipboard.writeText(value);
 		}, valueToCopy);
 	}
+
+	async waitForNetworkIdle() {
+		return this.page.waitForLoadState('networkidle');
+	}
 }