Fix/meet element change

.github/workflows/playwright.yml

@@ -8,13 +8,13 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shard: [1/6, 2/6, 3/6, 4/6, 5/6, 6/6]
+        tests-name: [TBDTC000001, TBDTC000003, TBDTC000005, TBDTC000008, TBDTC000010, TradeExample]
     defaults:
       run:
         working-directory: ./integration-test
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: 18
     - name: Install Metamask 11.0.0
@@ -24,14 +24,15 @@ jobs:
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps chromium
     - name: Run Playwright tests
-      run: npx playwright test --shard ${{ matrix.shard }} 
+      run: npx playwright test tests/${{ matrix.tests-name}}.spec.ts 
       env: 
         BASE_URL: ${{ github.event.deployment_status.environment_url }}
+        TEST_NAME: ${{ matrix.tests-name}}
     - name: Upload blob report to GitHub Actions Artifacts
       if: always()
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
-        name: all-blob-reports
+        name: blob-report-${{ matrix.tests-name}}
         path: ./blob-report
         retention-days: 1
 
@@ -45,26 +46,27 @@ jobs:
       run:
         working-directory: ./integration-test
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: 18
     - name: Install dependencies
       run: npm i
 
     - name: Download blob reports from GitHub Actions Artifacts
-      uses: actions/download-artifact@v3
+      uses: actions/download-artifact@v4
       with:
-        name: all-blob-reports
         path: ./integration-test/all-blob-reports
+        pattern: blob-report-*
+        merge-multiple: true
 
     - name: Merge into HTML Report
       run: npx playwright merge-reports --reporter html ./all-blob-reports 
 
     - name: Upload HTML report
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
-        name: Playwright-Report-${{ github.run_id}}
+        name: playwright-report-${{github.run_id}}
         path: ./playwright-report
         retention-days: 14
 

.gitignore

@@ -98,7 +98,7 @@ package-lock.json
 
 # Playwright output
 /test-results/
-/playwright-report/
+/playwright-report*
 /playwright/.cache/
 metamask-chrome-11.0.0
 
@@ -133,7 +133,3 @@ src/constants/walletconnect.js
 .DS_Store
 
 .vscode
-
-integration-test/metamask-chrome-11.0.0/
-playwright-report/
-test-results/

integration-test/pages/LandingPage.ts

