Fix e2e tests (#3651)

This PR fixes a couple of issues with the e2e tests we've been experiencing lately (and also upgrades Playwrght to the latest stable version). Changes made: * NFT collection that we checked in the test had slight change in it's name, the tests were updated to expect the new name * Sometimes tests creating new wallets were failing during seed phrase verification because Playwright was saving the seed phrase before it was displayed. We've added a step that checks if the seed phrase is displayed before proceeding further. * We've upgraded to latest version of Playwright to have access to some debug functionalities not available in the version we used before * We've changed a locator identifying `Select token` element, because it stopped working after upgrading to newer Playwright version * We've changed a RegEx checking the format of the date of a transaction, because it looks that one of the space characters used in the date had changed from no-break space to a regular space. * We've temporarily marked a step checking behavior after SIWE in the `signing.spec.ts` as expected to fail because of the bug on `login.xyz`. Playwright will treat the test as passing when the step fails and will mark the test as failed if the step passes. Latest build: [extension-builds-3651](https://github.com/tahowallet/extension/suites/18118417480/artifacts/1044503438) (as of Sun, 12 Nov 2023 12:32:55 GMT).
tahowallet · Nov 20, 2023 · 080b4d0 · 080b4d0
2 parents 895580b + 0405842
commit 080b4d0
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 80 deletions.
diff --git a/e2e-tests/fork-based/transactions.spec.ts b/e2e-tests/fork-based/transactions.spec.ts
@@ -105,9 +105,9 @@ test.describe("Transactions", () => {
        * Confirm there is "Transaction signed, broadcasting..." snackbar visible
        * and there is no "Transaction failed to broadcast" snackbar visible.
        */
-      await expect(
-        popup.getByText("Transaction signed, broadcasting...").first(),
-      ).toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
+      await expect
+        .soft(popup.getByText("Transaction signed, broadcasting...").first())
+        .toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
       await expect(
         popup.getByText("Transaction failed to broadcast."),
       ).toHaveCount(0)
@@ -478,9 +478,9 @@ test.describe("Transactions", () => {
        * Confirm there is "Transaction signed, broadcasting..." snackbar visible
        * and there is no "Transaction failed to broadcast" snackbar visible.
        */
-      await expect(
-        popup.getByText("Transaction signed, broadcasting...").first(),
-      ).toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
+      await expect
+        .soft(popup.getByText("Transaction signed, broadcasting...").first())
+        .toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
       await expect(
         popup.getByText("Transaction failed to broadcast."),
       ).toHaveCount(0)

diff --git a/e2e-tests/regular/nfts.spec.ts b/e2e-tests/regular/nfts.spec.ts
@@ -180,7 +180,7 @@ test.describe("NFTs", () => {
         const nftCollection = page
           .getByTestId("nft_list_item")
           .filter({ has: page.getByTestId("nft_list_item_collection") })
-          .filter({ hasText: "Notable Crypto Punks" })
+          .filter({ hasText: "Notable Punks" })
           .first()
 
         await nftCollection.hover()

diff --git a/e2e-tests/regular/onboarding.spec.ts b/e2e-tests/regular/onboarding.spec.ts
@@ -72,7 +72,11 @@ test.describe("Onboarding", () => {
     await page.getByRole("button", { name: "Begin the hunt" }).click()
     await page.getByRole("button", { name: "Create recovery phrase" }).click()
 
-    // Verify seed
+    // Wait for the seed phrase to load.
+    const seedPhraseWord = await page.locator(".seed_phrase .word")
+    await expect(seedPhraseWord).toHaveCount(24)
+
+    // Extract seed into an array of words with no spaces or dashes.
     const seedWords = (
       await page.locator(".seed_phrase .word").allTextContents()
     ).map((word) => word.replace(/-|\s/, ""))
@@ -83,6 +87,8 @@ test.describe("Onboarding", () => {
       "verify_seed_word_placeholder",
     )
 
+    // Extract the ids of the seed phrase words that need to be verified and
+    // store them as an array of numbers.
     const wordsToVerify = (await seedWordPlaceholders.allTextContents()).map(
       (word) => Number((word.match(/\d+/) ?? ["0"])[0]),
     )

diff --git a/e2e-tests/regular/signing.spec.ts b/e2e-tests/regular/signing.spec.ts
@@ -26,8 +26,11 @@ test.describe("Signing", () => {
     await signDataPromptOpens.then(async (prompt) => {
       await prompt.getByRole("button", { name: "Sign" }).click()
     })
-
-    // If we see this then it means we were able to sign in
+    // There's a bug on login.xyz that makes the test fail
+    // (https://discord.com/channels/862419652286218251/886997073650655232/1173226370776694794).
+    // We're adding the expectation of failure. Playwright will throw `Expected
+    // to fail, but passed.` when bug is fixed.
+    test.fail()
     await expect(siwe.getByText("Vote for your favorite emoji")).toBeVisible()
   })
 

diff --git a/e2e-tests/regular/token-trust.spec.ts b/e2e-tests/regular/token-trust.spec.ts
@@ -135,16 +135,10 @@ test.describe("Token Trust", () => {
        * Verify there are no unverified assets on the Swap screen.
        */
       await popup.getByLabel("Swap", { exact: true }).click()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .first()
-        .click()
+      await popup.getByLabel("Swap from:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(untrustedAssets)
       await assetsHelper.closeSelectTokenPopup()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .nth(1)
-        .click()
+      await popup.getByLabel("Swap to:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(untrustedAssets)
       await assetsHelper.closeSelectTokenPopup()
     })
@@ -265,16 +259,10 @@ test.describe("Token Trust", () => {
        * Verify there are no unverified assets on the Swap screen.
        */
       await popup.getByLabel("Swap", { exact: true }).click()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .first()
-        .click()
+      await popup.getByLabel("Swap from:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(untrustedAssets)
       await assetsHelper.closeSelectTokenPopup()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .nth(1)
-        .click()
+      await popup.getByLabel("Swap to:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(untrustedAssets)
       await assetsHelper.closeSelectTokenPopup()
     })
@@ -305,9 +293,9 @@ test.describe("Token Trust", () => {
       /**
        * Confirm there is `Asset removed from list` snackbar visible.
        */
-      await expect(
-        popup.getByText("Asset removed from list").first(),
-      ).toBeVisible({ timeout: 5000 })
+      await expect
+        .soft(popup.getByText("Asset removed from list").first())
+        .toBeVisible({ timeout: 5000 })
 
       /**
        * Make sure `Wallet` page is opened and there are unverified assets
@@ -345,16 +333,10 @@ test.describe("Token Trust", () => {
        * Verify there is no "pAAVE" asset on the Swap screen.
        */
       await popup.getByLabel("Swap", { exact: true }).click()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .first()
-        .click()
+      await popup.getByLabel("Swap from:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(["pAAVE"])
       await assetsHelper.closeSelectTokenPopup()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .nth(1)
-        .click()
+      await popup.getByLabel("Swap to:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(["pAAVE"])
       await assetsHelper.closeSelectTokenPopup()
     })
@@ -385,9 +367,11 @@ test.describe("Token Trust", () => {
       /**
        * Confirm there is `Asset added to list` snackbar visible.
        */
-      await expect(popup.getByText("Asset added to list").first()).toBeVisible({
-        timeout: 5000,
-      })
+      await expect
+        .soft(popup.getByText("Asset added to list").first())
+        .toBeVisible({
+          timeout: 5000,
+        })
 
       /**
        * Confirm asset's details are opened. Ensure there are fields related to
@@ -423,16 +407,10 @@ test.describe("Token Trust", () => {
        * Verify recently trusted asset is available on the Swap screen.
        */
       await popup.getByLabel("Swap", { exact: true }).click()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .first()
-        .click()
+      await popup.getByLabel("Swap from:").click()
       await assetsHelper.assertAssetsPresentOnAssetsList(["BANANA"])
       await assetsHelper.closeSelectTokenPopup()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .nth(1)
-        .click()
+      await popup.getByLabel("Swap to:").click()
       await assetsHelper.assertAssetsPresentOnAssetsList(["BANANA"])
       await assetsHelper.closeSelectTokenPopup()
     })
@@ -460,9 +438,9 @@ test.describe("Token Trust", () => {
       /**
        * Confirm there is `Asset removed from list` snackbar visible.
        */
-      await expect(
-        popup.getByText("Asset removed from list").first(),
-      ).toBeVisible({ timeout: 5000 })
+      await expect
+        .soft(popup.getByText("Asset removed from list").first())
+        .toBeVisible({ timeout: 5000 })
 
       /**
        * Make sure `Wallet` page is opened and there are unverified assets
@@ -500,16 +478,10 @@ test.describe("Token Trust", () => {
        * Verify there is no "BANANA" asset on the Swap screen.
        */
       await popup.getByLabel("Swap", { exact: true }).click()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .first()
-        .click()
+      await popup.getByLabel("Swap from:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(["BANANA"])
       await assetsHelper.closeSelectTokenPopup()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .nth(1)
-        .click()
+      await popup.getByLabel("Swap to:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(["BANANA"])
       await assetsHelper.closeSelectTokenPopup()
     })

diff --git a/e2e-tests/regular/transactions.spec.ts b/e2e-tests/regular/transactions.spec.ts
@@ -136,9 +136,9 @@ test.describe("Transactions", () => {
        * Confirm there is "Transaction signed, broadcasting..." snackbar visible
        * and there is no "Transaction failed to broadcast" snackbar visible.
        */
-      await expect(
-        popup.getByText("Transaction signed, broadcasting...").first(),
-      ).toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
+      await expect
+        .soft(popup.getByText("Transaction signed, broadcasting...").first())
+        .toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
       await expect(
         popup.getByText("Transaction failed to broadcast."),
       ).toHaveCount(0)

diff --git a/e2e-tests/utils/onboarding.ts b/e2e-tests/utils/onboarding.ts
@@ -183,17 +183,23 @@ export default class OnboardingHelper {
     await page.getByRole("button", { name: "Begin the hunt" }).click()
     await page.getByRole("button", { name: "Create recovery phrase" }).click()
 
-    // Verify seed
-    const seedWords = (
-      await page.locator(".seed_phrase .word").allTextContents()
-    ).map((word) => word.replace(/-|\s/, ""))
+    // Wait for the seed phrase to load.
+    const seedPhraseWord = await page.locator(".seed_phrase .word")
+    await expect(seedPhraseWord).toHaveCount(24)
+
+    // Extract seed into an array of words with no spaces or dashes.
+    const seedWords = (await seedPhraseWord.allTextContents()).map((word) =>
+      word.replace(/-|\s/, ""),
+    )
 
     await page.getByRole("button", { name: "I wrote it down" }).click()
 
     const seedWordPlaceholders = page.getByTestId(
       "verify_seed_word_placeholder",
     )
 
+    // Extract the ids of the seed phrase words that need to be verified and
+    // store them as an array of numbers.
     const wordsToVerify = (await seedWordPlaceholders.allTextContents()).map(
       (word) => Number((word.match(/\d+/) ?? ["0"])[0]),
     )

diff --git a/e2e-tests/utils/transactions.ts b/e2e-tests/utils/transactions.ts
@@ -271,7 +271,7 @@ export default class TransactionsHelper {
       timestampRow
         .locator(".right")
         // eslint-disable-next-line no-irregular-whitespace
-        .getByText(/^\d{1,2}\/\d{1,2}\/\d{4}, \d{1,2}:\d{2}:\d{2}( AM| PM)*$/),
+        .getByText(/^\d{1,2}\/\d{1,2}\/\d{4}, \d{1,2}:\d{2}:\d{2}( AM| PM)*$/),
     ).toBeVisible()
   }
 

diff --git a/package.json b/package.json
@@ -99,7 +99,7 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.11",
     "@babel/register": "^7.22.5",
-    "@playwright/test": "^1.31",
+    "@playwright/test": "^1.39",
     "@redux-devtools/cli": "^2.0.0",
     "@thesis-co/eslint-config": "^0.6.1",
     "@types/archiver": "^5.1.0",

diff --git a/yarn.lock b/yarn.lock
@@ -3425,15 +3425,12 @@
     picocolors "^1.0.0"
     tslib "^2.6.0"
 
-"@playwright/test@^1.31":
-  version "1.31.0"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.31.0.tgz#bde42ca06804164be54893525110adda946248d6"
-  integrity sha512-Ys5s/06Dg9g3zAIdCIb/UOBYim3U7Zjb3DvC6XBtnRmnglH5O47iwYzmtxXu9fhSyzI2Jn28apkXIOD81GgCdw==
+"@playwright/test@^1.39":
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.39.0.tgz#d10ba8e38e44104499e25001945f07faa9fa91cd"
+  integrity sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==
   dependencies:
-    "@types/node" "*"
-    playwright-core "1.31.0"
-  optionalDependencies:
-    fsevents "2.3.2"
+    playwright "1.39.0"
 
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
@@ -13018,10 +13015,19 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-[email protected]:
-  version "1.31.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.31.0.tgz#dbd184771535e76c6743ef5c082def5564f07e85"
-  integrity sha512-/KquBjS5DcASCh8cGeNVHuC0kyb7c9plKTwaKxgOGtxT7+DZO2fjmFvPDBSXslEIK5CeOO/2kk5rOCktFXKEdA==
+[email protected]:
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.39.0.tgz#efeaea754af4fb170d11845b8da30b2323287c63"
+  integrity sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==
+
+[email protected]:
+  version "1.39.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.39.0.tgz#184c81cd6478f8da28bcd9e60e94fcebf566e077"
+  integrity sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==
+  dependencies:
+    playwright-core "1.39.0"
+  optionalDependencies:
+    fsevents "2.3.2"
 
 portfinder@^1.0.17:
   version "1.0.28"