@cronn/element-snapshot 0.24.0 → 0.26.0

package/README.md

@@ -52,10 +52,8 @@ test("matches element snapshot", async ({ page }) => {
 {
   "main": [
     {
-      "heading": {
-        "name": "List",
-        "level": 1
-      }
+      "heading": "List",
+      "level": 1
     },
     {
       "list": [

package/dist/browser-lib.iife.js

@@ -160,7 +160,8 @@
 		"table",
 		"tablist",
 		"tabpanel",
-		"term"
+		"term",
+		"tree"
 	]);
 	//#endregion
 	//#region src/browser/container.ts
@@ -261,7 +262,8 @@
 		rowgroup: isWithinTableOrGrid,
 		rowheader: isWithinTableRowOrGridRow,
 		tab: isWithinTablist,
-		term: isWithinDescriptionList
+		term: isWithinDescriptionList,
+		treeitem: isWithinTree
 	};
 	const INPUT_ROLES = {
 		button: "button",
@@ -371,6 +373,9 @@
 	function isWithinTablist(element) {
 		return isWithinElement(element, roleSelector("tablist"));
 	}
+	function isWithinTree(element) {
+		return isWithinElement(element, roleSelector("tree"));
+	}
 	//#endregion
 	//#region src/browser/text.ts
 	function snapshotTextNode(textNode) {
@@ -424,7 +429,11 @@
 		"rowheader",
 		"tab"
 	]);
-	const contextBasedNameResolvers = [resolveImageName, resolveLegendName];
+	const contextBasedNameResolvers = [
+		resolveImageName,
+		resolveLegendName,
+		resolveTreeItemName
+	];
 	function resolveAccessibleName(element) {
 		const role = parseElementRole(element);
 		if (role === void 0 || prohibitsNaming.has(role)) return;
@@ -456,6 +465,10 @@
 		if (element instanceof HTMLImageElement) return stringAttribute(element.alt);
 		if (role === "img") return resolveAccessibleTextContent(element);
 	}
+	function resolveTreeItemName(element, role) {
+		if (role !== "treeitem") return;
+		return resolveAccessibleTextContent(element, Array.from(element.querySelectorAll(roleSelector("group"))));
+	}
 	//#endregion
 	//#region src/browser/state.ts
 	function disableableAttributes(element) {
@@ -464,6 +477,13 @@
 	function selectableAttributes(element) {
 		return { selected: booleanAttribute(element instanceof HTMLOptionElement ? element.hasAttribute("selected") : false) ?? booleanAttribute(element.ariaSelected) };
 	}
+	function expandableAttributes(element) {
+		return { expanded: booleanAttribute(element.ariaExpanded) };
+	}
+	const checkedValues = /* @__PURE__ */ new Set(["mixed"]);
+	function checkableAttributes(element) {
+		return { checked: booleanOrEnumAttribute(element.ariaChecked, checkedValues) };
+	}
 	function inputStateAttributes(element) {
 		const supportsHtmlAttributes = isNativeInputElement(element);
 		const readonly = booleanAttribute(supportsHtmlAttributes ? element.hasAttribute("readonly") : false);
@@ -487,7 +507,7 @@
 			name: resolveAccessibleName(element),
 			attributes: {
 				...disableableAttributes(element),
-				expanded: booleanAttribute(element.ariaExpanded),
+				...expandableAttributes(element),
 				pressed: booleanOrEnumAttribute(element.ariaPressed, pressedValues)
 			},
 			children: snapshotChildren(element)
@@ -550,7 +570,7 @@
 		return element.checked ? true : void 0;
 	}
 	function resolvePlaceholder(element) {
-		if (element instanceof HTMLSelectElement || element instanceof HTMLButtonElement) return;
+		if (!(element instanceof HTMLInputElement) && !(element instanceof HTMLTextAreaElement)) return;
 		return stringAttribute(element.placeholder);
 	}
 	//#endregion
@@ -564,6 +584,7 @@
 			attributes: {
 				value: resolveValue$1(element),
 				...snapshotCommonInputAttributes(element),
+				...expandableAttributes(element),
 				options
 			},
 			children: []
@@ -571,12 +592,11 @@
 	}
 	function isCombobox(element) {
 		if (element instanceof HTMLSelectElement) return element.role === null || element.role === "combobox";
-		if (element instanceof HTMLInputElement || element instanceof HTMLButtonElement) return element.role === "combobox";
-		return false;
+		return element.role === "combobox";
 	}
 	function resolveValue$1(element) {
-		if (element instanceof HTMLButtonElement) return resolveAccessibleTextContent(element);
 		if (element instanceof HTMLInputElement) return resolveInputValue(element);
+		if (!(element instanceof HTMLSelectElement)) return resolveAccessibleTextContent(element);
 		const selectedLabels = Array.from(element.selectedOptions).map((option) => option.label);
 		if (selectedLabels.length === 0) return;
 		if (selectedLabels.length === 1) return selectedLabels.at(0);
@@ -787,6 +807,21 @@
 		return value;
 	}
 	//#endregion
+	//#region src/browser/tree.ts
+	function snapshotTreeItem(element) {
+		return {
+			role: "treeitem",
+			name: resolveAccessibleName(element),
+			attributes: {
+				...disableableAttributes(element),
+				...checkableAttributes(element),
+				...selectableAttributes(element),
+				...expandableAttributes(element)
+			},
+			children: snapshotChildren(element)
+		};
+	}
+	//#endregion
 	//#region src/browser/element.ts
 	const ROLE_SNAPSHOTS = {
 		alertdialog: snapshotDialogWithRole("alertdialog"),
@@ -813,7 +848,8 @@
 		slider: snapshotInput,
 		spinbutton: snapshotInput,
 		tab: snapshotTab,
-		textbox: snapshotInput
+		textbox: snapshotInput,
+		treeitem: snapshotTreeItem
 	};
 	function snapshotElement(element) {
 		return snapshotNodeRecursive(element);

package/dist/index.d.mts

@@ -21,6 +21,13 @@ interface DisableableAttributes {
 interface SelectableAttributes {
   selected?: boolean;
 }
+interface ExpandableAttributes {
+  expanded?: boolean;
+}
+interface CheckableAttributes {
+  checked?: CheckedValue;
+}
+type CheckedValue = true | "mixed";
 interface DiscribableAttributes {
   description?: string;
 }
@@ -32,8 +39,7 @@ interface InputStateAttributes extends DisableableAttributes {
 //#endregion
 //#region src/types/elements/button.d.ts
 interface ButtonSnapshot extends GenericElementSnapshot<"button", ButtonAttributes> {}
-interface ButtonAttributes extends DisableableAttributes {
-  expanded?: boolean;
+interface ButtonAttributes extends DisableableAttributes, ExpandableAttributes {
   pressed?: PressedValue;
 }
 type PressedValue = true | "mixed";
@@ -42,7 +48,7 @@ type PressedValue = true | "mixed";
 type SetValues<TSet> = TSet extends Set<infer TValue> ? TValue : never;
 //#endregion
 //#region src/types/elements/container.d.ts
-declare const CONTAINER_ROLES: Set<"alert" | "article" | "banner" | "blockquote" | "code" | "complementary" | "contentinfo" | "definition" | "deletion" | "descriptionlist" | "emphasis" | "form" | "grid" | "insertion" | "label" | "list" | "listbox" | "listitem" | "log" | "main" | "mark" | "menu" | "navigation" | "note" | "paragraph" | "row" | "rowgroup" | "search" | "status" | "strong" | "subscript" | "superscript" | "table" | "tablist" | "tabpanel" | "term">;
+declare const CONTAINER_ROLES: Set<"alert" | "article" | "banner" | "blockquote" | "code" | "complementary" | "contentinfo" | "definition" | "deletion" | "descriptionlist" | "emphasis" | "form" | "grid" | "insertion" | "label" | "list" | "listbox" | "listitem" | "log" | "main" | "mark" | "menu" | "navigation" | "note" | "paragraph" | "row" | "rowgroup" | "search" | "status" | "strong" | "subscript" | "superscript" | "table" | "tablist" | "tabpanel" | "term" | "tree">;
 interface ContainerSnapshot extends GenericElementSnapshot<ContainerRole> {}
 type ContainerRole = SetValues<typeof CONTAINER_ROLES>;
 interface RegionSnapshot extends GenericElementSnapshot<"region"> {}
@@ -80,7 +86,7 @@ interface CommonInputAttributes extends InputStateAttributes, DiscribableAttribu
   placeholder?: string;
 }
 interface ComboboxSnapshot extends GenericElementSnapshot<"combobox", ComboboxAttributes> {}
-interface ComboboxAttributes extends CommonInputAttributes {
+interface ComboboxAttributes extends CommonInputAttributes, ExpandableAttributes {
   value?: string | Array<string>;
   options: Array<OptionSnapshot>;
 }
@@ -132,9 +138,13 @@ interface TextSnapshot {
   name: string;
 }
 //#endregion
+//#region src/types/elements/tree.d.ts
+interface TreeItemSnapshot extends GenericElementSnapshot<"treeitem", TreeItemAttributes> {}
+interface TreeItemAttributes extends CheckableAttributes, DisableableAttributes, ExpandableAttributes, SelectableAttributes {}
+//#endregion
 //#region src/types/role.d.ts
 type TextRole = "text";
-type ElementRole = "button" | "group" | "heading" | "img" | "link" | "menuitem" | "option" | "progressbar" | "radiogroup" | "region" | "separator" | "tab" | CellRole | ContainerRole | DialogRole | InputRole;
+type ElementRole = "button" | "group" | "heading" | "img" | "link" | "menuitem" | "option" | "progressbar" | "radiogroup" | "region" | "separator" | "tab" | "treeitem" | CellRole | ContainerRole | DialogRole | InputRole;
 //#endregion
 //#region src/types/snapshot.d.ts
 type NodeRole = ElementRole | TextRole;
@@ -148,7 +158,7 @@ interface GenericElementSnapshot<TRole extends NodeRole = NodeRole, TAttributes
   attributes: TAttributes;
   children: Array<NodeSnapshot>;
 }
-type ElementSnapshot = ButtonSnapshot | CellSnapshot | ColumnHeaderSnapshot | ComboboxSnapshot | ContainerSnapshot | DialogSnapshot | GroupSnapshot | HeadingSnapshot | ImageSnapshot | InputSnapshot | LinkSnapshot | OptionSnapshot | ProgressbarSnapshot | RegionSnapshot | TabSnapshot | MenuItemSnapshot | RadioGroupSnapshot | SeparatorSnapshot;
+type ElementSnapshot = ButtonSnapshot | CellSnapshot | ColumnHeaderSnapshot | ComboboxSnapshot | ContainerSnapshot | DialogSnapshot | GroupSnapshot | HeadingSnapshot | ImageSnapshot | InputSnapshot | LinkSnapshot | OptionSnapshot | ProgressbarSnapshot | RegionSnapshot | TabSnapshot | MenuItemSnapshot | RadioGroupSnapshot | SeparatorSnapshot | TreeItemSnapshot;
 //#endregion
 //#region src/utils/filter.d.ts
 type FilterPredicate = (snapshot: NodeSnapshot) => boolean;
@@ -269,4 +279,4 @@ declare function excludeRole<TRole extends NodeRole>(role: TRole | Array<TRole>)
  */
 declare function getTextContent(snapshots: Array<NodeSnapshot>): string;
 //#endregion
-export { type ButtonSnapshot, type CellSnapshot, type ColumnHeaderSnapshot, type ComboboxSnapshot, type ContainerSnapshot, type DialogSnapshot, type ElementRole, type ElementSnapshot, type ElementSnapshotMatchers, type GroupSnapshot, type HeadingSnapshot, type ImageSnapshot, type InputSnapshot, type LinkSnapshot, type MarkdownTableSnapshotOptions, type MatchMarkdownTableSnapshotFileOptions, type MatchSemanticSnapshotFileOptions, type MenuItemSnapshot, type NodeRole, type NodeSnapshot, type OptionSnapshot, type ProgressbarSnapshot, type RadioGroupSnapshot, type RegionSnapshot, type SemanticSnapshotOptions, type SeparatorSnapshot, type SnapshotByRole, type TabSnapshot, type TextSnapshot, defineElementSnapshotMatchers, excludeRole, filter, filterByRole, getTextContent, includeRole, markdownTableSnapshot, rawSnapshot, semanticSnapshot };
+export { type ButtonSnapshot, type CellSnapshot, type ColumnHeaderSnapshot, type ComboboxSnapshot, type ContainerSnapshot, type DialogSnapshot, type ElementRole, type ElementSnapshot, type ElementSnapshotMatchers, type GroupSnapshot, type HeadingSnapshot, type ImageSnapshot, type InputSnapshot, type LinkSnapshot, type MarkdownTableSnapshotOptions, type MatchMarkdownTableSnapshotFileOptions, type MatchSemanticSnapshotFileOptions, type MenuItemSnapshot, type NodeRole, type NodeSnapshot, type OptionSnapshot, type ProgressbarSnapshot, type RadioGroupSnapshot, type RegionSnapshot, type SemanticSnapshotOptions, type SeparatorSnapshot, type SnapshotByRole, type TabSnapshot, type TextSnapshot, type TreeItemSnapshot, defineElementSnapshotMatchers, excludeRole, filter, filterByRole, getTextContent, includeRole, markdownTableSnapshot, rawSnapshot, semanticSnapshot };

package/dist/index.mjs

@@ -140,8 +140,7 @@ var SemanticSnapshotTransformer = class {
 			return this.transformedSnapshot(role, children.length === 1 ? children.at(0) : children);
 		}
 		const { role, name, attributes, children } = normalizedSnapshot;
-		return this.transformedSnapshot(role, {
-			name: name.length === 0 ? void 0 : name,
+		return this.transformedSnapshot(role, name, {
 			...attributes,
 			children: children.length === 0 ? void 0 : children
 		});
@@ -185,8 +184,11 @@ var SemanticSnapshotTransformer = class {
 		}
 		return attributes[name];
 	}
-	transformedSnapshot(role, content) {
-		return { [role]: content };
+	transformedSnapshot(role, nameOrContent, additionalProperties) {
+		return {
+			[role]: nameOrContent,
+			...additionalProperties
+		};
 	}
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronn/element-snapshot",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "Element snapshots for Playwright",
   "homepage": "https://cronn.github.io/file-snapshots/playwright/element-snapshots/",
   "bugs": {
@@ -31,24 +31,24 @@
   },
   "devDependencies": {
     "@arethetypeswrong/core": "0.18.5",
-    "@playwright/test": "1.61.1",
-    "@types/node": "24.13.2",
+    "@playwright/test": "1.62.1",
+    "@types/node": "24.13.3",
     "@typescript/native": "npm:typescript@^7.0.2",
     "@vitest/coverage-v8": "4.1.10",
-    "eslint": "10.7.0",
+    "eslint": "10.8.0",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-check-file": "3.3.1",
+    "eslint-plugin-check-file": "3.3.2",
     "eslint-plugin-unused-imports": "4.4.1",
-    "publint": "0.3.21",
+    "publint": "0.3.22",
     "rimraf": "6.1.3",
-    "tsdown": "0.22.7",
+    "tsdown": "0.22.14",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-eslint": "8.63.0",
+    "typescript-eslint": "8.65.0",
     "vitest": "4.1.10",
-    "node": "runtime:24.18.0",
-    "@cronn/shared-configs": "0.0.0",
+    "node": "runtime:24.18.1",
     "@cronn/vitest-file-snapshots": "2.1.2",
-    "@cronn/test-utils": "0.0.0"
+    "@cronn/test-utils": "0.0.0",
+    "@cronn/shared-configs": "0.0.0"
   },
   "peerDependencies": {
     "@playwright/test": "^1.55"
@@ -56,12 +56,12 @@
   "devEngines": {
     "packageManager": {
       "name": "pnpm",
-      "version": "11.13.1",
+      "version": "11.18.0",
       "onFail": "download"
     },
     "runtime": {
       "name": "node",
-      "version": "24.18.0",
+      "version": "24.18.1",
       "onFail": "download"
     }
   },