test(extension): maintenance 8 apr fix duplicated dom selectors (#1044)

* test(extension): fix duplicated modals issue

* test(extension): fix duplicated modals selectors

Author: bslabiak

packages/e2e-tests/src/elements/NFTs/DeleteFolderModal.ts

@@ -1,5 +1,5 @@
 class DeleteFolderModal {
-  private CONTAINER = '.ant-modal-content';
+  private CONTAINER = '.ant-modal-wrap:not([style="display: none;"]) .ant-modal-content';
   private TITLE = '[data-testid="create-folder-modal-title"]';
   private DESCRIPTION = '[data-testid="create-folder-modal-description"]';
   private CANCEL_BUTTON = '[data-testid="delete-folder-modal-cancel"]';
@@ -10,19 +10,19 @@ class DeleteFolderModal {
   }
 
   get title() {
-    return $(this.TITLE);
+    return this.container.$(this.TITLE);
   }
 
   get description() {
-    return $(this.DESCRIPTION);
+    return this.container.$(this.DESCRIPTION);
   }
 
   get cancelButton() {
-    return $(this.CANCEL_BUTTON);
+    return this.container.$(this.CANCEL_BUTTON);
   }
 
   get confirmButton() {
-    return $(this.CONFIRM_BUTTON);
+    return this.container.$(this.CONFIRM_BUTTON);
   }
 
   async clickCancelButton() {

packages/e2e-tests/src/elements/NFTs/youllHaveToStartAgainModal.ts

@@ -2,7 +2,7 @@
 import { ChainablePromiseElement } from 'webdriverio';
 
 class YoullHaveToStartAgainModal {
-  private CONTAINER = '.ant-modal-content';
+  private CONTAINER = '.ant-modal-wrap:not([style="display: none;"]) .ant-modal-content';
   private TITLE = '[data-testid="create-folder-modal-title"]';
   private DESCRIPTION = '[data-testid="create-folder-modal-description"]';
   private CANCEL_BUTTON = '[data-testid="create-folder-modal-cancel"]';
@@ -13,19 +13,19 @@ class YoullHaveToStartAgainModal {
   }
 
   get title(): ChainablePromiseElement<WebdriverIO.Element> {
-    return $(this.TITLE);
+    return this.container.$(this.TITLE);
   }
 
   get description(): ChainablePromiseElement<WebdriverIO.Element> {
-    return $(this.DESCRIPTION);
+    return this.container.$(this.DESCRIPTION);
   }
 
   get cancelButton(): ChainablePromiseElement<WebdriverIO.Element> {
-    return $(this.CANCEL_BUTTON);
+    return this.container.$(this.CANCEL_BUTTON);
   }
 
   get agreeButton(): ChainablePromiseElement<WebdriverIO.Element> {
-    return $(this.AGREE_BUTTON);
+    return this.container.$(this.AGREE_BUTTON);
   }
 }
 

packages/e2e-tests/src/elements/addressbook/DeleteAddressModal.ts

@@ -1,5 +1,5 @@
 class DeleteAddressModal {
-  private CONTAINER = '.ant-modal-content';
+  private CONTAINER = '.ant-modal-wrap:not([style="display: none;"]) .ant-modal-content';
   private TITLE = '[data-testid="delete-address-modal-title"]';
   private DESCRIPTION = '[data-testid="delete-address-modal-description"]';
   private CANCEL_BUTTON = '[data-testid="delete-address-modal-cancel"]';
@@ -10,19 +10,19 @@ class DeleteAddressModal {
   }
 
   get title() {
-    return $(this.TITLE);
+    return this.container.$(this.TITLE);
   }
 
   get description() {
-    return $(this.DESCRIPTION);
+    return this.container.$(this.DESCRIPTION);
   }
 
   get cancelButton() {
-    return $(this.CANCEL_BUTTON);
+    return this.container.$(this.CANCEL_BUTTON);
   }
 
   get deleteAddressButton() {
-    return $(this.DELETE_ADDRESS_BUTTON);
+    return this.container.$(this.DELETE_ADDRESS_BUTTON);
   }
 }
 

packages/e2e-tests/src/elements/modal.ts

@@ -2,7 +2,7 @@
 import { ChainablePromiseElement } from 'webdriverio';
 
 class Modal {
-  private CONTAINER = '.ant-modal-content';
+  private CONTAINER = '.ant-modal-wrap:not([style="display: none;"]) .ant-modal-content';
   private TITLE = '[data-testid="delete-address-modal-title"]';
   private DESCRIPTION = '[data-testid="delete-address-modal-description"]';
   private CANCEL_BUTTON = '[data-testid="delete-address-modal-cancel"]';
@@ -13,19 +13,19 @@ class Modal {
   }
 
   get title(): ChainablePromiseElement<WebdriverIO.Element> {
-    return $(this.TITLE);
+    return this.container.$(this.TITLE);
   }
 
   get description(): ChainablePromiseElement<WebdriverIO.Element> {
-    return $(this.DESCRIPTION);
+    return this.container.$(this.DESCRIPTION);
   }
 
   get cancelButton(): ChainablePromiseElement<WebdriverIO.Element> {
-    return $(this.CANCEL_BUTTON);
+    return this.container.$(this.CANCEL_BUTTON);
   }
 
   get confirmButton(): ChainablePromiseElement<WebdriverIO.Element> {
-    return $(this.CONFIRM_BUTTON);
+    return this.container.$(this.CONFIRM_BUTTON);
   }
 
   buttonWithText(value: string): ChainablePromiseElement<WebdriverIO.Element> {

packages/e2e-tests/src/pageobject/settingsExtendedPageObject.ts

@@ -169,7 +169,7 @@ class SettingsExtendedPageObject {
   }
 
   async multiAddressModalConfirm() {
-    if (await Modal.confirmButton.isDisplayed()) {
+    if (await Modal.container.isDisplayed()) {
       expect(await Modal.confirmButton.getText()).to.equal(await t('modals.beta.button', 'staking'));
       await Modal.confirmButton.click();
     }

packages/e2e-tests/src/steps/commonSteps.ts

@@ -39,15 +39,18 @@ import settingsExtendedPageObject from '../pageobject/settingsExtendedPageObject
 import consoleManager from '../utils/consoleManager';
 import consoleAssert from '../assert/consoleAssert';
 import { addAndActivateWalletInRepository, clearWalletRepository } from '../fixture/walletRepositoryInitializer';
+import MainLoader from '../elements/MainLoader';
 
 Given(/^Lace is ready for test$/, async () => {
+  await MainLoader.waitUntilLoaderDisappears();
   await settingsExtendedPageObject.waitUntilSyncingModalDisappears();
   await settingsExtendedPageObject.multiAddressModalConfirm();
   await tokensPageObject.waitUntilCardanoTokenLoaded();
   await settingsExtendedPageObject.closeWalletSyncedToast();
 });
 
 Then(/^Lace is loaded properly$/, async () => {
+  await MainLoader.waitUntilLoaderDisappears();
   await settingsExtendedPageObject.waitUntilSyncingModalDisappears();
   await tokensPageObject.waitUntilCardanoTokenLoaded();
 });