MOBILE-4616 behat: ion-page is not a valid element anymore

src/testing/services/behat-dom.ts

@@ -369,9 +369,8 @@ export class TestingBehatDomUtilsService {
      * @param containerName Whether to search inside the a container name.
      * @returns Found top container elements.
      */
-    protected getCurrentTopContainerElements(containerName: string): HTMLElement[] {
+    protected getCurrentTopContainerElements(containerName?: string): HTMLElement[] {
-        const topContainers: HTMLElement[] = [];
+        let containers = Array.from(document.body.querySelectorAll<HTMLElement>([
-        let containers = Array.from(document.querySelectorAll<HTMLElement>([
             'ion-alert.hydrated',
             'ion-popover.hydrated',
             'ion-action-sheet.hydrated',
@@ -395,13 +394,15 @@ export class TestingBehatDomUtilsService {
                     return container.style.pointerEvents !== 'none';
                 }
 
-                // Ignore pages that are inside other visible pages.
+                return true;
-                return container.tagName !== 'ION-PAGE' || !container.closest('.ion-page.ion-page-hidden');
             })
             // Sort them by z-index.
             .sort((a, b) =>  Number(getComputedStyle(b).zIndex) - Number(getComputedStyle(a).zIndex));
 
         if (containerName === 'split-view content') {
+
+            let splitViewContainer: HTMLElement | null = null;
+
             // Find non hidden pages inside the containers.
             containers.some(container => {
                 if (!container.classList.contains('ion-page')) {
@@ -409,18 +410,20 @@ export class TestingBehatDomUtilsService {
                 }
 
                 const pageContainers = Array.from(container.querySelectorAll<HTMLElement>('.ion-page:not(.ion-page-hidden)'));
-                let topContainer = pageContainers.find((page) => !page.closest('.ion-page.ion-page-hidden')) ?? null;
+                const topContainer = pageContainers.find((page) => !page.closest('.ion-page.ion-page-hidden')) ?? null;
 
-                topContainer = (topContainer || container).querySelector<HTMLElement>('core-split-view ion-router-outlet');
+                splitViewContainer = (topContainer || container).querySelector<HTMLElement>(
-                topContainer && topContainers.push(topContainer);
+                    'core-split-view ion-router-outlet',
+                );
 
-                return !!topContainer;
+                return !!splitViewContainer;
             });
 
-            return topContainers;
+            return splitViewContainer ? [splitViewContainer] : [];
         }
 
         // Get containers until one blocks other views.
+        const topContainers: HTMLElement[] = [];
         containers.some(container => {
             if (container.tagName === 'ION-TOAST') {
                 container = container.shadowRoot?.querySelector('.toast-container') || container;
@@ -446,7 +449,7 @@ export class TestingBehatDomUtilsService {
 
         let input = this.findElementBasedOnText(
             { text: field, selector },
-            { onlyClickable: false, containerName: '' },
+            { onlyClickable: false },
         );
 
         if (input?.tagName === 'CORE-RICH-TEXT-EDITOR') {
@@ -459,7 +462,7 @@ export class TestingBehatDomUtilsService {
 
         const label = this.findElementBasedOnText(
             { text: field, selector: 'label' },
-            { onlyClickable: false, containerName: '' },
+            { onlyClickable: false },
         );
 
         if (label) {
@@ -473,7 +476,7 @@ export class TestingBehatDomUtilsService {
 
                 // Search the ion-datetime associated with the button.
                 const datetimeId = (<HTMLIonDatetimeButtonElement> element).datetime;
-                const datetime = document.querySelector<HTMLElement>(`ion-datetime#${datetimeId}`);
+                const datetime = document.body.querySelector<HTMLElement>(`ion-datetime#${datetimeId}`);
 
                 return datetime || undefined;
             }
@@ -539,7 +542,7 @@ export class TestingBehatDomUtilsService {
         timeout: number = 2000,
         retryFrequency: number = 100,
     ): Promise<T> {
-        const element = document.querySelector<T>(selector);
+        const element = document.body.querySelector<T>(selector);
 
         if (!element) {
             if (timeout < retryFrequency) {
@@ -565,15 +568,14 @@ export class TestingBehatDomUtilsService {
         locator: TestingBehatElementLocator,
         options: TestingBehatFindOptions,
     ): HTMLElement[] {
-        const topContainers = this.getCurrentTopContainerElements(options.containerName ?? '');
+        const topContainers = this.getCurrentTopContainerElements(options.containerName);
         let elements: HTMLElement[] = [];
 
-        for (let i = 0; i < topContainers.length; i++) {
+        topContainers.some((container) => {
-            elements = elements.concat(this.findElementsBasedOnTextInContainer(locator, topContainers[i], options));
+            elements = this.findElementsBasedOnTextInContainer(locator, container, options);
-            if (elements.length) {
+
-                break;
+            return elements.length > 0;
-            }
+        });
-        }
 
         return elements;
     }

src/testing/services/behat-runtime.ts

@@ -188,7 +188,6 @@ export class TestingBehatRuntimeService {
         let foundButton: HTMLElement | undefined;
         const options: TestingBehatFindOptions = {
             onlyClickable: true,
-            containerName: '',
         };
 
         switch (button) {
@@ -235,11 +234,11 @@ export class TestingBehatRuntimeService {
 
         const backdrops = [
             ...Array
-                .from(document.querySelectorAll('ion-popover, ion-modal'))
+                .from(document.body.querySelectorAll('ion-popover, ion-modal'))
                 .map(popover => popover.shadowRoot?.querySelector('ion-backdrop'))
                 .filter(backdrop => !!backdrop),
             ...Array
-                .from(document.querySelectorAll('ion-backdrop'))
+                .from(document.body.querySelectorAll('ion-backdrop'))
                 .filter(backdrop => !!backdrop.offsetParent),
         ];
 
@@ -272,7 +271,6 @@ export class TestingBehatRuntimeService {
         try {
             const element = TestingBehatDomUtils.findElementBasedOnText(locator, {
                 onlyClickable: false,
-                containerName: '',
                 ...options,
             });
 
@@ -298,7 +296,7 @@ export class TestingBehatRuntimeService {
         this.log('Action - scrollTo', { locator });
 
         try {
-            let element = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: false, containerName: '' });
+            let element = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: false });
 
             if (!element) {
                 return 'ERROR: No element matches element to scroll to.';
@@ -365,7 +363,7 @@ export class TestingBehatRuntimeService {
 
         try {
             const infiniteLoading = Array
-                .from(document.querySelectorAll<HTMLElement>('core-infinite-loading'))
+                .from(document.body.querySelectorAll<HTMLElement>('core-infinite-loading'))
                 .find(element => !element.closest('.ion-page-hidden'));
 
             if (!infiniteLoading) {
@@ -411,7 +409,7 @@ export class TestingBehatRuntimeService {
         this.log('Action - Is Selected', locator);
 
         try {
-            const element = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: false, containerName: '' });
+            const element = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: false });
 
             if (!element) {
                 return 'ERROR: No element matches locator to find.';
@@ -441,7 +439,7 @@ export class TestingBehatRuntimeService {
         this.log('Action - Press', locator);
 
         try {
-            const found = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: true, containerName: '' });
+            const found = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: true });
 
             if (!found) {
                 return 'ERROR: No element matches locator to press.';
@@ -523,7 +521,7 @@ export class TestingBehatRuntimeService {
     getHeader(): string {
         this.log('Action - Get header');
 
-        const getBySelector = (selector: string ) =>  Array.from(document.querySelectorAll<HTMLElement>(selector))
+        const getBySelector = (selector: string ) =>  Array.from(document.body.querySelectorAll<HTMLElement>(selector))
             .filter((title) => TestingBehatDomUtils.isElementVisible(title, document.body))
             .map((title) => title.innerText.trim())
             .filter((title) => title.length > 0);
@@ -650,7 +648,6 @@ export class TestingBehatRuntimeService {
         if (referenceLocator) {
             startingElement = TestingBehatDomUtils.findElementBasedOnText(referenceLocator, {
                 onlyClickable: false,
-                containerName: '',
             });
 
             if (!startingElement) {