test: migrate E2E tests from JSDOM to Playwright

Author: KristjanESPERANTO

tests/e2e/animateCSS_spec.js

@@ -29,10 +29,10 @@ describe("AnimateCSS integration Test", () => {
 	async function waitForAnimationClass (cls, { timeout = 6000 } = {}) {
 		const start = Date.now();
 		while (Date.now() - start < timeout) {
-			if (document.querySelector(`.compliments.animate__animated.${cls}`)) {
+			if (await helpers.querySelector(`.compliments.animate__animated.${cls}`)) {
 				// small stability wait
 				await new Promise((r) => setTimeout(r, 50));
-				if (document.querySelector(`.compliments.animate__animated.${cls}`)) return true;
+				if (await helpers.querySelector(`.compliments.animate__animated.${cls}`)) return true;
 			}
 			await new Promise((r) => setTimeout(r, 100));
 		}
@@ -47,7 +47,7 @@ describe("AnimateCSS integration Test", () => {
 	async function assertNoAnimationWithin (ms = 2000) {
 		const start = Date.now();
 		while (Date.now() - start < ms) {
-			if (document.querySelector(".compliments.animate__animated")) {
+			if (await helpers.querySelector(".compliments.animate__animated")) {
 				throw new Error("Unexpected animate__animated class present in non-animation scenario");
 			}
 			await new Promise((r) => setTimeout(r, 100));

tests/e2e/custom_module_regions_spec.js

@@ -16,15 +16,15 @@ describe("Custom Position of modules", () => {
 	const className1 = positions[i].replace("_", ".");
 	let message1 = positions[i];
 	it(`should show text in ${message1}`, async () => {
-		const elem = await helpers.waitForElement(`.${className1}`);
-		expect(elem).not.toBeNull();
-		expect(elem.textContent).toContain(`Text in ${message1}`);
+		await expect(
+			helpers.expectTextContent(`.${className1} .module-content`, { contains: `Text in ${message1}` })
+		).resolves.toBe(true);
 	});
 	i = 1;
 	const className2 = positions[i].replace("_", ".");
 	let message2 = positions[i];
 	it(`should NOT show text in ${message2}`, async () => {
-		const elem = await helpers.waitForElement(`.${className2}`, "", 1500);
+		const elem = await helpers.querySelector(`.${className2} .module-content`);
 		expect(elem).toBeNull();
-	}, 1510);
+	});
 });

tests/e2e/env_spec.js

@@ -20,8 +20,6 @@ describe("App environment", () => {
 	});
 
 	it("should show the title MagicMirror²", async () => {
-		const elem = await helpers.waitForElement("title");
-		expect(elem).not.toBeNull();
-		expect(elem.textContent).toBe("MagicMirror²");
+		await expect(helpers.expectTextContent("title", { equals: "MagicMirror²" })).resolves.toBe(true);
 	});
 });

tests/e2e/helpers/global-setup.js

@@ -1,8 +1,7 @@
 const path = require("node:path");
 const os = require("node:os");
 const fs = require("node:fs");
-const { once } = require("node:events");
-const jsdom = require("jsdom");
+const { chromium } = require("playwright");
 
 // global absolute root path
 global.root_path = path.resolve(`${__dirname}/../../../`);
@@ -17,8 +16,67 @@ const sampleCss = [
 	" top: 100%;",
 	"}"
 ];
-var indexData = [];
-var cssData = [];
+let indexData = "";
+let cssData = "";
+
+let browser;
+let context;
+let page;
+
+/**
+ * Ensure Playwright browser and context are available.
+ * @returns {Promise<void>}
+ */
+async function ensureContext () {
+	if (!browser) {
+		browser = await chromium.launch({ headless: true });
+	}
+	if (!context) {
+		context = await browser.newContext();
+	}
+}
+
+/**
+ * Open a fresh page pointing to the provided url.
+ * @param {string} url target url
+ * @returns {Promise<import('playwright').Page>} initialized page instance
+ */
+async function openPage (url) {
+	await ensureContext();
+	if (page) {
+		await page.close();
+	}
+	page = await context.newPage();
+	await page.goto(url, { waitUntil: "load" });
+	return page;
+}
+
+/**
+ * Close page, context and browser if they exist.
+ * @returns {Promise<void>}
+ */
+async function closeBrowser () {
+	if (page) {
+		await page.close();
+		page = null;
+	}
+	if (context) {
+		await context.close();
+		context = null;
+	}
+	if (browser) {
+		await browser.close();
+		browser = null;
+	}
+}
+
+exports.getPage = () => {
+	if (!page) {
+		throw new Error("Playwright page is not initialized. Call getDocument() first.");
+	}
+	return page;
+};
+
 
 exports.startApplication = async (configFilename, exec) => {
 	vi.resetModules();
@@ -36,7 +94,7 @@ exports.startApplication = async (configFilename, exec) => {
 	});
 
 	if (global.app) {
-		await this.stopApplication();
+		await exports.stopApplication();
 	}
 
 	// Use fixed port 8080 (tests run sequentially, no conflicts)
@@ -65,114 +123,125 @@ exports.startApplication = async (configFilename, exec) => {
 };
 
 exports.stopApplication = async (waitTime = 100) => {
+	await closeBrowser();
+
 	if (!global.app) {
-		if (global.window) {
-			global.window.close();
-			delete global.window;
-		}
 		delete global.testPort;
 		return Promise.resolve();
 	}
 
-	// Stop server first
 	await global.app.stop();
 	delete global.app;
 	delete global.testPort;
 
 	// Wait for any pending async operations to complete before closing DOM
 	await new Promise((resolve) => setTimeout(resolve, waitTime));
-
-	if (global.window) {
-		// Close window after async operations have settled
-		global.window.close();
-		delete global.window;
-		delete global.document;
-	}
 };
 
 exports.getDocument = async () => {
 	const port = global.testPort || config.port || 8080;
-	// JSDOM requires localhost instead of 0.0.0.0 for URL resolution
 	const address = config.address === "0.0.0.0" ? "localhost" : config.address || "localhost";
 	const url = `http://${address}:${port}`;
 
-	const dom = await jsdom.JSDOM.fromURL(url, { resources: "usable", runScripts: "dangerously" });
+	await openPage(url);
+};
 
-	dom.window.name = "jsdom";
-	global.window = dom.window;
-	global.document = dom.window.document;
-	// Some modules access navigator.*, so provide a minimal stub for JSDOM-based tests.
-	global.navigator = {
-		useragent: "node.js"
-	};
-	dom.window.fetch = fetch;
+exports.waitForElement = async (selector, ignoreValue = "", timeout = 0) => {
+	const currentPage = exports.getPage();
+	const locator = currentPage.locator(selector);
+	const effectiveTimeout = timeout && timeout > 0 ? timeout : 30000;
+	const deadline = Date.now() + effectiveTimeout;
 
-	// fromURL() resolves when HTML is loaded, but with resources: "usable",
-	// external scripts load asynchronously. Wait for the load event to ensure scripts are executed.
-	if (dom.window.document.readyState !== "complete") {
-		await once(dom.window, "load");
+	while (Date.now() <= deadline) {
+		const count = await locator.count();
+		if (count > 0) {
+			if (!ignoreValue) {
+				return locator.first();
+			}
+			const text = await locator.first().textContent();
+			if (!text || !text.includes(ignoreValue)) {
+				return locator.first();
+			}
+		}
+		await currentPage.waitForTimeout(100);
 	}
+
+	return null;
 };
 
-exports.waitForElement = (selector, ignoreValue = "", timeout = 0) => {
-	return new Promise((resolve) => {
-		let oldVal = "dummy12345";
-		let element = null;
-		const interval = setInterval(() => {
-			element = document.querySelector(selector);
-			if (element) {
-				let newVal = element.textContent;
-				if (newVal === oldVal) {
-					clearInterval(interval);
-					resolve(element);
-				} else {
-					if (ignoreValue === "") {
-						oldVal = newVal;
-					} else {
-						if (!newVal.includes(ignoreValue)) oldVal = newVal;
-					}
-				}
+exports.waitForAllElements = async (selector, timeout = 30000) => {
+	const currentPage = exports.getPage();
+	const locator = currentPage.locator(selector);
+	const effectiveTimeout = timeout && timeout > 0 ? timeout : 30000;
+	const deadline = Date.now() + effectiveTimeout;
+
+	while (Date.now() <= deadline) {
+		const count = await locator.count();
+		if (count > 0) {
+			const elements = [];
+			for (let i = 0; i < count; i++) {
+				elements.push(locator.nth(i));
 			}
-		}, 100);
-		if (timeout !== 0) {
-			setTimeout(() => {
-				if (interval) clearInterval(interval);
-				resolve(null);
-			}, timeout);
+			return elements;
 		}
-	});
+		await currentPage.waitForTimeout(100);
+	}
+
+	return [];
 };
 
-exports.waitForAllElements = (selector) => {
-	return new Promise((resolve) => {
-		let oldVal = 999999;
-		const interval = setInterval(() => {
-			const element = document.querySelectorAll(selector);
-			if (element) {
-				let newVal = element.length;
-				if (newVal === oldVal) {
-					clearInterval(interval);
-					resolve(element);
-				} else {
-					if (newVal !== 0) oldVal = newVal;
-				}
-			}
-		}, 100);
-	});
+exports.testMatch = async (selector, regex) => {
+	await exports.expectTextContent(selector, { matches: regex });
+	return true;
 };
 
-exports.testMatch = async (element, regex) => {
-	const elem = await this.waitForElement(element);
-	expect(elem).not.toBeNull();
-	expect(elem.textContent).toMatch(regex);
+exports.querySelector = async (selector) => {
+	const locator = exports.getPage().locator(selector);
+	return (await locator.count()) > 0 ? locator.first() : null;
+};
+
+exports.querySelectorAll = async (selector) => {
+	const locator = exports.getPage().locator(selector);
+	const count = await locator.count();
+	const elements = [];
+	for (let i = 0; i < count; i++) {
+		elements.push(locator.nth(i));
+	}
+	return elements;
+};
+
+exports.expectTextContent = async (target, expectation) => {
+	if (!expectation || (expectation.equals === undefined && expectation.contains === undefined && expectation.matches === undefined)) {
+		throw new Error("expectTextContent expects an object with equals, contains, or matches");
+	}
+
+	let locator = target;
+	if (typeof target === "string") {
+		locator = await exports.waitForElement(target);
+	}
+
+	expect(locator).not.toBeNull();
+	if (!locator) {
+		const description = typeof target === "string" ? target : "supplied locator";
+		throw new Error(`No element found for ${description}`);
+	}
+
+	const textPromise = locator.textContent();
+	if (expectation.equals !== undefined) {
+		await expect(textPromise).resolves.toBe(expectation.equals);
+	} else if (expectation.contains !== undefined) {
+		await expect(textPromise).resolves.toContain(expectation.contains);
+	} else {
+		await expect(textPromise).resolves.toMatch(expectation.matches);
+	}
 	return true;
 };
 
 exports.fixupIndex = async () => {
 	// read and save the git level index file
 	indexData = (await fs.promises.readFile(indexFile)).toString();
 	// make lines of the content
-	let workIndexLines = indexData.split(os.EOL);
+	const workIndexLines = indexData.split(os.EOL);
 	// loop thru the lines to find place to insert new region
 	for (let l in workIndexLines) {
 		if (workIndexLines[l].includes("region top right")) {
@@ -191,7 +260,7 @@ exports.fixupIndex = async () => {
 
 exports.restoreIndex = async () => {
 	// if we read in data
-	if (indexData.length > 1) {
+	if (indexData.length > 0) {
 		//write out saved index.html
 		await fs.promises.writeFile(indexFile, indexData, { flush: true });
 		// write out saved custom.css

tests/e2e/helpers/weather-functions.js

@@ -4,12 +4,12 @@ const helpers = require("./global-setup");
 exports.getText = async (element, result) => {
 	const elem = await helpers.waitForElement(element);
 	expect(elem).not.toBeNull();
-	expect(
-		elem.textContent
-			.trim()
-			.replace(/(\r\n|\n|\r)/gm, "")
-			.replace(/[ ]+/g, " ")
-	).toBe(result);
+	const rawText = await elem.textContent();
+	const content = (rawText ?? "")
+		.trim()
+		.replace(/(\r\n|\n|\r)/gm, "")
+		.replace(/[ ]+/g, " ");
+	expect(content).toBe(result);
 	return true;
 };