Adding Selecting Chain Interaction And Flow Improvements (#21)

* chore: changing the flow of test cases; starting by creating a new wallet rather than importing

* feature: adding behavior in import wallet flow to select a chain when importing/creating wallet

* feature: adding helper methods to click elements in a reliable way

* chore: using helper methods inside keplr.js

* chore: handling edge case for grabbing token values when values are large numbers containing commas

* chore: updating selector for getting wallet address and adding test cases to validate the behavior

* chore: addressing PR comments

* chore: addressing PR comments

* chore: replacing Agoric local with Agoric localhost

commands/keplr.js

@@ -158,10 +158,7 @@ const keplr = {
       await playwright.keplrWindow(),
     );
 
-    await playwright.waitAndClick(
-      onboardingElements.submitChainButton,
-      await playwright.keplrWindow(),
-    );
+    await module.exports.handleSelectChain();
 
     await playwright.waitForByText(
       onboardingElements.phraseAccountCreated,
@@ -170,6 +167,38 @@ const keplr = {
 
     return true;
   },
+  async handleSelectChain() {
+    const chainNameExists = await playwright.waitForAndCheckElementExistence(
+      onboardingElements.chainNameSelector,
+    );
+
+    if (chainNameExists) {
+      await playwright.waitAndClickByText(
+        onboardingElements.chainName,
+        playwright.keplrWindow(),
+      );
+      await playwright.waitAndClick(
+        onboardingElements.submitChainButton,
+        playwright.keplrWindow(),
+      );
+      const importButtonExists =
+        await playwright.waitForAndCheckElementExistence(
+          onboardingElements.importButtonSelector,
+        );
+
+      if (importButtonExists) {
+        await playwright.waitAndClick(
+          onboardingElements.importButtonSelector,
+          playwright.keplrWindow(),
+        );
+      }
+    } else {
+      await playwright.waitAndClick(
+        onboardingElements.submitChainButton,
+        playwright.keplrWindow(),
+      );
+    }
+  },
   async importWalletWithPhrase(secretWords) {
     await playwright.waitAndClickByText(
       onboardingElements.phraseCount24,
@@ -238,12 +267,20 @@ const keplr = {
     return true;
   },
 
-  async getWalletAddress() {
-    await playwright.switchToKeplrWindow();
+  async getWalletAddress(chainName) {
+    playwright.switchToKeplrWindow();
     await module.exports.goToHome();
-    const page = playwright.keplrWindow();
+    const newTokensSelctorExists = await playwright.waitForAndCheckElementExistence(
+      homePageElements.newTokensFoundSelector,
+    );
+
+    if (newTokensSelctorExists) {
+      await module.exports.addNewTokensFound(false);
+    }
+
     await playwright.waitAndClickByText(notificationPageElements.copyAddress);
-    await page.click(notificationPageElements.copyWalletAddressSelector);
+    await playwright.waitAndClick(notificationPageElements.walletSelectors(chainName))
+
     walletAddress = clipboardy.readSync();
     await playwright.switchToCypressWindow();
     return walletAddress;
@@ -287,22 +324,25 @@ const keplr = {
 
     return true;
   },
-
-  async addNewTokensFound() {
-    module.exports.switchToKeplrIfNotActive();
-    await module.exports.goToHome();
+  async addNewTokensFound(switchScreens = true) {
+    if (switchScreens) {
+      module.exports.switchToKeplrIfNotActive();
+      await module.exports.goToHome();
+    }
     await playwright.waitAndClickByText(homePageElements.newTokensFound);
-    await playwright.waitAndClick(
+    await playwright.waitAndClickWithRetry(
       homePageElements.selectAllTokensCheck,
-      playwright.keplrWindow(),
       { number: -1, force: true },
     );
     await playwright.waitAndClickByText(
       homePageElements.addChainsButton,
       playwright.keplrWindow(),
       true,
     );
-    await playwright.switchToCypressWindow();
+
+    if (switchScreens) {
+      await playwright.switchToCypressWindow();
+    }
 
     return true;
   },
@@ -319,11 +359,11 @@ const keplr = {
     );
     const innerTexts = await parentElement.allInnerTexts();
     const textArray = innerTexts[0].split('\n');
-    const tokenValue = Number(textArray[3]);
 
+    const tokenValue = textArray[3];
+    const parsedTokenValue = Number(tokenValue.replace(/,/g, ''));
     await playwright.switchToCypressWindow();
-
-    return tokenValue;
+    return parsedTokenValue;
   },
 };
 

commands/playwright-keplr.js

@@ -271,6 +271,7 @@ module.exports = {
     page = keplrWindow,
   ) {
     try {
+      await module.exports.waitUntilStable(page);
       await page.waitForSelector(selector, { timeout });
       return true;
     } catch (error) {
@@ -307,6 +308,30 @@ module.exports = {
     await element.type(value);
     await module.exports.waitUntilStable(page);
   },
+  async waitAndClickWithRetry(selector, options) {
+    const maxRetries = 5;
+    let retries = 0;
+
+    while (retries < maxRetries) {
+      try {
+        await module.exports.waitAndClick(
+          selector,
+          module.exports.keplrWindow(),
+          options,
+        );
+        return;
+      } catch (error) {
+        retries++;
+      }
+    }
+
+    throw new Error(`Failed to click element after ${maxRetries} attempts`);
+  },
+  async waitAndClickWithDelay(selector, options, delay) {
+    const page = module.exports.keplrWindow()
+    await page.waitForTimeout(delay)
+    await module.exports.waitAndClick(selector, page, options);
+  },
   async switchToKeplrNotification() {
     const keplrExtensionData = (await module.exports.getExtensionsData()).keplr;
 

pages/keplr/first-time-flow-page.js

@@ -14,12 +14,17 @@ const phraseAccountCreated = 'Account Created!';
 const finishButton = 'button[type="button"]';
 const textAreaSelector = 'textbox';
 const submitPhraseButton = 'button[type="submit"]';
+const chainName = 'Agoric local'
+const chainNameSelector = 'text=Agoric local'
+const importButtonSelector = 'button:has-text("Import")'
 
 module.exports.onboardingElements = {
   existingWalletButton,
   createWalletButton,
   importRecoveryPhraseButton,
   useRecoveryPhraseButton,
+  chainNameSelector,
+  importButtonSelector,
   phraseCount24,
   phrasePrivateKey,
   walletInput,
@@ -32,4 +37,5 @@ module.exports.onboardingElements = {
   finishButton,
   textAreaSelector,
   submitPhraseButton,
+  chainName
 };

pages/keplr/home-page.js

@@ -3,11 +3,13 @@ const tokenParentSelector = '../../../..';
 const selectAllTokensCheck = 'input[type="checkbox"]:enabled';
 const newTokensFound = 'new token(s) found';
 const addChainsButton = 'Add Chains';
+const newTokensFoundSelector = 'text=new token(s) found'
 
 module.exports.homePageElements = {
   tokenNameLabel,
   tokenParentSelector,
   selectAllTokensCheck,
   newTokensFound,
   addChainsButton,
+  newTokensFoundSelector
 };

pages/keplr/notification-page.js

@@ -1,9 +1,9 @@
 const approveButton = `button`;
 const copyAddress = 'Copy Address';
-const copyWalletAddressSelector = 'div.sc-dkzDqf div.sc-hKMtZM.sc-kDDrLX.cyoEAq.dkJSBQ'
+const walletSelectors = chainName => `img[alt="${chainName}"]`;
 
 module.exports.notificationPageElements = {
   approveButton,
   copyAddress,
-  copyWalletAddressSelector
-};
+  walletSelectors
+};

support/commands.js

@@ -455,11 +455,12 @@ Cypress.Commands.add('disconnectWalletFromDapp', () => {
   return cy.task('disconnectWalletFromDapp');
 });
 
-Cypress.Commands.add('getWalletAddress', () => {
-  cy.task('getWalletAddress').then(address => {
+Cypress.Commands.add('getWalletAddress', chainName => {
+  cy.task('getWalletAddress', chainName).then(address => {
     return address;
   });
 });
+
 Cypress.Commands.add('switchWallet', walletName => {
   return cy.task('switchWallet', { walletName });
 });

tests/e2e/specs/keplr/keplr-spec.js

@@ -75,6 +75,16 @@ describe('Keplr', () => {
         expect(setupFinished).to.be.true;
       });
     });
+
+    it(`should get wallet address while running addNewTokensFound flow`, () => {
+      cy.getWalletAddress('Agoric localhost').then(walletAddress => {
+        expect(walletAddress.length).to.be.equal(45);
+      });
+
+      cy.getWalletAddress('Cosmos Hub').then(walletAddress => {
+        expect(walletAddress.length).to.be.equal(45);
+      });
+    });
     it(`should switch to new wallet by name`, () => {
       cy.switchWallet('My Wallet 2').then(taskCompleted => {
         expect(taskCompleted).to.be.true;
@@ -99,10 +109,14 @@ describe('Keplr', () => {
       });
     });
 
-    it(`should get wallet address`, () => {
-      cy.getWalletAddress().then(walletAddress => {
+    it(`should get wallet address without running addNewTokensFound flow`, () => {
+      cy.getWalletAddress('Agoric localhost').then(walletAddress => {
+        expect(walletAddress.length).to.be.equal(45);
+      });
+
+      cy.getWalletAddress('Cosmos Hub').then(walletAddress => {
         expect(walletAddress.length).to.be.equal(45);
       });
     });
   });
-});
+});