@cronn/element-snapshot 0.14.0 → 0.15.0

package/dist/browser-lib.iife.js

@@ -1,7 +1,5 @@
 (function() {
-
-
-//#region src/browser/attribute.ts
+	//#region src/browser/attribute.ts
 	function stringAttribute(value) {
 		return value !== null && value !== "" ? value : void 0;
 	}
@@ -22,15 +20,16 @@
 		if (referenceId === null) return null;
 		return element.ownerDocument.getElementById(referenceId);
 	}
-
-//#endregion
-//#region src/browser/children.ts
-	function snapshotChildren(node, excludedNodes = []) {
-		return Array.from(node.childNodes).map((childNode) => snapshotNodeRecursive(childNode, excludedNodes)).filter((childSnapshot) => childSnapshot !== null).flat();
+	//#endregion
+	//#region src/utils/factories.ts
+	function textSnapshot(name) {
+		return {
+			role: "text",
+			name
+		};
 	}
-
-//#endregion
-//#region src/utils/guards.ts
+	//#endregion
+	//#region src/utils/guards.ts
 	function isTextSnapshot(snapshot) {
 		return hasRole("text", snapshot);
 	}
@@ -38,9 +37,8 @@
 		if (typeof role === "string") return role === snapshot.role;
 		return role.includes(snapshot.role);
 	}
-
-//#endregion
-//#region src/utils/filter.ts
+	//#endregion
+	//#region src/utils/filter.ts
 	function filter(options) {
 		const { predicate, snapshots, recurse = false } = options;
 		return snapshots.flatMap((snapshot) => {
@@ -63,24 +61,39 @@
 	function hasChildren(snapshot) {
 		return "children" in snapshot && snapshot.children.length > 0;
 	}
-
-//#endregion
-//#region src/utils/text.ts
-/**
+	//#endregion
+	//#region src/utils/text.ts
+	/**
 	* Aggregates and normalizes the text content of all provided snapshots
 	*/
 	function getTextContent(snapshots) {
-		return normalizeText(filter({
+		return mergeTexts(filter({
 			snapshots,
 			predicate: isTextSnapshot
-		}).map((textNode) => textNode.name).join(" "));
+		}));
 	}
 	function normalizeText(text) {
 		return text.replaceAll(/\s+/g, " ").trim();
 	}
-
-//#endregion
-//#region src/browser/text.ts
+	function mergeTexts(texts) {
+		return normalizeText(texts.map((textNode) => textNode.name).join(" "));
+	}
+	//#endregion
+	//#region src/browser/children.ts
+	function snapshotChildren(node, excludedNodes = []) {
+		return mergeConsecutiveTexts(Array.from(node.childNodes).map((childNode) => snapshotNodeRecursive(childNode, excludedNodes)).filter((childSnapshot) => childSnapshot !== null).flat());
+	}
+	function mergeConsecutiveTexts(children) {
+		return children.reduce((mergedChildren, child) => {
+			const lastMergedChildIndex = mergedChildren.length - 1;
+			const lastMergedChild = mergedChildren[lastMergedChildIndex];
+			if (lastMergedChild !== void 0 && isTextSnapshot(lastMergedChild) && isTextSnapshot(child)) mergedChildren[lastMergedChildIndex] = textSnapshot(mergeTexts([lastMergedChild, child]));
+			else mergedChildren.push(child);
+			return mergedChildren;
+		}, []);
+	}
+	//#endregion
+	//#region src/browser/text.ts
 	function snapshotTextNode(textNode) {
 		if (textNode.textContent === null) return null;
 		const normalizedText = normalizeText(textNode.textContent);
@@ -104,18 +117,16 @@
 		const textContent = getTextContent(children);
 		return textContent.length > 0 ? textContent : void 0;
 	}
-
-//#endregion
-//#region src/browser/name.ts
+	//#endregion
+	//#region src/browser/name.ts
 	function resolveAccessibleName(element, includeTextContent = true) {
 		const labelledByElement = resolveElementReference(element, "aria-labelledby");
 		if (labelledByElement !== null) return resolveAccessibleTextContent(labelledByElement);
 		if (element.ariaLabel !== null) return element.ariaLabel;
 		if (includeTextContent) return resolveAccessibleTextContent(element);
 	}
-
-//#endregion
-//#region src/browser/state.ts
+	//#endregion
+	//#region src/browser/state.ts
 	function disableableAttributes(element) {
 		return { disabled: booleanAttribute(isNativeInputElement(element) || element instanceof HTMLButtonElement ? element.hasAttribute("disabled") : false) ?? booleanAttribute(element.ariaDisabled) };
 	}
@@ -136,9 +147,8 @@
 	function isNativeInputElement(element) {
 		return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement;
 	}
-
-//#endregion
-//#region src/browser/button.ts
+	//#endregion
+	//#region src/browser/button.ts
 	const PRESSED_VALUES = new Set([
 		"true",
 		"mixed",
@@ -161,9 +171,8 @@
 		if (pressed === "mixed") return pressed;
 		return booleanAttribute(pressed === "true");
 	}
-
-//#endregion
-//#region src/browser/description.ts
+	//#endregion
+	//#region src/browser/description.ts
 	function discribableAttributes(element) {
 		return { description: resolveDescription(element) };
 	}
@@ -172,9 +181,8 @@
 		if (describedByElement !== null) return resolveAccessibleTextContent(describedByElement);
 		if (element.ariaDescription !== null) return element.ariaDescription;
 	}
-
-//#endregion
-//#region src/browser/container.ts
+	//#endregion
+	//#region src/browser/container.ts
 	const CONTAINER_ROLES = new Set([
 		"paragraph",
 		"list",
@@ -202,13 +210,15 @@
 		"alert",
 		"menu",
 		"tablist",
-		"tabpanel"
+		"tabpanel",
+		"label"
 	]);
+	const NAMEABLE_CONTAINER_ROLES = new Set(["label"]);
 	function snapshotContainer(role, element) {
 		const children = snapshotChildren(element);
 		return {
 			role,
-			name: resolveAccessibleName(element, false),
+			name: resolveAccessibleName(element, NAMEABLE_CONTAINER_ROLES.has(role)),
 			attributes: {},
 			children
 		};
@@ -216,9 +226,8 @@
 	function isContainerRole(role) {
 		return CONTAINER_ROLES.has(role);
 	}
-
-//#endregion
-//#region src/browser/selector.ts
+	//#endregion
+	//#region src/browser/selector.ts
 	function selectorList(...selectors) {
 		return selectors.join(",");
 	}
@@ -228,18 +237,16 @@
 	function attributeSelector(name, value) {
 		return `[${name}='${value}']`;
 	}
-
-//#endregion
-//#region src/browser/utils.ts
+	//#endregion
+	//#region src/browser/utils.ts
 	function getElementTagName(element) {
 		return element.tagName.toLowerCase();
 	}
 	function isWithinElement(element, containerSelector) {
 		return element.closest(containerSelector) !== null;
 	}
-
-//#endregion
-//#region src/browser/role.ts
+	//#endregion
+	//#region src/browser/role.ts
 	const ELEMENT_ROLES = {
 		main: "main",
 		nav: "navigation",
@@ -279,7 +286,9 @@
 		fieldset: "group",
 		progress: "progressbar",
 		hr: "separator",
-		img: "img"
+		img: "img",
+		label: "label",
+		legend: "label"
 	};
 	const CONTEXT_DEPENDENT_ROLES = {
 		banner: isTopLevelBanner,
@@ -397,9 +406,8 @@
 	function isWithinTablist(element) {
 		return isWithinElement(element, roleSelector("tablist"));
 	}
-
-//#endregion
-//#region src/browser/input.ts
+	//#endregion
+	//#region src/browser/input.ts
 	function snapshotInput(element) {
 		if (element instanceof HTMLInputElement) return snapshotInputElement(element);
 		if (element instanceof HTMLTextAreaElement) return snapshotTextareaElement(element);
@@ -462,9 +470,8 @@
 		if (element instanceof HTMLSelectElement || element instanceof HTMLButtonElement) return;
 		return stringAttribute(element.placeholder);
 	}
-
-//#endregion
-//#region src/browser/combobox.ts
+	//#endregion
+	//#region src/browser/combobox.ts
 	function snapshotCombobox(element) {
 		if (!isCombobox(element)) return null;
 		const options = snapshotOptions(element);
@@ -511,9 +518,8 @@
 			children: snapshotChildren(element)
 		};
 	}
-
-//#endregion
-//#region src/browser/dialog.ts
+	//#endregion
+	//#region src/browser/dialog.ts
 	function snapshotDialogWithRole(role) {
 		return (element) => snapshotDialog(role, element);
 	}
@@ -528,9 +534,8 @@
 			children: snapshotChildren(element)
 		};
 	}
-
-//#endregion
-//#region src/browser/group.ts
+	//#endregion
+	//#region src/browser/group.ts
 	function snapshotGroup(element) {
 		return {
 			role: "group",
@@ -552,9 +557,8 @@
 			children: snapshotChildren(element)
 		};
 	}
-
-//#endregion
-//#region src/browser/heading.ts
+	//#endregion
+	//#region src/browser/heading.ts
 	const LEVEL_REGEXP = /^H([1-6])$/;
 	function snapshotHeading(element) {
 		if (!(element instanceof HTMLHeadingElement)) return null;
@@ -568,9 +572,8 @@
 	function resolveLevel(element) {
 		return numericAttribute(LEVEL_REGEXP.exec(element.nodeName)?.at(1) ?? null);
 	}
-
-//#endregion
-//#region src/browser/image.ts
+	//#endregion
+	//#region src/browser/image.ts
 	function snapshotImage(element) {
 		const imageName = resolveImageName(element);
 		if (imageName === void 0) return null;
@@ -585,9 +588,8 @@
 		if (element instanceof HTMLImageElement) return stringAttribute(element.alt);
 		return resolveAccessibleName(element, true);
 	}
-
-//#endregion
-//#region src/browser/link.ts
+	//#endregion
+	//#region src/browser/link.ts
 	function snapshotLink(element) {
 		return {
 			role: "link",
@@ -599,9 +601,8 @@
 	function linkAttributes(element) {
 		return { url: stringAttribute(element.getAttribute("href")) };
 	}
-
-//#endregion
-//#region src/browser/list.ts
+	//#endregion
+	//#region src/browser/list.ts
 	function snapshotMenuitem(element) {
 		return {
 			role: "menuitem",
@@ -613,9 +614,8 @@
 			children: snapshotChildren(element)
 		};
 	}
-
-//#endregion
-//#region src/browser/progressbar.ts
+	//#endregion
+	//#region src/browser/progressbar.ts
 	function snapshotProgressbar(element) {
 		return {
 			role: "progressbar",
@@ -628,9 +628,8 @@
 		if (element instanceof HTMLProgressElement) return element.value;
 		return numericAttribute(element.ariaValueNow);
 	}
-
-//#endregion
-//#region src/browser/separator.ts
+	//#endregion
+	//#region src/browser/separator.ts
 	function snapshotSeparator(element) {
 		return {
 			role: "separator",
@@ -638,9 +637,8 @@
 			children: snapshotPresentationalChildren(element)
 		};
 	}
-
-//#endregion
-//#region src/browser/tab.ts
+	//#endregion
+	//#region src/browser/tab.ts
 	function snapshotTab(element) {
 		return {
 			role: "tab",
@@ -652,9 +650,8 @@
 			children: snapshotChildren(element)
 		};
 	}
-
-//#endregion
-//#region src/browser/table.ts
+	//#endregion
+	//#region src/browser/table.ts
 	const SORT_TYPES = new Set([
 		"ascending",
 		"descending",
@@ -668,9 +665,8 @@
 			children: snapshotChildren(element)
 		};
 	}
-
-//#endregion
-//#region src/browser/element.ts
+	//#endregion
+	//#region src/browser/element.ts
 	const ROLE_SNAPSHOTS = {
 		button: snapshotButton,
 		checkbox: snapshotInput,
@@ -739,10 +735,8 @@
 		const cssStyles = window.getComputedStyle(element);
 		return cssStyles.display === "none" || cssStyles.visibility === "hidden" || cssStyles.visibility === "collapse";
 	}
-
-//#endregion
-//#region src/browser-lib.ts
+	//#endregion
+	//#region src/browser-lib.ts
 	window.snapshotElement = snapshotElement;
-
-//#endregion
-})();
+	//#endregion
+})();

package/dist/index.d.mts

@@ -51,7 +51,7 @@ interface OptionAttributes {
 }
 //#endregion
 //#region src/browser/container.d.ts
-declare const CONTAINER_ROLES: Set<"paragraph" | "list" | "listitem" | "listbox" | "article" | "banner" | "complementary" | "contentinfo" | "form" | "main" | "navigation" | "region" | "search" | "descriptionlist" | "term" | "definition" | "table" | "grid" | "rowgroup" | "row" | "rowheader" | "cell" | "gridcell" | "alert" | "menu" | "tablist" | "tabpanel">;
+declare const CONTAINER_ROLES: Set<"paragraph" | "list" | "listitem" | "listbox" | "article" | "banner" | "complementary" | "contentinfo" | "form" | "main" | "navigation" | "region" | "search" | "descriptionlist" | "term" | "definition" | "table" | "grid" | "rowgroup" | "row" | "rowheader" | "cell" | "gridcell" | "alert" | "menu" | "tablist" | "tabpanel" | "label">;
 interface ContainerSnapshot extends GenericElementSnapshot<ContainerRole> {}
 type ContainerRole = SetValues<typeof CONTAINER_ROLES>;
 //#endregion
@@ -126,6 +126,20 @@ interface GenericElementSnapshot<TRole extends NodeRole = NodeRole, TAttributes
 }
 type SetValues<TSet> = TSet extends Set<infer TValue> ? TValue : never;
 //#endregion
+//#region src/playwright/markdown-table.d.ts
+interface MarkdownTableSnapshotOptions {
+  /**
+   * Show sort indicator for column headers
+   *
+   * @default true
+   */
+  showSortIndicator?: boolean;
+}
+/**
+ * Creates a Markdown table snapshot from a table or grid element
+ */
+declare function markdownTableSnapshot(locator: Locator, options?: MarkdownTableSnapshotOptions): Promise<string>;
+//#endregion
 //#region src/types/snapshot.d.ts
 type SnapshotByRole<TRole extends NodeRole> = NodeSnapshot & {
   role: TRole;
@@ -230,4 +244,4 @@ declare function excludeRole<TRole extends NodeRole>(role: TRole | Array<TRole>)
  */
 declare function getTextContent(snapshots: Array<NodeSnapshot>): string;
 //#endregion
-export { type ButtonSnapshot, type ColumnheaderSnapshot, type ComboboxSnapshot, type ContainerSnapshot, type DialogSnapshot, type ElementRole, type ElementSnapshot, type GroupSnapshot, type HeadingSnapshot, type ImageSnapshot, type InputSnapshot, type LinkSnapshot, type MenuitemSnapshot, type NodeRole, type NodeSnapshot, type OptionSnapshot, type ProgressbarSnapshot, type RadiogroupSnapshot, type SeparatorSnapshot, type TabSnapshot, type TextSnapshot, excludeRole, filter, filterByRole, getTextContent, includeRole, snapshotElement, snapshotElementRaw };
+export { type ButtonSnapshot, type ColumnheaderSnapshot, type ComboboxSnapshot, type ContainerSnapshot, type DialogSnapshot, type ElementRole, type ElementSnapshot, type GroupSnapshot, type HeadingSnapshot, type ImageSnapshot, type InputSnapshot, type LinkSnapshot, type MarkdownTableSnapshotOptions, type MenuitemSnapshot, type NodeRole, type NodeSnapshot, type OptionSnapshot, type ProgressbarSnapshot, type RadiogroupSnapshot, type SeparatorSnapshot, type SnapshotByRole, type TabSnapshot, type TextSnapshot, excludeRole, filter, filterByRole, getTextContent, includeRole, markdownTableSnapshot, snapshotElement, snapshotElementRaw };

package/dist/index.mjs

@@ -1,34 +1,6 @@
+import { markdownTable } from "markdown-table";
 import path from "node:path";
 import { packageDirectory } from "package-directory";
-
-//#region src/playwright/proxy.ts
-var ElementSnapshotProxy = class {
-	page;
-	constructor(page) {
-		this.page = page;
-	}
-	async snapshotElement(locator) {
-		if (!await this.isLibraryLoaded()) await this.loadLibrary();
-		return await locator.evaluate((element) => {
-			return window.snapshotElement(element);
-		});
-	}
-	async isLibraryLoaded() {
-		return await this.page.evaluate(() => typeof window.snapshotElement === "function");
-	}
-	async loadLibrary() {
-		const packageRootDir = await this.resolvePackageRootDir();
-		const libPath = path.resolve(packageRootDir, "dist", "browser-lib.iife.js");
-		await this.page.addScriptTag({ path: libPath });
-	}
-	async resolvePackageRootDir() {
-		const packageDir = await packageDirectory({ cwd: import.meta.dirname });
-		if (packageDir === void 0) throw new Error("Unable to resolve root directory of package");
-		return packageDir;
-	}
-};
-
-//#endregion
 //#region src/utils/guards.ts
 function isTextSnapshot(snapshot) {
 	return hasRole("text", snapshot);
@@ -41,7 +13,6 @@ function isEmpty(value) {
 	if (typeof value === "string" || Array.isArray(value)) return value.length === 0;
 	return Object.keys(value).length === 0;
 }
-
 //#endregion
 //#region src/utils/predicates.ts
 /**
@@ -56,7 +27,6 @@ function includeRole(role) {
 function excludeRole(role) {
 	return (snapshot) => !hasRole(role, snapshot);
 }
-
 //#endregion
 //#region src/utils/filter.ts
 function filter(options) {
@@ -91,7 +61,50 @@ function filterByRole(role, snapshots) {
 function hasChildren(snapshot) {
 	return "children" in snapshot && snapshot.children.length > 0;
 }
-
+//#endregion
+//#region src/utils/text.ts
+/**
+* Aggregates and normalizes the text content of all provided snapshots
+*/
+function getTextContent(snapshots) {
+	return mergeTexts(filter({
+		snapshots,
+		predicate: isTextSnapshot
+	}));
+}
+function normalizeText(text) {
+	return text.replaceAll(/\s+/g, " ").trim();
+}
+function mergeTexts(texts) {
+	return normalizeText(texts.map((textNode) => textNode.name).join(" "));
+}
+//#endregion
+//#region src/playwright/proxy.ts
+var ElementSnapshotProxy = class {
+	page;
+	constructor(page) {
+		this.page = page;
+	}
+	async snapshotElement(locator) {
+		if (!await this.isLibraryLoaded()) await this.loadLibrary();
+		return await locator.evaluate((element) => {
+			return window.snapshotElement(element);
+		});
+	}
+	async isLibraryLoaded() {
+		return await this.page.evaluate(() => typeof window.snapshotElement === "function");
+	}
+	async loadLibrary() {
+		const packageRootDir = await this.resolvePackageRootDir();
+		const libPath = path.resolve(packageRootDir, "dist", "browser-lib.iife.js");
+		await this.page.addScriptTag({ path: libPath });
+	}
+	async resolvePackageRootDir() {
+		const packageDir = await packageDirectory({ cwd: import.meta.dirname });
+		if (packageDir === void 0) throw new Error("Unable to resolve root directory of package");
+		return packageDir;
+	}
+};
 //#endregion
 //#region src/playwright/transformer.ts
 var ElementSnapshotTransformer = class {
@@ -190,7 +203,6 @@ var ElementSnapshotTransformer = class {
 		return { [role]: content };
 	}
 };
-
 //#endregion
 //#region src/playwright/snapshot.ts
 /**
@@ -216,21 +228,55 @@ async function snapshotElement(locator, options) {
 async function snapshotElementRaw(locator) {
 	return await new ElementSnapshotProxy(locator.page()).snapshotElement(locator);
 }
-
 //#endregion
-//#region src/utils/text.ts
+//#region src/playwright/markdown-table.ts
+const tableRoles = ["table", "grid"];
+const cellRoles = [
+	"rowheader",
+	"cell",
+	"gridcell"
+];
+const sortIndicators = {
+	ascending: "⯅",
+	descending: "⯆",
+	other: "⯁"
+};
 /**
-* Aggregates and normalizes the text content of all provided snapshots
+* Creates a Markdown table snapshot from a table or grid element
 */
-function getTextContent(snapshots) {
-	return normalizeText(filter({
-		snapshots,
-		predicate: isTextSnapshot
-	}).map((textNode) => textNode.name).join(" "));
+async function markdownTableSnapshot(locator, options = {}) {
+	const { columnHeaders, rows } = parseTable(await snapshotElementRaw(locator), options);
+	return markdownTable([columnHeaders, ...rows]);
 }
-function normalizeText(text) {
-	return text.replaceAll(/\s+/g, " ").trim();
+function parseTable(snapshot, options) {
+	const { showSortIndicator = true } = options;
+	const tableOrGridResult = filter({
+		predicate: includeRole(tableRoles),
+		snapshots: snapshot
+	});
+	if (tableOrGridResult.length > 1) throw new Error("Multiple tables or grids found");
+	const [tableOrGrid] = tableOrGridResult;
+	if (tableOrGrid === void 0) throw new Error("No table or grid found");
+	const [headerRow, ...bodyRows] = filterByRole("row", tableOrGrid.children);
+	if (headerRow === void 0) throw new Error("No header row found");
+	const columnHeaders = filterByRole("columnheader", headerRow.children);
+	if (columnHeaders.length === 0) throw new Error("No column headers found");
+	return {
+		columnHeaders: columnHeaders.map((columnHeader) => getColumnHeaderText(columnHeader, showSortIndicator)),
+		rows: bodyRows.map(getCellTexts)
+	};
+}
+function getColumnHeaderText(columnHeader, showSortIndicator) {
+	const headerText = getTextContent([columnHeader]);
+	const sortType = columnHeader.attributes.sort;
+	if (!showSortIndicator || sortType === void 0) return headerText;
+	return `${headerText} ${sortIndicators[sortType]}`;
+}
+function getCellTexts(row) {
+	return filter({
+		predicate: includeRole(cellRoles),
+		snapshots: row.children
+	}).map((cell) => getTextContent(cell.children));
 }
-
 //#endregion
-export { excludeRole, filter, filterByRole, getTextContent, includeRole, snapshotElement, snapshotElementRaw };
+export { excludeRole, filter, filterByRole, getTextContent, includeRole, markdownTableSnapshot, snapshotElement, snapshotElementRaw };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronn/element-snapshot",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Element snapshots for Playwright",
   "bugs": {
     "url": "https://github.com/cronn/file-snapshots/issues"
@@ -47,20 +47,20 @@
     "@arethetypeswrong/core": "0.18.2",
     "@playwright/test": "1.58.2",
     "@trivago/prettier-plugin-sort-imports": "6.0.2",
-    "@types/node": "24.11.0",
-    "@typescript/native-preview": "7.0.0-dev.20260302.1",
+    "@types/node": "24.12.0",
+    "@typescript/native-preview": "7.0.0-dev.20260309.1",
     "@vitest/coverage-v8": "4.0.18",
-    "eslint": "10.0.2",
+    "eslint": "10.0.3",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-check-file": "3.3.1",
     "eslint-plugin-unused-imports": "4.4.1",
     "prettier": "3.8.1",
     "publint": "0.3.18",
-    "tsdown": "0.20.3",
+    "tsdown": "0.21.1",
     "typescript-eslint": "8.56.1",
     "vitest": "4.0.18",
-    "@cronn/shared-configs": "0.0.0",
     "@cronn/playwright-file-snapshots": "1.0.1",
+    "@cronn/shared-configs": "0.0.0",
     "@cronn/test-utils": "0.0.0",
     "@cronn/vitest-file-snapshots": "1.0.1"
   },