fix: E2E test for new assets page (#1044)

* fix: E2E test

* fix: E2E test (2)

* fix: remove --debug from 'playwright' command

.gitignore

@@ -48,4 +48,4 @@ polkadot
 astar-collator
 
 # Chopstick binaries
-db.sqlite
+db.sqlite*

package.json

@@ -21,7 +21,7 @@
     "heroku-postbuild": "yarn install && yarn build",
     "heroku-deploy": "git push heroku main",
     "playwright:codegen": "npx playwright codegen http://localhost:8080",
-    "playwright": "BASE_URL='http://localhost:8080' ENDPOINT='ws://127.0.0.1:9944' npx playwright test --project=chromium --debug",
+    "playwright": "BASE_URL='http://localhost:8080' ENDPOINT='ws://127.0.0.1:9944' npx playwright test --project=chromium",
     "playwright:ci": "node ./tests/chopsticks/start-chopsticks.js"
   },
   "dependencies": {

src/components/assets/NativeAssetList.vue

@@ -84,7 +84,10 @@
             </q-tooltip>
           </div>
           <template v-else>
-            <router-link :to="buildTransferPageLink(nativeTokenSymbol)">
+            <router-link
+              :to="buildTransferPageLink(nativeTokenSymbol)"
+              data-testid="transfer-link-button"
+            >
               <button class="btn btn--icon">
                 <astar-icon-transfer />
               </button>

tests/assets-transactions-evm.spec.ts

@@ -60,8 +60,7 @@ test.describe('account panel', () => {
     context: BrowserContext;
   }) => {
     // transfer test (from native to evm) :: need to testing
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
+    page.getByTestId('transfer-link-button').click();
     const faucetAmount = BigInt(200);
     await page.getByPlaceholder('Destination Address').fill(ALICE_EVM_ADDRESS);
     await page.getByPlaceholder('0.0').fill(faucetAmount.toString());

tests/test_specs/assets-transactions.spec.ts

@@ -48,9 +48,7 @@ test.describe('account panel', () => {
   // Test case: AS001
   test('should transfer tokens from Alice to Bob', async ({ page, context }) => {
     const transferAmount = BigInt(1000);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
-
+    page.getByTestId('transfer-link-button').click();
     await page.getByPlaceholder('Destination Address').fill(BOB_ADDRESS);
     await page.getByPlaceholder('0.0').fill(transferAmount.toString());
     await page.getByRole('button', { name: 'Confirm' }).click();
@@ -70,9 +68,7 @@ test.describe('account panel', () => {
     await selectMultisigAccount(page, context, false);
     // Memo: PolkaSafe SDK will check the balance of the Multisig account on mainnet before sending the transaction (the SDK through an error if the balance is not enough)
     const transferAmount = BigInt(1);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
-
+    page.getByTestId('transfer-link-button').click();
     await page.getByPlaceholder('Destination Address').fill(BOB_ADDRESS);
     await page.getByPlaceholder('0.0').fill(transferAmount.toString());
     await page.getByRole('button', { name: 'Confirm' }).click();
@@ -84,9 +80,7 @@ test.describe('account panel', () => {
     await selectMultisigAccount(page, context, true);
     // Memo: PolkaSafe SDK will check the balance of the Multisig account on mainnet before sending the transaction (the SDK through an error if the balance is not enough)
     const transferAmount = BigInt(1);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
-
+    page.getByTestId('transfer-link-button').click();
     await page.getByPlaceholder('Destination Address').fill(BOB_ADDRESS);
     await page.getByPlaceholder('0.0').fill(transferAmount.toString());
     await page.getByRole('button', { name: 'Confirm' }).click();
@@ -101,9 +95,7 @@ test.describe('account panel', () => {
     page: Page;
   }) => {
     const baseTransferAmount = BigInt(1000);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
-
+    page.getByTestId('transfer-link-button').click();
     const aliceBalanceBeforeTransaction = await getBalance(ALICE_ADDRESS);
     await page.getByPlaceholder('Destination Address').fill(BOB_ADDRESS);
 
@@ -132,8 +124,7 @@ test.describe('account panel', () => {
     page: Page;
     context: BrowserContext;
   }) => {
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
+    page.getByTestId('transfer-link-button').click();
     const faucetAmount = BigInt(200);
     await page.getByPlaceholder('Destination Address').fill(ALICE_EVM_ADDRESS);
     await page.getByPlaceholder('0.0').fill(faucetAmount.toString());

tests/test_specs/assets.spec.ts

@@ -57,12 +57,10 @@ test.describe('account panel', () => {
     await expect(page.locator('.noti-content')).toBeVisible();
   });
 
-  // test('account expander works', async ({ page }) => {
-  //   await page.locator('.icon--expand').first().click();
-  //   const transferButton = page.locator('#asset-expand').getByRole('button', { name: 'Transfer' });
-  //   await expect(transferButton).toBeVisible();
-
-  //   await page.locator('.icon--expand').first().click();
-  //   await expect(transferButton).not.toBeVisible();
-  // });
+  test('account expander works', async ({ page }) => {
+    const transferButton = page.getByTestId('transfer-link-button');
+    await expect(transferButton).toBeVisible();
+    await page.locator('.icon--expand').first().click();
+    await expect(page.getByText('Vesting')).toBeVisible();
+  });
 });

tests/test_specs/reserve-transfer-asset-xcm.spec.ts

@@ -40,8 +40,7 @@ test.beforeEach(async ({ page, context }) => {
 test.describe('Test case: XCM006', () => {
   test('should transfer Alice ASTR tokens from Astar to Acala', async ({ page, context }) => {
     const transferAmount = BigInt(1000);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
+    page.getByTestId('transfer-link-button').click();
     await page.getByText('Cross-chain Transfer').click();
     await page.getByRole('main').getByRole('button').first().click();
     await page.locator('#amount').fill(transferAmount.toString());
@@ -64,8 +63,7 @@ test.describe('Test case: XCM006', () => {
 test.describe('Test case: XCM003', () => {
   test('should transfer Alice ASTR tokens from Acala to Astar', async ({ page, context }) => {
     const transferAmount = BigInt(900);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
+    page.getByTestId('transfer-link-button').click();
     await page.getByText('Cross-chain Transfer').click();
 
     // memo wait for from/to values to switch on UI, because if switch happens after amount is entered, the amount would be cleared
@@ -92,8 +90,7 @@ test.describe('Test case: XCM004', () => {
   test('should transfer Alice ACA tokens from Astar to Acala', async ({ page, context }) => {
     const assetId = '18446744073709551616';
     const transferAmount = BigInt(1000);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
+    page.getByTestId('transfer-link-button').click();
     await page.getByText('Cross-chain Transfer').click();
 
     await page.getByRole('main').getByRole('button').first().click();
@@ -124,8 +121,7 @@ test.describe('Test case: XCM001', () => {
   test('should transfer Alice ACA tokens from Acala to Astar', async ({ page, context }) => {
     const assetId = '18446744073709551616';
     const transferAmount = BigInt(900);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
+    page.getByTestId('transfer-link-button').click();
     await page.getByText('Cross-chain Transfer').click();
 
     await page
@@ -155,8 +151,7 @@ test.describe('Test case: XCM001-1', () => {
   test('should transfer Alice DOT tokens from Polkadot to Astar', async ({ page, context }) => {
     const assetId = '340282366920938463463374607431768211455';
     const transferAmount = BigInt(100);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
+    page.getByTestId('transfer-link-button').click();
     await page.getByText('Cross-chain Transfer').click();
 
     await page.locator('div:nth-child(3) > .wrapper--select-chain').click();
@@ -186,8 +181,7 @@ test.describe('Test case: XCM004-1', () => {
   test('should transfer Alice DOT tokens from Astar to Polkadot', async ({ page, context }) => {
     const assetId = '340282366920938463463374607431768211455';
     const transferAmount = BigInt(100);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
+    page.getByTestId('transfer-link-button').click();
     await page.getByText('Cross-chain Transfer').click();
     await page.getByRole('main').getByRole('button').first().click();
 
@@ -218,8 +212,7 @@ test.describe('Test case: XCM001-2', () => {
   test('should transfer Alice USDT tokens from Statemint to Astar', async ({ page, context }) => {
     const assetId = '4294969280';
     const transferAmount = BigInt(10000);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
+    page.getByTestId('transfer-link-button').click();
     await page.getByText('Cross-chain Transfer').click();
 
     await page.locator('div:nth-child(3) > .wrapper--select-chain').click();
@@ -249,8 +242,7 @@ test.describe('Test case: XCM004-2', () => {
   test('should transfer Alice USDT tokens from Astar to Statemint', async ({ page, context }) => {
     const assetId = '4294969280';
     const transferAmount = BigInt(10000);
-    await page.locator('.icon--expand').first().click();
-    await page.locator('#asset-expand').getByRole('button', { name: 'Transfer' }).click();
+    page.getByTestId('transfer-link-button').click();
     await page.getByText('Cross-chain Transfer').click();
     await page.getByRole('main').getByRole('button').first().click();