MOBILE-3947 behat: Check shadowDom on getTopAncestors

src/addons/competency/tests/behat/navigation.feature

@@ -297,7 +297,6 @@ Feature: Test competency navigation
     Then I should find "Desserts are important" in the app
     But I should not find "Cakes" in the app
 
-  @ionic7_failure
   Scenario: Tablet navigation (student)
     Given I entered the course "Course 1" as "student1" in the app
     And I change viewport size to "1200x640" in the app

src/addons/messages/tests/behat/basic_usage.feature

@@ -216,7 +216,6 @@ Feature: Test basic usage of messages in app
     Then I should find "heeey student" in the app
     And I should find "byee" in the app
 
-  @ionic7_failure
   Scenario: Search for messages
     Given I entered the app as "teacher1"
     When I press "Messages" in the app

src/testing/services/behat-dom.ts

@@ -286,7 +286,18 @@ export class TestingBehatDomUtilsService {
                     continue;
                 }
 
-                if (element.contains(otherElement)) {
+                let documentPosition = element.compareDocumentPosition(otherElement);
+                // eslint-disable-next-line no-bitwise
+                if (documentPosition & Node.DOCUMENT_POSITION_DISCONNECTED) {
+                    // Check if they are inside shadow DOM so we can compare their hosts.
+                    const elementHost = this.getShadowDOMHost(element) || element;
+                    const otherElementHost = this.getShadowDOMHost(otherElement) || otherElement;
+
+                    documentPosition = elementHost.compareDocumentPosition(otherElementHost);
+                }
+
+                // eslint-disable-next-line no-bitwise
+                if (documentPosition & Node.DOCUMENT_POSITION_CONTAINS) {
                     uniqueElements.delete(otherElement);
                 }
             }
@@ -302,9 +313,22 @@ export class TestingBehatDomUtilsService {
      * @returns Parent element.
      */
     protected getParentElement(element: HTMLElement): HTMLElement | null {
-        return element.parentElement ||
+        return element.parentElement || this.getShadowDOMHost(element);
-            (element.getRootNode() && (element.getRootNode() as ShadowRoot).host as HTMLElement) ||
+    }
-            null;
+
+    /**
+     * Get shadow DOM host element.
+     *
+     * @param element Element.
+     * @returns Shadow DOM host element.
+     */
+    protected getShadowDOMHost(element: HTMLElement): HTMLElement | null {
+        const node = element.getRootNode();
+        if (node instanceof ShadowRoot) {
+            return node.host as HTMLElement;
+        }
+
+        return null;
     }
 
     /**