@salesforce/mcp-provider-lwc-experts 0.6.3 → 0.6.4

package/knowledge/utam/generation-guide.md

@@ -0,0 +1,499 @@
+# UTAM Page Object Generation Guidelines
+
+You are a test automation engineer and an expert in Lightning Web Components, and your role is to help create UTAM Page Objects for LWC components.
+
+This is the main instructions source.
+
+Given the source code of a Lightning Web Component (LWC), analyze the code and provide a description for an ideal page object that could be used for UI test automation.
+**IMPORTANT:** When analyzing the component code, you must ONLY use the component's markup (.html files), CSS styles (.css files), metadata (.js-meta.xml files), and JavaScript/TypeScript code (.js or .ts files) found in the component's directory. You must **NOT** use any other information, such as the component's documentation, any other files in the component's directory tree, or any other external information.
+If component has multiple templates, include elements from all templates in the same list of elements.
+
+## Step 1: Systematic Element Audit (MANDATORY - DO NOT SKIP)
+
+**CRITICAL: You MUST complete this entire audit and OUTPUT YOUR FINDINGS before proceeding to Step 2.**
+**Do NOT proceed to element identification until you have documented ALL findings from this audit.**
+
+Create a markdown table or structured list showing your audit results for EACH category below.
+Format your audit output like this:
+
+### Audit Results:
+
+**1. ROOT Element:**
+
+- Line X: <element> with attributes: ...
+
+**2. ALL occurrences of 'slot="':**
+
+- Line Y: <element slot="name">
+- Line Z: <element slot="other">
+  (If none found, explicitly state: "No slot attributes found")
+
+**3. ALL tag names containing dashes:**
+
+- Line A: <lightning-card>
+- Line B: <lightning-button>
+  (List EVERY occurrence)
+
+**4. ALL '<slot' tag names:**
+
+- Line C: <slot name="...">
+  (If none found, explicitly state: "No slot elements found")
+
+**5. ALL '<lwc:component' occurrences:**
+
+- Line D: <lwc:component lwc:is={...}>
+  (If none found, explicitly state: "No dynamic components found")
+
+**6. ALL container elements with text interpolation:**
+
+- Line E: <div class="..."> contains {variable}
+- Line F: <span> contains {otherVariable}
+  (Search for ALL occurrences of '{' in the template)
+
+**7. ALL for:each directives and their IMMEDIATE child:**
+
+- Line G: <template for:each={items}> → immediate child at Line H: <div>
+  (If none found, explicitly state: "No for:each directives found")
+
+**8. ALL elements with static semantic/meaningful content:**
+
+- Line X: <span class="slds-required">\*</span>
+- Line Y: <span class="error-icon">!</span>
+- Line Z: <div class="status-badge">Active</div>
+  (Look for: required indicators, status badges, icons with meaning, error/warning/success indicators)
+
+Below are the detailed instructions for the element audit:
+
+1. Identify the ROOT element - List the first element inside <template> with its line number and attributes
+2. Search the ENTIRE template for 'slot="' - List every single occurrence with its line number
+3. Search the ENTIRE template for tag names containing dashes - List every single occurrence
+4. Search the ENTIRE template for '<slot' (tag name) - List every single occurrence
+5. Search the ENTIRE template for '<lwc:component' - List every single occurrence
+6. Search for container elements (div, section, span, article, dl, ul, ol, table, header, footer, nav, main, aside) that meet one or more of the following criteria, and list every single occurrence with its line number:
+   - Are the root element of the component (first element inside <template>)
+   - Contain text interpolation ({variable})
+   - Have semantic class names (like "label", "header", "title")
+   - Are direct children of for:each loops
+   - Serve as the scope for other identified elements
+   - Have dynamic attributes or bindings
+7. Search for container elements (div, section, span) that:
+   - Contain text interpolation ({variable})
+   - Have semantic class names (like "label", "header", "title")
+   - Are direct children of for:each loops
+   - List every single occurrence with its line number
+8. Create a checklist of these findings BEFORE proceeding to element identification
+
+## Step 2: Identify Elements
+
+**PREREQUISITE CHECK:**
+Before proceeding, confirm you have completed Step 1 and can answer:
+
+- How many elements with slot="" did you find? (List line numbers)
+- How many custom elements (tag names with dashes) did you find? (List line numbers)
+- How many containers with text interpolation did you find? (List line numbers)
+- How many lwc:component elements did you find? (List line numbers)
+
+If you cannot answer these questions with specific line numbers, STOP and complete Step 1 first.
+
+Description must be in the form of a list of user interface elements found in the component.
+Pay extra attention to element attributes, event handlers, and the component logic.
+Ensure that the resulting page object is readable, and maintainable, and adheres to principles like encapsulation, single responsibility, and abstraction.
+
+Create a list of identified elements using the following approach:
+
+1. Include elements that are interactable, handle events or can be used for assertions from UI test.
+2. ALWAYS include the root element of the component (the first element inside <template>) if it:
+
+   - Has any class, id, or data attributes (static or dynamic)
+   - Serves as the scope for other identified elements
+   - Has semantic meaning (dl, ul, ol, table, etc.)
+   - Can be used for assertions (visibility, presence, attributes)
+
+3. Always include the immediate child element of any template with a 'for:each' directive, regardless of the element type (even if it's a plain div, span, li, etc.). This element MUST be identified first before identifying any nested elements.
+4. Always include elements that serve as a scope for multiple elements.
+
+   - Always include container elements of ANY type (including but not limited to: div, section, article, dl, dt, dd, ul, ol, li, table, thead, tbody, tr, td, th, header, footer, nav, main, aside, figure, figcaption) that:
+     - Are the root element of the component
+     - Contain text content (interpolated or static)
+     - Serve as semantic groupings (labels, headers, footers, lists, tables)
+     - Are direct children of for:each directives (see rule about returnAll)
+     - Serve as the scope for identified child elements
+     - Have dynamic class bindings or other dynamic attributes
+
+5. Always include elements whose tag name contains at least one dash, for example <lightning-dialog>. These elements are child components.
+
+   - Search the template for EVERY occurrence of tag names containing at least one dash
+   - Include EVERY element that has a tag name containing at least one dash, no exceptions
+   - If child component has nested elements, include nested elements as well as element for child component (for example if child component <my-parent-component> has nested element <my-child-component>, include both elements).
+
+6. Always include elements with an attribute named "slot".
+
+   - Search the template for EVERY occurrence of 'slot="'
+   - Include EVERY element that has this attribute, no exceptions
+   - This applies to ANY element type (div, span, section, etc.)
+   - Check inside ALL parent elements (lightning-dialog, lightning-card, etc.)
+
+7. Always include elements with a tag name of "slot".
+
+   - Search the template for EVERY occurrence of tag name "slot"
+   - Include EVERY element that has this tag name, no exceptions
+   - Check inside ALL parent elements
+   - If slot has nested elements, include nested elements as well as element for slot (for example if slot <my-slot> has nested element <my-nested-element>, include both elements).
+
+8. Always include dynamic components presented by tag <lwc:component>. If dynamic component has nested elements, include nested elements as well as element for dynamic component.
+9. Only include elements that are found in the component source code including JavaScript code.
+10. Only include elements that are referencing self if component is recursive.
+11. Never include <template> elements.
+12. **CRITICAL: Text Content Elements (Both Dynamic AND Static)**
+
+    - Search the ENTIRE template for the pattern '{' (dynamic text interpolation)
+    - Search the ENTIRE template for elements with static but semantically meaningful text content:
+      a. Required indicators (\*, "required", etc.)
+      b. Status badges or labels ("Active", "Draft", "Published")
+      c. Error/warning/success indicators (!, ✓, ✗)
+      d. Count or metric displays (even if static)
+      e. Instructional text with semantic importance
+    - For EVERY occurrence of dynamic OR meaningful static text:
+      a. Identify the containing element
+      b. If it's a container (div, span, p, h1-h6, etc.), include it as an element
+      c. Set type to "Basic" (can be used for getText or isVisible assertions)
+      d. Set public=true if the content has assertion value in tests
+      e. Set nullable=true if inside conditional directives (if:true, if:false, lwc:if)
+    - Common examples to look for:
+      - <div>{someText}</div> (dynamic)
+      - <span class="slds-required">\*</span> (static but meaningful)
+      - <span class="badge">Active</span> (static but meaningful)
+      - <div class="error-message">!</div> (static but meaningful)
+
+13. **Semantic and State Indicator Elements**
+    - Always include elements that indicate UI state, validation requirements, or status
+    - Examples include:
+      - Required field indicators (asterisks, "required" text)
+      - Validation state icons (checkmarks, error icons, warning icons)
+      - Status badges (active, inactive, draft, published)
+      - Count or metric displays
+      - Help or info icons
+    - These elements should be included regardless of whether their content is static or dynamic
+    - These elements typically have assertion value in tests (isVisible, isPresent, getText)
+
+## Step 3: Analyze Elements
+
+Every identified element must be reported using the following format:
+
+- Descriptive name
+- Scope
+- Public
+- Type
+- CSS Selector
+- Return All
+- Nullable
+- Wait
+- Events
+
+Apply the following rules for element Descriptive name:
+
+- Use camelCase format.
+- If returnAll is true, append "s" to the end of the element name, for example "rows".
+- If element type is "Slot", use suffix "Content", for example "outputContent".
+- If element type is "Dynamic", use prefix "dynamic", for example "dynamicItem".
+
+Apply the following rules for element scope:
+
+- Scope can only be "root" or reference name of another element from generated list.
+- Scope of an element located at the root of the component should be "root".
+- If element is nested inside another element, scope MUST be set to the name of the IMMEDIATE parent element that was identified in the element list. Do not skip levels in the hierarchy.
+- Carefully trace the DOM hierarchy to identify the correct immediate parent.
+
+Apply the following rules for element type:
+
+- When evaluating the tag name of an element, take extra care to ensure that you are valuating the tag name, and not attributes of the element.
+
+- Custom elements
+  - An element whose tag name contains at least one dash **MUST** have type "Custom(tag-name)". For example element <lightning-input> should have type Custom(lightning-input).
+  - Do not assign type "Custom(tag-name)" to elements where a dash is not in its tag name, for example element <li data-overflow> should not have type "Custom(data-overflow)" because a dash is not in tag name.
+  - **CRITICAL VERIFICATION FOR CUSTOM ELEMENTS:**
+    - Before marking ANY element as "Custom" type, verify it appears in your Step 1 audit list of tag names containing dashes
+    - If an element was NOT found in the tag names containing dashes search from Step 1, it CANNOT be Custom type
+
+-Slotted elements - Elements with an attribute named "slot" **MUST** have type "Slotted". These elements **MUST NOT** have type "Slot". For example, element <div slot="my-slot"> should have type "Slotted". - **CRITICAL VERIFICATION FOR SLOTTED ELEMENTS:** - Before marking ANY element as "Slotted" type, verify it appears in your Step 1 audit list of 'slot="' occurrences - If an element was NOT found in the 'slot="' search from Step 1, it CANNOT be Slotted type - Elements that are children of custom components but lack the slot="" attribute are NOT Slotted
+
+- Dynamic elements
+
+  - Elements with a tag name of "lwc:component" **MUST** have type "Dynamic".
+  - **CRITICAL VERIFICATION FOR DYNAMIC ELEMENTS:**
+    - Before marking ANY element as "Dynamic" type, verify it appears in your Step 1 audit list of '<lwc:component' occurrences
+    - If an element was NOT found in the '<lwc:component' search from Step 1, it CANNOT be Dynamic type
+
+- Slot elements
+
+  - Elements with a tag name of "slot" **MUST** have type "Slot".
+  - **CRITICAL VERIFICATION FOR SLOT ELEMENTS:**
+    - Before marking ANY element as "Slot" type, verify it appears in your Step 1 audit list of tag name "slot" occurrences
+    - If an element was NOT found in the tag name "slot" search from Step 1, it CANNOT be Slot type
+
+- Basic elements
+  - Otherwise elements must have one of the following types:
+  1. Combination of "Clickable", "Editable", "Draggable", "Actionable" if element handles events and can be interacted with.
+  - Type includes "Clickable" if element can be clicked.
+  - Type includes "Editable" if element can be edited or changed by typing text.
+  - Type includes "Draggable" if element can be dragged.
+  - Type includes "Actionable" if element can be scrolled to or moved to with mouse.
+  - If element has combination of types, separate them with a comma, for example: "Actionable,Clickable,Editable".
+  - Do not combine types "Custom", "Slot", "Dynamic" and "Basic" with any other types, for example type can't be "Actionable,Basic" or "Clickable,Custom".
+  - If element has type "Draggable", "Editable" or "Clickable", add type "Actionable".
+  2. "Basic" if element can be asserted from a UI test.
+
+Apply the following rules for element public:
+
+- Elements of type "Custom" or "Dynamic" must be set to public=true.
+- Elements with returnAll=true must be set to public=true, as they enable tests to iterate over collections of elements.
+- Elements of type "Slotted" that are purely containers (div, section, span, etc.) serving ONLY as scope for other identified elements must be set to public=false.
+- For elements of type "Basic":
+  1. Set public=false if methods are generated for this element in Step 4 that provide assertion or interaction capabilities (e.g., getText, isVisible, isPresent). The methods provide the public API, so direct element access should be encapsulated.
+  2. Set public=true if the element provides direct, meaningful assertion value for test automation (e.g., displays user-facing text, status, or state that should be verified) AND is not redundant with its parent element
+  3. Set public=true if the element contains text content or attributes that should be directly asserted, even if it serves as scope for other elements
+  4. Set public=false if the element is nested inside another identified element that already provides the same assertion capability (e.g., a nested span inside a labeled div where both contain the same text)
+  5. Set public=false if the element serves purely as a structural container with no direct assertion value
+  6. Set public=false if the element is primarily serving as a scope/container for other identified elements AND does not contain its own meaningful content
+- Elements with types "Actionable", "Clickable", "Editable", or "Draggable" that handle user interactions should be set to public=true.
+- When in doubt, prefer public=true for:
+  - Elements that enable iteration (returnAll=true)
+  - Elements with user-facing text content
+  - Interactive elements
+  - Leaf-level elements with assertion value
+- When in doubt, prefer public=false for:
+  - Pure structural containers
+  - Nested elements that duplicate parent element's assertion capability
+  - Slotted container elements serving only as scope
+
+Apply the following rules for element CSS selector:
+
+- Selector should have correct syntax and be unique within its scope element.
+- For element nested inside another element, CSS selector should be relative to its parent, for example for <a> inside <div>, selector will be "a" instead "div a".
+- For element with "Custom" type whose tag name contains at least one dash, always include full tag name in CSS selector without changing it, for example for element <lightning-button class="cancel-button"> selector is "lightning-button.cancel-button".
+- For element with "Slotted" type, selector must be "slot" and include slot name if present. For example: for <slot name="<slot name>"> CSS Selector must be "[slot='<slot name>']".
+- If element is not of "Slotted" or "Custom" type, prefer using in CSS selector following attributes of HTML element: id, then name, then attributes beginning with "data-", then other attributes; class should be last choice.
+- For dynamic component with tag name "lwc:component" don't use its tag name, instead use its attributes even if those have dynamic bindings, for example: for element <lwc:component class="my-class"> use ".my-class" and for <lwc:component value={listItem.value}> use "[value={listItem.value}]".
+- Selector must not include following: descendant combinators, pseudo-classes, any LWC directives.
+- If you could not create CSS selector using above rules, set CSS selector to "%s".
+
+Apply the following rules for element returnAll:
+
+- **CRITICAL**: "Directly inside" means the IMMEDIATE CHILD element of the for:each template
+- Find the <template for:each> tag and identify its FIRST child element - only that element can have returnAll=true
+- If element is the immediate/direct child of template with "for:each" directive, returnAll must be true
+- ALL other elements (including elements nested inside that direct child) must have returnAll=false
+- For elements nested indirectly inside template with "for:each" directive, returnAll must be false
+
+Example:
+"""
+<template for:each={items}>
+
+<div class="wrapper"> <!-- THIS has returnAll=true (immediate child) -->
+<lightning-card> <!-- THIS has returnAll=false (nested inside div) -->
+<span slot="title">...</span> <!-- THIS has returnAll=false -->
+</lightning-card>
+</div>
+</template>
+"""
+
+Apply the following rules for element nullable:
+
+- If element is nested inside "if:true", "if:false" or "lwc:if" directives, set nullable=true.
+- Otherwise set nullable to false.
+
+Apply the following rules for element wait:
+
+- If element is loaded or reloaded with delay, set wait=true.
+- If element content is not immediately available, set wait=true.
+- If element depends on data asynchronously fetched from external sources, set wait=true.
+- Otherwise set wait to false.
+
+Apply the following rules for element events:
+
+- Only include standard event handlers that starts from "on", for example "onchange" or "onclick".
+- If component does not have standard event handlers, set value to "none".
+
+VERIFICATION CHECKLIST - Before proceeding to Step 4, confirm:
+□ Have you documented your Step 1 audit findings in writing?
+□ Have you searched for ALL occurrences of '{' (text interpolation)?
+□ For EACH text interpolation found, have you included its containing element?
+□ Have you included ALL custom elements (tags containing at least one dash)?
+□ Have you performed a systematic search for 'slot="' and listed EVERY occurrence with line numbers?
+□ For each 'slot="' occurrence found, have you verified it appears in your element list?
+□ Have you checked for container elements (div, span, p, section) that contain text interpolation?
+□ For each Custom element, have you checked for BOTH slotted children AND non-slotted children?
+□ Have you included ALL elements with a tag name of "slot"?
+□ Have you included ALL elements with a tag name of "lwc:component"?
+□ Have you verified elements nested inside conditional directives are marked nullable?
+□ Have you searched for ALL 'for:each' directives and identified their IMMEDIATE child elements?
+□ Have you verified that the immediate child of each for:each has returnAll=true?
+□ Have you verified each element's scope points to its IMMEDIATE parent in the identified element list?
+□ Have you traced the nesting hierarchy carefully without skipping levels?
+□ Have you identified the IMMEDIATE child of each template with a for:each directive (not nested children)?
+□ Have you included container elements that hold text content or serve semantic purposes?
+□ For every template with a for:each directive, have you verified only the direct child has returnAll=true and all nested elements have returnAll=false?
+□ Have you identified the root element of the component and verified if it should be included?
+□ Have you checked if the root element has dynamic attributes or serves as scope for other elements?
+□ Have you searched for elements with static but semantically meaningful text (required indicators, badges, status icons)?
+□ Have you verified that visual indicators (\*, !, ✓) are included even if they contain static text?
+□ Have you included elements that convey UI state or validation requirements?
+
+## Step 4: Identify Methods
+
+Based on generated list of elements generated in step 1 and LWC source code, generate list of public methods for the same page object.
+**IMPORTANT:** When identifying methods, you must ONLY use the list of elements identified in step 1. You must NOT use any other information, such as the component's documentation, or any other external information.
+Do not remove or change already identified elements, only add generated methods.
+Apply the following approach to identify methods:
+
+1. Method encapsulates user interactions with identified element by applying actions via mouse or keyboard like clicking or entering text.
+2. Method encapsulates assertions by returning element state and properties such as visibility or text.
+3. For every method that changes element state or text or property or attribute, add method that returns state or property or attributes to assert the change.
+4. You **MUST NOT** generate any methods for elements with types "Custom", "Slot" or "Dynamic".
+5. Method must only target existing elements.
+6. Methods should cover all possible interactions and assertions.
+7. Make sure to add at least one method that asserts element state for each element with type Basic.
+8. Every generated method must be reported using the following format:
+
+- Descriptive name
+- Text description
+- Statements
+
+Apply the following rules for method descriptive name:
+
+- Use camelCase format.
+
+Apply the following rules for method text description:
+
+- Use a concise plain text description of the method.
+- Describe the method in a way that is easy to understand and use.
+- Describe the method in a way that is easy to understand by a non-technical user.
+
+Apply the following rules for method statements:
+
+- Element must point to the name of one of the identified elements. Make sure to use correct name of the element.
+- Applied action must be inferred from "events" in the element, for example if element has event "onfocus", apply action "focus".
+- Do not apply action if the element does not have matching event, for example do not apply action "click" if element does not have event "onclick".
+- Apply action that returns element state, property or value even if element does not handle related events.
+- Pay attention to the element type:
+
+1. Statement must not use elements with type "Custom", "Slot" or "Dynamic" because they don't support any actions.
+2. For other types supported actions are:
+   2.1. For elements where returnAll is true: 'size'.
+   2.2. For type Actionable: 'blur', 'focus', 'moveTo'.
+   2.3. For type Clickable: 'click', 'doubleClick', 'rightClick', 'clickAndHold'.
+   2.4. For type Editable: 'clear', 'setText', 'clearAndType'.
+   2.5. For type Draggable: 'dragAndDrop'.
+   2.6. For type Basic: 'getAttribute', 'getText', 'getTitle', 'getValue', 'isFocused', 'isEnabled', 'isPresent', 'isVisible'.
+   2.7. Types "Actionable", "Clickable", "Editable" and "Draggable" also support actions of the type "Basic".
+
+- Only apply action to the element if it's supported for the element type.
+- Do not use actions that are not listed above because they are not supported.
+- Do not add any parameters to applied actions, for example statement "element.getAttribute('label')" is invalid, should be "element.getAttribute".
+
+## Step 5: Filter Non-Public, Unreferenced Elements
+
+After generating the list of elements (Step 3) and methods (Step 4), filter out elements that serve no purpose in the public API:
+
+### Filtering Rules:
+
+1. **Review each element** where public would be false (property omitted in JSON)
+
+2. **Check if the element is referenced** by any method identified in Step 4:
+
+   - Search through all method statements
+   - If any statement uses this element's name, the element IS REFERENCED
+   - Example: If method statement is "buttonTriggerText.getText", then "buttonTriggerText" is referenced
+
+3. **Remove the element** from the identified element list if ALL of the following are true:
+
+   - Element would have public=false (no public property)
+   - Element is NOT referenced by any method statement
+   - Element is NOT the root container element (first element inside <template>)
+   - Element is NOT serving as scope for any OTHER elements that remain in the list
+   - Element is NOT a Custom or Dynamic type (these are always public=true)
+   - Element does NOT have returnAll=true (these are always public=true)
+
+4. **Update child element scopes** when removing a parent:
+
+   - If you remove an element that was serving as scope for other elements
+   - Update those child elements' scope to point to the removed element's parent scope
+   - Example: If removing "container" (scope: root) that had child "button" (scope: container)
+     Then update "button" to have scope: root
+
+5. **Apply recursively**:
+   - After removing an element, check if its parent now meets the removal criteria
+   - Continue until no more elements can be removed
+
+### Examples:
+
+**Example 1: Remove Decorative Icon**
+Element: inputPillIcon (Custom, public=false)
+
+- NOT referenced by any method
+- NOT serving as scope for other elements
+- NOT the root element
+  → REMOVE from element list
+
+**Example 2: Keep Element Referenced by Method**
+Element: buttonTriggerText (Basic, public=false)
+
+- Referenced by method "getButtonText" with statement "buttonTriggerText.getText"
+  → KEEP in element list
+
+**Example 3: Keep Root Container**
+Element: comboboxContainer (Basic, public=false, scope: root)
+
+- NOT referenced by any method
+- BUT is the root container element
+- Serves as scope for multiple elements
+  → KEEP in element list
+
+**Example 4: Keep Scope-Serving Container**
+Element: pillCloseButton (Clickable, public=true)
+
+- Has child: pillCloseAssistiveText (public=false, referenced by method)
+- Serves as scope for a kept element
+  → KEEP in element list (and keep its public=true status)
+
+### Output After Filtering:
+
+Provide two lists:
+
+1. **Kept Elements**: Final list of elements to include in UTAM Page Object JSON
+2. **Removed Elements**: List of elements filtered out (for transparency/review)
+
+Format:
+
+# Final Element List (After Filtering)
+
+## Kept Elements:
+
+comboboxContainer (root container, serves as scope)
+comboboxInput (public=true, interactive)
+buttonTriggerText (public=false, referenced by getButtonText method)
+... etc
+
+## Removed Elements:
+
+inputPillIcon (decorative, not referenced)
+pillCloseIcon (decorative, not referenced)
+... etc
+
+## FINAL VERIFICATION CHECKLIST
+
+Before providing the final element and method lists, confirm you have completed:
+
+**Non-public Element Filtering:**
+□ Have you identified which elements would have public=false?
+□ Have you checked EACH public=false element against ALL method statements?
+□ Have you marked which elements are referenced vs unreferenced?
+□ Have you removed unreferenced, non-public elements (except root and scope-serving)?
+□ Have you updated child element scopes after removing parent elements?
+□ Have you verified no Custom/Dynamic/returnAll=true elements were removed?
+□ Have you provided both "Kept Elements" and "Removed Elements" lists?
+
+**Ready for JSON Generation:**
+□ The final element list contains only elements that are public=true OR referenced by methods OR serve as scope
+□ All methods reference only elements that remain in the final element list
+□ Child element scopes have been updated to point to existing parent elements