@@ -6,9 +6,8 @@ export class LandingPage {
   readonly getAnncmnt: Locator;
 
   constructor(page: Page) {
-    const okButton = {name: t('ANNOUNCEMENT_MODAL.OK_BUTTON')};
     this.page = page;
-    this.getAnncmnt = page.getByRole('button', okButton);
+    this.getAnncmnt = page.locator('#AnnouncementModalOkButton');
   }
 
   async goto() {

integration-test/pages/LeaderboardPage.ts

@@ -6,9 +6,8 @@ export class LeaderboardPage {
   readonly getAnncmnt: Locator;
 
   constructor(page: Page) {
-    const okButton = {name: t('ANNOUNCEMENT_MODAL.OK_BUTTON')};
     this.page = page;
-    this.getAnncmnt = page.getByRole('button', okButton);
+    this.getAnncmnt = page.locator('#AnnouncementModalOkButton');
   }
 
   async goto() {

integration-test/pages/MyAssetsPage.ts

@@ -6,23 +6,18 @@ export class MyAssetsPage {
   readonly getAnncmnt: Locator;
 
   constructor(page: Page) {
-    const okButton = {name: t('ANNOUNCEMENT_MODAL.OK_BUTTON')};
     this.page = page;
-    this.getAnncmnt = page.getByRole('button', okButton);
+    this.getAnncmnt = page.locator('#AnnouncementModalOkButton');
   }
 
   // Info: (20231013 - Jacky) Use profile button to go to My Assets page
   async goto() {
     await this.page.goto('./');
-    if (this.getAnncmnt) {
+    if ((await this.getAnncmnt.count()) > 0) {
       await this.getAnncmnt.click();
     }
-    await this.page
-      .locator(
-        '#__next > div > div.w-full.text-center> nav > div > div > div> div.mr-5.inline-flex > div > button'
-      )
-      .click();
-    await this.page.locator('#userDropdown > ul > li:nth-child(1) > button > a').click();
+    await this.page.locator('#UserAvatarButton').click();
+    await this.page.locator('#UserMyAssets').click();
     await expect.soft(this.page).toHaveTitle(/My Assets/);
     if (this.getAnncmnt) {
       await this.getAnncmnt.click();
@@ -31,48 +26,63 @@ export class MyAssetsPage {
 
   // Info: (20231013 - Jacky) Check balance higher than 20
   async checkBalance() {
-    await this.page
-      .locator(
-        '#__next > div > div:nth-child(17) > main > div > div > div.pt-10 > div:nth-child(1) > div > div > div.flex.items-center.justify-center.space-x-2.text-center > button'
-      )
-      .click();
+    await this.page.locator('#ShowBalanceButton').click();
     const assetsAvailable = await this.page
       .locator(
-        '#__next > div > div:nth-child(17) > main > div > div > div.pt-10 > div:nth-child(1) > div > div:nth-child(2) > div:nth-child(3) > div > span:nth-child(1)'
+        '#__next > div > div:nth-child(6) > main > div > div > div.pt-10 > div:nth-child(2) > div:nth-child(3) > span:nth-child(1)'
       )
       .textContent();
-    expect(Number((assetsAvailable as string).replace(',', '').trim())).toBeGreaterThan(20);
+    expect(
+      Number(
+        (assetsAvailable as string)
+          .substring(0, assetsAvailable.length - 4)
+          .replace(',', '')
+          .trim()
+      )
+    ).toBeGreaterThan(20);
   }
 
   async checkTradeLog() {
-    const titleButton = {name: t('MY_ASSETS_PAGE.RECEIPT_SECTION_TRADING_TYPE_TITLE')};
-    const depositButton = {name: t('MY_ASSETS_PAGE.RECEIPT_SECTION_TRADING_TYPE_DEPOSIT')};
-    const openButton = {name: t('MY_ASSETS_PAGE.RECEIPT_SECTION_TRADING_TYPE_CFD_OPEN')};
-    const updateButton = {
-      name: t('MY_ASSETS_PAGE.RECEIPT_SECTION_TRADING_TYPE_CFD_UPDATE'),
-    };
-    const closeButton = {name: t('MY_ASSETS_PAGE.RECEIPT_SECTION_TRADING_TYPE_CFD_CLOSE')};
-    await this.page.getByRole('button', titleButton).click();
     await this.page
       .locator(
-        '#__next > div > div:nth-child(17) > main > div > div > div.pt-10 > div:nth-child(4) > div > div.flex.flex-col.items-center> div > div.relative.mt-2.hidden.w-160px> div > button:nth-child(2)'
+        '#__next > div > div:nth-child(6) > main > div > div > div.pt-10 > div.p-4 > div:nth-child(2) > div > div > div > div:nth-child(1) > div > div:nth-child(2) > div:nth-child(1) > button'
+      )
+      .isVisible();
+
+    await this.page.locator('#TradingTypeMenuButton').click();
+    await this.page.locator('#TypeDepositButton').click();
+    await this.page
+      .locator(
+        '#__next > div > div:nth-child(6) > main > div > div > div.pt-10 > div.p-4 > div:nth-child(2) > div > div > div > div:nth-child(1)> div > div:nth-child(2) > div:nth-child(1) > button'
       )
       .click();
-    await expect.soft(this.page.getByRole('button', depositButton).last()).toBeVisible();
-    await this.page.getByRole('button', depositButton).nth(2).click();
+    await this.page.locator('#HistoryCloseButton').click();
+    await expect
+      .soft(
+        this.page.locator(
+          '#__next > div > div:nth-child(6) > main > div > div > div.pt-10 > div.p-4 > div:nth-child(2) > div > div > div > div:nth-child(1) > div > div:nth-child(2) > div:nth-child(1) > button'
+        )
+      )
+      .toBeVisible();
+    await this.page.locator('#TradingTypeMenuButton').click();
+    await this.page.locator('#TypeOpenButton').click();
     await this.page
       .locator(
-        '#__next > div > div:nth-child(17) > main > div > div > div.pt-10 > div:nth-child(4) > div > div.flex.flex-col.items-center> div > div.relative.mt-2.hidden.w-160px> div > button:nth-child(4)'
+        '#__next > div > div:nth-child(6) > main > div > div > div.pt-10 > div.p-4 > div:nth-child(2) > div > div > div > div:nth-child(1) > div > div:nth-child(2) > div:nth-child(1) > button'
       )
       .click();
-    await expect.soft(this.page.getByRole('button', openButton).last()).toBeVisible();
-    await expect.soft(this.page.getByRole('button', updateButton).last()).toBeVisible();
-    await this.page.getByRole('button', openButton).first().click();
+    if (await this.page.locator('#UpdateFormCloseButton').isVisible()) {
+      await this.page.locator('#UpdateFormCloseButton').click();
+    } else {
+      await this.page.locator('#HistoryModalCloseButton').click();
+    }
+    await this.page.locator('#TradingTypeMenuButton').click();
+    await this.page.locator('#TypeCloseButton').click();
     await this.page
       .locator(
-        '#__next > div > div:nth-child(17) > main > div > div > div.pt-10 > div:nth-child(4) > div > div.flex.flex-col.items-center> div > div.relative.mt-2.hidden.w-160px> div > button:nth-child(5)'
+        '#__next > div > div:nth-child(6) > main > div > div > div.pt-10 > div.p-4 > div:nth-child(2) > div > div > div > div:nth-child(1) > div > div:nth-child(2) > div:nth-child(1) > button'
       )
       .click();
-    await expect.soft(this.page.getByRole('button', closeButton).last()).toBeVisible();
+    await expect.soft(this.page.locator('#HistoryModalCloseButton')).toBeVisible();
   }
 }

integration-test/pages/TradePage.ts

@@ -7,11 +7,8 @@ export class TradePage {
   readonly context: BrowserContext;
 
   constructor(page: Page, context: BrowserContext) {
-    const ANNOUCEMENT_MODAL_OK_BUTTON = t('ANNOUNCEMENT_MODAL.OK_BUTTON');
     this.page = page;
-    this.getAnncmnt = page.getByRole('button', {
-      name: ANNOUCEMENT_MODAL_OK_BUTTON,
-    });
+    this.getAnncmnt = page.locator('#AnnouncementModalOkButton');
     this.context = context;
   }
 
@@ -45,9 +42,7 @@ export class TradePage {
     await newPage.goto('chrome-extension://' + extensionId + '/popup.html');
     await newPage.getByTestId('signature-request-scroll-button').click();
     await newPage.getByTestId('page-container-footer-next').click();
-    await this.page
-      .locator('#__next > div > div:nth-child(11) > div > div > div.flex > button ')
-      .click();
+    await this.page.locator('#UpdateFormCloseButton').click();
     newPage.close();
   }
   async openShortPosition(extensionId: string) {
@@ -60,76 +55,55 @@ export class TradePage {
     await newPage.goto('chrome-extension://' + extensionId + '/popup.html');
     await newPage.getByTestId('signature-request-scroll-button').click();
     await newPage.getByTestId('page-container-footer-next').click();
-    await this.page
-      .locator('#__next > div > div:nth-child(11) > div > div > div.flex > button > svg')
-      .click();
+    await this.page.locator('#UpdateFormCloseButton').click();
     newPage.close();
   }
 
   // Info: (20231013 - Jacky) number="1" means the last position
   async updatePosition(extensionId: string, number = '1') {
-    const positionTab = {name: t('TRADE_PAGE.POSITION_TAB')};
-    const updatePostion = {name: t('POSITION_MODAL.UPDATE_POSITION_TITLE')};
-    const confirmButton = {name: t('POSITION_MODAL.CONFIRM_BUTTON')};
-    await this.page.getByRole('button', positionTab).click();
+    await this.page.waitForTimeout(10000);
+    await this.page.locator('#PositionTabButton').click();
     await this.page
       .locator(
-        '#__next > div > main > div > div:nth-child(3) > div > div > div > div > div:nth-last-child(' +
+        '#__next > div > main > div > div:nth-child(2) > div:nth-child(2) > div > div > div > div > div:nth-last-child(' +
           number +
           ')'
       )
       .click();
-    await this.page
-      .locator(
-        '#__next > div > div:nth-child(11) > div > div > div.flex-col.items-center.text-xs > div.mt-3.flex-col.leading-relaxed.text-lightWhite > div.mb-2.h-50px > div.flex.items-center.justify-between > div:nth-child(3) > div > div'
-      )
-      .click();
-    await this.page
-      .locator(
-        '#__next > div > div:nth-child(11) > div > div > div.flex-col.items-center.text-xs > div.mt-3.flex-col.leading-relaxed.text-lightWhite > div.mb-5.h-70px > div:nth-child(3) > div > input'
-      )
-      .check();
-    if (this.page.locator('body > vercel-live-feedback')) {
+    const pagePromise = this.context.newPage();
+    await this.page.locator('#UpdateFormTpToggle').click();
+    await this.page.locator('#UpdateFormSlToggle').click();
+    await this.page.locator('#UpdateFormGslCheckbox').check();
+    if ((await this.page.locator('vercel-live-feedback').count()) > 0) {
       await this.page.$eval('vercel-live-feedback', el => el.remove());
     }
-    await this.page.getByRole('button', updatePostion).click();
-    await this.page.getByRole('button', confirmButton).click();
-    const pagePromise = this.context.newPage();
+    await this.page.locator('#UpdateFormButton').click();
+    await this.page.locator('#UpdateSubmitButton').click();
     const newPage = await pagePromise;
     await newPage.goto('chrome-extension://' + extensionId + '/popup.html');
     await newPage.getByTestId('signature-request-scroll-button').click();
     await newPage.getByTestId('page-container-footer-next').click();
-    await this.page
-      .locator('#__next > div > div:nth-child(11) > div > div > div.flex > button > svg')
-      .click();
+    await this.page.locator('#UpdateFormCloseButton').click();
     newPage.close();
   }
 
   // Info: (20231013 - Jacky) number="1" means the last position
   async closePosition(extensionId: string, number = '1') {
-    const POSITION_TAB = {name: t('TRADE_PAGE.POSITION_TAB')};
-    const CLOSE_POSITION_TITLE = {name: t('POSITION_MODAL.CONFIRM_BUTTON')};
-    await this.page.getByRole('button', POSITION_TAB).click();
+    await this.page.locator('#PositionTabButton').click();
     await this.page
       .locator(
-        '#__next > div > main > div > div.pointer-events-none.fixed.right-0.top-82px.z-10.flex.overflow-x-hidden.overflow-y-hidden.outline-none > div > div > div > div > div:nth-last-child(' +
+        '#__next > div > main > div > div:nth-child(2) > div:nth-child(2) > div > div > div > div > div:nth-last-child(' +
           number +
-          ') > div > div:nth-child(3) > div:nth-child(3)'
+          ') > div > div:nth-child(3) > div:nth-child(3) > div:nth-child(1)'
       )
       .click();
-    // if (this.page.locator('body > vercel-live-feedback')) {
-    //   await this.page.$eval('vercel-live-feedback', el => el.remove());
-    // }
     const pagePromise = this.context.newPage();
-    await this.page.getByRole('button', CLOSE_POSITION_TITLE).click();
-    // await this.page.waitForTimeout(2000);
+    await this.page.locator('#ClosePositionButton').click();
     const newPage = await pagePromise;
     await newPage.goto('chrome-extension://' + extensionId + '/popup.html');
     await newPage.getByTestId('signature-request-scroll-button').click();
     await newPage.getByTestId('page-container-footer-next').click();
-    await this.page
-      .locator('#__next > div > div:nth-child(11) > div > div > div.flex > button > svg')
-      .click();
+    await this.page.locator('#HistoryModalCloseButton').click();
     newPage.close();
   }
 }