Merge Trading branch to main

.github/workflows/playwright.yml

@@ -1,9 +1,9 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, master, feature/withdraw-token ]
+    branches: [ main, master, feature/trading ]
   pull_request:
-    branches: [ main, master, feature/withdraw-token ]
+    branches: [ main, master, feature/trading ]
 jobs:
   test:
     timeout-minutes: 60

pages/PhantomPage.ts

@@ -19,7 +19,6 @@ export class PhantomPage{
     readonly amountTextbox: Locator
     readonly depositBtnn: Locator
     readonly errorAmountMsg: Locator
-
 
     constructor (page:Page){
         this.page=page;

pages/TradeTradePage.page.ts

@@ -3,14 +3,77 @@ export class TradeTradePage{
     readonly page: Page;
    readonly headerConnectWallet;
    readonly rightSideConnectWallet;
+   readonly opTokenOption: Locator
+   readonly spotTab: Locator
+   readonly searchToken: Locator
+   readonly swthUSDOption: Locator
+   readonly amountToken: Locator
+   readonly buyBtn: Locator
+   readonly confirmBtn: Locator
+   readonly orderPlacedPopup: Locator
+   readonly orderedCancelledPopup: Locator
+   readonly cancelBtn: Locator
+   readonly cancelAllBtn: Locator
+   readonly switchingBtn: Locator
+   readonly sellBtn: Locator
+   readonly marketBtn: Locator
+   readonly amountOnMarket: Locator
+   readonly tradeExecutedPopup: Locator
 
     constructor(page: Page){
         this.page=page;
         this.headerConnectWallet=this.page.getByRole('button', { name: 'Connect Wallet' }).first();
         this.rightSideConnectWallet=this.page.getByRole('button', { name: 'Connect Wallet' }).nth(1);
+        this.opTokenOption = this.page.getByRole('img', { name: 'OP' })
+        this.spotTab = this.page.getByRole('button', { name: 'Spot', exact: true })
+        this.searchToken = this.page.getByRole('textbox', { name: 'e.g. “SWTH” or “BTC”' })
+        this.swthUSDOption = this.page.locator('#root').getByText('SWTH / USD', { exact: true })
+        this.amountToken = this.page.getByRole('spinbutton').nth(1)
+        this.amountOnMarket = this.page.getByRole('spinbutton').first()
+        this.buyBtn = this.page.getByRole('button', { name: 'Buy SWTH', exact: true })
+        this.confirmBtn = this.page.getByRole('button', { name: 'Confirm' })
+        this.orderPlacedPopup = this.page.getByText('Order Placed', { exact: true })
+        this.orderedCancelledPopup = this.page.getByText('Order Cancelled')
+        this.cancelBtn = this.page.getByRole('button', { name: 'Cancel', exact: true })
+        this.cancelAllBtn = this.page.getByRole('columnheader', { name: 'Cancel All' })
+        this.switchingBtn = this.page.locator("button:has(span:has-text('Buy SWTH'))").locator("xpath=following-sibling::button")
+        this.sellBtn = this.page.getByRole('button', { name: 'Sell SWTH', exact: true })
+        this.marketBtn = this.page.getByRole('button', { name: 'Market', exact: true })
+        this.tradeExecutedPopup = this.page.getByText('Trade Executed', { exact: true })
     }
 
     async goToTradePage(){
         await this.page.goto('https://beta-app.dem.exchange/trade');
     }
+
+    async verifyTableData(expectedData: Array<{ [key: string]: string }>) {
+        const table = this.page.locator('//table[thead//th[contains(text(), "Date")]]');
+        await expect(table).toBeVisible();
+
+        const headers = await table.locator('thead tr th').allInnerTexts();
+        console.log('Column headers:', headers);
+
+        const columnIndexes: { [key: string]: number } = {};
+        headers.forEach((header, index) => {
+          columnIndexes[header.trim()] = index + 1;
+        });
+        console.log('Column Index:', columnIndexes)
+
+        for (let rowIndex = 0; rowIndex < expectedData.length; rowIndex++) {
+          const row = table.locator(`tbody tr:nth-child(${rowIndex + 1})`);
+
+          for (const [columnName, expectedValue] of Object.entries(expectedData[rowIndex])) {
+            if (columnIndexes[columnName] !== undefined) {
+              const columnIndex = columnIndexes[columnName];
+              const cellLocator = row.locator(`td:nth-child(${columnIndex})`);
+
+              await expect(cellLocator).toHaveText(expectedValue);
+              console.log(`Row ${rowIndex + 1}, column "${columnName}" verified: "${expectedValue}"`);
+            } else {
+              console.warn(`Column "${columnName}" not found!`);
+            }
+          }
+        }
+      }
+
 }

pages/WithdrawPage.ts

@@ -3,22 +3,28 @@ import { type Locator, type Page } from '@playwright/test';
 export class WithdrawPage{
     readonly page: Page;
     readonly carbonGroupUSD: Locator
+    readonly selectToken: Locator
     readonly swthTokenOption: Locator
     readonly recipientAddrTextbox: Locator
     readonly amountTextbox: Locator
     readonly memoTextbox: Locator
     readonly withdrawBtn: Locator
     readonly transactionSuccess: Locator
+    readonly invalidAddressErrorMsg: Locator
+    readonly invalidAmountErrorMsg: Locator
 
     constructor (page:Page){
         this.page=page;
-        this.carbonGroupUSD = this.page.getByRole('button', { name: 'cUSD USD Carbon Grouped USD' })
+        //this.carbonGroupUSD = this.page.getByRole('button', { name: 'cUSD USD Carbon Grouped USD' })
+        this.selectToken = this.page.getByRole('button', { name: 'Select Token' })
         this.swthTokenOption = this.page.getByRole('cell', { name: 'SWTH SWTH Carbon Token' })
         this.recipientAddrTextbox = this.page.getByRole('textbox', { name: 'swth1q...' })
         this.amountTextbox = this.page.getByRole('spinbutton').first()
         this.memoTextbox = this.page.getByRole('textbox', { name: 'Enter message' })
         this.transactionSuccess = this.page.locator('div').filter({ hasText: /^Transaction Success$/ })
         this.withdrawBtn = this.page.getByRole('button', { name: 'Withdraw' }).nth(1)
+        this.invalidAddressErrorMsg = this.page.getByText('Invalid address. Only enter a')
+        this.invalidAmountErrorMsg = this.page.getByText('Invalid amount. Please enter')
     }
 
 

playwright.config.ts

@@ -12,7 +12,8 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './tests/ConnectWalletsAndDeposit',
+  testDir: './tests',
+  testMatch: '**/*.spec.ts',
   timeout: 60_000,
   /* Run tests in files in parallel */
   fullyParallel: true,

tests/ConnectWalletsAndDeposit/ConnectByViewOnlyMode.spec.ts → tests/ConnectWallets/ConnectByViewOnlyMode.spec.ts

@@ -17,7 +17,7 @@ test.beforeAll('Launch browser context with permission', async () => {
 
 })
 
-test('Connect wallet by View Only Mode', async () => {
+test.skip('Connect wallet by View Only Mode', async () => {
   test.setTimeout(90_000)
   const homePage = new HomePage(page)
   await homePage.goToHomePage()

tests/ConnectWalletsAndDeposit/ConnectEncryptedKeyWallet.spec.ts → tests/ConnectWallets/ConnectEncryptedKeyWallet.spec.ts

@@ -78,13 +78,13 @@ test.describe.serial('Connect Leap wallet  by Encrypted Key & Verify deposit', (
   test('Verify that the withdraw can be executed with other wallets address', async () => {
     const depositPage = new DepositPage(page)
     await depositPage.depositBtn.click()
-    await depositPage.myBrowerWallet.click()
+    //await depositPage.myBrowerWallet.click()
 
     const homePage = new HomePage(page)
     await homePage.withdrawnTab.click()
 
     const withdrawPage = new WithdrawPage(page)
-    await withdrawPage.carbonGroupUSD.click()
+    await withdrawPage.selectToken.click()
     await withdrawPage.swthTokenOption.click()
     await withdrawPage.recipientAddrTextbox.fill(phantomSwthAddress)
     await withdrawPage.amountTextbox.fill('1')

tests/ConnectWalletsAndDeposit/ConnectKeplrWallet.spec.ts → tests/ConnectWallets/ConnectKeplrWallet.spec.ts

@@ -45,7 +45,7 @@ test.beforeAll('Add extension: Keplr', async () => {
   await page.bringToFront()
 
 })
-test('Connect Keplr wallet', async () => {
+test.skip('Connect Keplr wallet', async () => {
   test.setTimeout(120_000)
   const homePage = new HomePage(page)
   await homePage.goToHomePage()

tests/ConnectWalletsAndDeposit/ConnectLeapWallet.spec.ts → tests/ConnectWallets/ConnectLeapWallet.spec.ts

@@ -54,7 +54,7 @@ test.beforeAll('Add extension: Leap', async () => {
 
 })
 
-test.describe.serial('Connect Phantom wallet & Verify withdraw', () => {
+test.describe.serial('Leap wallet ', () => {
   test('Connect Leap wallet', async () => {
     test.setTimeout(150_000)
     const homePage = new HomePage(page)
@@ -113,13 +113,13 @@ test.describe.serial('Connect Phantom wallet & Verify withdraw', () => {
   test('Verify that the withdraw can be executed with other wallets address', async () => {
     const depositPage = new DepositPage(page)
     await depositPage.depositBtn.click()
-    await depositPage.myBrowerWallet.click()
+    //await depositPage.myBrowerWallet.click()
 
     const homePage = new HomePage(page)
     await homePage.withdrawnTab.click()
 
     const withdrawPage = new WithdrawPage(page)
-    await withdrawPage.carbonGroupUSD.click()
+    await withdrawPage.selectToken.click()
     await withdrawPage.swthTokenOption.click()
     await withdrawPage.recipientAddrTextbox.fill(phantomSwthAddress)
     await withdrawPage.amountTextbox.fill('1')

tests/ConnectWalletsAndDeposit/ConnectMetaMaskWallet.spec.ts → tests/ConnectWallets/ConnectMetaMaskWallet.spec.ts

@@ -50,7 +50,7 @@ test.beforeAll('Add extension: MetaMask', async () => {
 })
 
 test.describe.serial('Connect MetaMask wallet & Verify deposit', () => {
-  test('Connect MetaMask wallet', async () => {
+  test.skip('Connect MetaMask wallet', async () => {
     test.setTimeout(200_000)
     const homePage = new HomePage(page)
     await homePage.goToHomePage()
@@ -103,41 +103,30 @@ test.describe.serial('Connect MetaMask wallet & Verify deposit', () => {
 
   })
 
-    test.skip('Verify that the validation form is presented when user performed deposit amount = 0', async () => {
-      const depositPage = new DepositPage(page)
-      await depositPage.depositBtn.click()
-      await depositPage.myBrowerWallet.click()
-      await depositPage.selectNetworkBtn.click()
-      await depositPage.networkOption('Ethereum').click()
-      await depositPage.amountTextbox.fill('0')
-      await depositPage.metaMaskDepositBtn.click()
-      await expect(depositPage.errorAmountMsg).toBeVisible()
-    })
-
-    test('Verify that the withdraw can be executed with other wallets address', async () => {
-        const depositPage = new DepositPage(page)
-        await depositPage.depositBtn.click()
-        await depositPage.myBrowerWallet.click()
-
-        const homePage = new HomePage(page)
-        await homePage.withdrawnTab.click()
-
-        const withdrawPage = new WithdrawPage(page)
-        await withdrawPage.carbonGroupUSD.click()
-        await withdrawPage.swthTokenOption.click()
-        await withdrawPage.recipientAddrTextbox.fill(phantomSwthAddress)
-        await withdrawPage.amountTextbox.fill('1')
-
-        const [popup] = await Promise.all([
-          browserContext.waitForEvent('page'),
-          await withdrawPage.withdrawBtn.click()
-        ]);
-        await popup.waitForLoadState()
-
-        const confirmPage = new MetaMaskPage(popup)
-        await confirmPage.confirmFooterBtn.waitFor({ state: 'visible' })
-        await confirmPage.confirmFooterBtn.click({ delay: 1000 })
-
-        await expect(withdrawPage.transactionSuccess).toBeVisible()
-    })
+  test.skip('Verify that the withdraw can be executed with other wallets address', async () => {
+    const depositPage = new DepositPage(page)
+    await depositPage.depositBtn.click()
+    //await depositPage.myBrowerWallet.click()
+
+    const homePage = new HomePage(page)
+    await homePage.withdrawnTab.click()
+
+    const withdrawPage = new WithdrawPage(page)
+    await withdrawPage.selectToken.click()
+    await withdrawPage.swthTokenOption.click()
+    await withdrawPage.recipientAddrTextbox.fill(phantomSwthAddress)
+    await withdrawPage.amountTextbox.fill('1')
+
+    const [popup] = await Promise.all([
+      browserContext.waitForEvent('page'),
+      await withdrawPage.withdrawBtn.click()
+    ]);
+    await popup.waitForLoadState()
+
+    const confirmPage = new MetaMaskPage(popup)
+    await confirmPage.confirmFooterBtn.waitFor({ state: 'visible' })
+    await confirmPage.confirmFooterBtn.click({ delay: 1000 })
+
+    await expect(withdrawPage.transactionSuccess).toBeVisible()
+  })
 })

tests/ConnectWalletsAndDeposit/ConnectPhantomWallet.spec.ts → tests/ConnectWallets/ConnectPhantomWallet.spec.ts

@@ -5,7 +5,6 @@ import { TradeTradePage } from '../../pages/TradeTradePage.page';
 import { ConnectWalletPage } from '../../pages/ConnectWalletPage';
 import { PhantomPage } from '../../pages/PhantomPage';
 import { DepositPage } from '../../pages/DepositPage';
-import { WithdrawPage } from '../../pages/WithdrawPage';
 
 let page: Page
 let browserContext: BrowserContext
@@ -42,7 +41,7 @@ test.beforeAll('Add extension: Phantom', async () => {
   await page.bringToFront()
 
 })
-test.describe.serial('Connect Phantom wallet & Verify deposit', () => {
+test.describe.serial(' Phantom wallet ', () => {
   test('Connect Phantom wallet', async () => {
     test.setTimeout(180_000)
     const homePage = new HomePage(page)
@@ -76,6 +75,7 @@ test.describe.serial('Connect Phantom wallet & Verify deposit', () => {
     await newPage2.waitForLoadState()
 
     const phantomPage2 = new PhantomPage(newPage2)
+    await phantomPage2.connectBtn.waitFor({ state: 'visible' })
     await phantomPage2.connectBtn.click({ delay: 1000 })
 
     await page.waitForTimeout(10_000)
@@ -102,31 +102,5 @@ test.describe.serial('Connect Phantom wallet & Verify deposit', () => {
     await depositPage.phantomDepositBtn.click()
     await expect(depositPage.errorAmountMsg).toBeVisible()
   })
-
-  test('Verify that the withdraw can be executed with other wallets address', async () => {
-    const depositPage = new DepositPage(page)
-    await depositPage.depositBtn.click()
-    await depositPage.myBrowerWallet.click()
-
-    const homePage = new HomePage(page)
-    await homePage.withdrawnTab.click()
-
-    const withdrawPage = new WithdrawPage(page)
-    await withdrawPage.carbonGroupUSD.click()
-    await withdrawPage.swthTokenOption.click()
-    await withdrawPage.recipientAddrTextbox.fill(leapSwthAddress)
-    await withdrawPage.amountTextbox.fill('1')
-
-    const [popup] = await Promise.all([
-      browserContext.waitForEvent('page'),
-      await withdrawPage.withdrawBtn.click()
-    ]);
-    await popup.waitForLoadState()
-
-    const confirmPage = new PhantomPage(popup)
-    await confirmPage.connectBtn.waitFor({ state: 'visible' })
-    await confirmPage.connectBtn.click({ delay: 1000 })
-
-    await expect(withdrawPage.transactionSuccess).toBeVisible()
-  })
-})
+
+})