✨ feat: New network and switch network Cypress APIs (#1198)

* feat: Cypress API expanded by confirmTransactionAndWaitForMining

* feat: new network and switch network Cypress APIs

wallets/metamask/src/cypress/configureSynpress.ts

@@ -1,7 +1,7 @@
 import type { BrowserContext, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { ensureRdpPort } from '@synthetixio/synpress-core'
-import { type CreateAnvilOptions, createPool } from '@viem/anvil'
+import { type CreateAnvilOptions, type Pool, createPool } from '@viem/anvil'
 import { waitFor } from '../playwright/utils/waitFor'
 import HomePageSelectors from '../selectors/pages/HomePage'
 import Selectors from '../selectors/pages/HomePage'
@@ -19,6 +19,8 @@ let metamaskExtensionId: string
 
 let metamaskExtensionPage: Page
 
+let pool: Pool
+
 // TODO: Implement if needed to change the focus between pages
 // let cypressPage: Page
 
@@ -151,7 +153,7 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
     },
 
     async createAnvilNode(options?: CreateAnvilOptions) {
-      const pool = createPool()
+      pool = createPool()
 
       const nodeId = Array.from(pool.instances()).length
       const anvil = await pool.start(nodeId, options)
@@ -164,6 +166,11 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
       return { anvil, rpcUrl, chainId }
     },
 
+    async emptyAnvilNode() {
+      await pool.empty()
+      return true
+    },
+
     async connectToAnvil({
       rpcUrl,
       chainId
@@ -226,6 +233,22 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
       return true
     },
 
+    async approveNewNetwork() {
+      const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
+
+      await metamask.approveNewNetwork()
+
+      return true
+    },
+
+    async approveSwitchNetwork() {
+      const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
+
+      await metamask.approveSwitchNetwork()
+
+      return true
+    },
+
     // Others
 
     async providePublicEncryptionKey() {
@@ -278,6 +301,19 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
         .catch(() => {
           return false
         })
+    },
+
+    async confirmTransactionAndWaitForMining() {
+      const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
+
+      return metamask
+        .confirmTransactionAndWaitForMining()
+        .then(() => {
+          return true
+        })
+        .catch(() => {
+          return false
+        })
     }
   })
 

wallets/metamask/src/cypress/support/synpressCommands.ts

@@ -31,7 +31,10 @@ declare global {
         chainId: number
       }>
       connectToAnvil(): Chainable<void>
+      emptyAnvilNode(): Chainable<void>
       addNetwork(network: Network): Chainable<void>
+      approveNewNetwork(): Chainable<void>
+      approveSwitchNetwork(): Chainable<void>
 
       deployToken(): Chainable<void>
       addNewToken(): Chainable<void>
@@ -40,6 +43,7 @@ declare global {
       decrypt(): Chainable<void>
       confirmSignature(): Chainable<void>
       confirmTransaction(): Chainable<void>
+      confirmTransactionAndWaitForMining(): Chainable<void>
     }
   }
 }
@@ -95,9 +99,18 @@ export default function synpressCommands() {
       return cy.task('addNetwork', network)
     })
   })
+  Cypress.Commands.add('emptyAnvilNode', () => {
+    return cy.task('emptyAnvilNode')
+  })
   Cypress.Commands.add('addNetwork', (network: Network) => {
     return cy.task('addNetwork', network)
   })
+  Cypress.Commands.add('approveNewNetwork', () => {
+    return cy.task('approveNewNetwork')
+  })
+  Cypress.Commands.add('approveSwitchNetwork', () => {
+    return cy.task('approveSwitchNetwork')
+  })
 
   // Token
 
@@ -122,4 +135,7 @@ export default function synpressCommands() {
   Cypress.Commands.add('confirmTransaction', () => {
     return cy.task('confirmTransaction')
   })
+  Cypress.Commands.add('confirmTransactionAndWaitForMining', () => {
+    return cy.task('confirmTransactionAndWaitForMining')
+  })
 }

wallets/metamask/test/cypress/addNewToken.cy.ts

@@ -1,6 +1,5 @@
 before(() => {
   cy.getNetwork().then((network) => {
-    console.log(network)
     if (network !== 'Anvil') {
       cy.switchNetwork('Anvil')
     }

wallets/metamask/test/cypress/approveNewNetwork.cy.ts

@@ -0,0 +1,16 @@
+it('should add a new network', () => {
+  cy.createAnvilNode({
+    chainId: 1338,
+    port: 8546
+  }).then(() => {
+    cy.get('#addEthereumChain').click()
+
+    cy.approveNewNetwork().then(() => {
+      cy.approveSwitchNetwork().then(() => {
+        cy.get('#chainId').should('have.text', '0x53a')
+
+        cy.emptyAnvilNode()
+      })
+    })
+  })
+})

wallets/metamask/test/cypress/approveSwitchNetwork.cy.ts

@@ -0,0 +1,16 @@
+it('should switch to the requested network', () => {
+  cy.createAnvilNode({
+    chainId: 1338,
+    port: 8546
+  }).then(() => {
+    cy.switchNetwork('Ethereum Mainnet').then(() => {
+      cy.get('#chainId').should('have.text', '0x1')
+
+      cy.get('#switchEthereumChain').click()
+
+      cy.approveSwitchNetwork().then(() => {
+        cy.get('#chainId').should('have.text', '0x53a')
+      })
+    })
+  })
+})

wallets/metamask/test/cypress/batchTransfer.cy.ts

@@ -0,0 +1,19 @@
+before(() => {
+  cy.get('#deployERC1155Button').click()
+
+  cy.confirmTransaction().then(() => {
+    cy.wait(5000)
+
+    cy.get('#batchMintButton').click()
+
+    cy.confirmTransactionAndWaitForMining()
+  })
+})
+
+it('should perform batch ERC115 transfer', () => {
+  cy.get('#batchTransferFromButton').click()
+
+  cy.confirmTransaction().then(() => {
+    cy.get('#erc1155Status').should('have.text', 'Batch Transfer From completed')
+  })
+})