chore: restore e2e tests

.env

@@ -1,8 +0,0 @@
-#######################################
-# End To End Test
-#######################################
-# ⚠️ Required for E2E tests to run
-
-# Cypress Integration Tests
-CYPRESS_INTEGRATION_TEST_PRIVATE_KEY=
-CYPRESS_INTEGRATION_TESTS_ALCHEMY_KEY=

.env.local.example

@@ -2,4 +2,15 @@
 
 # Enable Telegram development bypass mode
 # When enabled, Telegram verification is bypassed and uses a mock user (@devuser)
-REACT_APP_TG_DEV_BYPASS=true
+REACT_APP_TG_DEV_BYPASS=true
+
+
+#######################################
+# End To End Test
+#######################################
+# ⚠️ Required for E2E tests to run
+
+# Cypress Integration Tests
+CYPRESS_INTEGRATION_TEST_PRIVATE_KEY=
+CYPRESS_INTEGRATION_TESTS_ALCHEMY_KEY=
+CYPRESS_INTEGRATION_TESTS_INFURA_KEY=

.github/workflows/ci.yml

@@ -201,6 +201,7 @@ jobs:
         env:
           CYPRESS_INTEGRATION_TEST_PRIVATE_KEY: ${{ secrets.CYPRESS_INTEGRATION_TEST_PRIVATE_KEY }}
           CYPRESS_INTEGRATION_TESTS_ALCHEMY_KEY: ${{ secrets.CYPRESS_INTEGRATION_TESTS_ALCHEMY_KEY }}
+          CYPRESS_INTEGRATION_TESTS_INFURA_KEY: ${{ secrets.CYPRESS_INTEGRATION_TESTS_INFURA_KEY }}
 
       # - uses: actions/upload-artifact@v3
       #   if: always()

README.md

@@ -117,7 +117,8 @@ yarn run cosmos
 > your root `.env.local` file with:
 >
 > - `CYPRESS_INTEGRATION_TEST_PRIVATE_KEY=<your-private-key>`: Private key
-> - `CYPRESS_INTEGRATION_TESTS_ALCHEMY_KEY=<your-alchemy-key>`: Alchemy key
+> - `CYPRESS_INTEGRATION_TESTS_INFURA_KEY=<your-infura-key>`: Infura key
+> - `CYPRESS_INTEGRATION_TESTS_ALCHEMY_KEY=<your-alchemy-key>`: Alchemy key (preferred if both are set)
 
 To launch it with our development server (so you have live-reloading):
 
@@ -171,7 +172,7 @@ REACT_APP_NETWORK_URL_43114: https://...
 Additionally, if you plan to run the integration tests locally you must define:
 
 ```ini
-INTEGRATION_TESTS_ALCHEMY_KEY: YOUR_ALCHEMY_KEY
+INTEGRATION_TESTS_INFURA_KEY: YOUR_INFURA_KEY
 INTEGRATION_TESTS_PRIVATE_KEY: YOUR_TEST_WALLET_PRIVATE_KEY
 ```
 

apps/cowswap-frontend-e2e/cypress.config.ts

@@ -30,7 +30,7 @@ export default defineConfig({
     supportFile: 'src/support/index.ts',
     video: false,
     screenshotOnRunFailure: false,
-    defaultCommandTimeout: 5_000,
-    pageLoadTimeout: 15_000,
+    defaultCommandTimeout: 25_000,
+    pageLoadTimeout: 25_000,
   },
 })

apps/cowswap-frontend-e2e/src/config.ts

@@ -0,0 +1,2 @@
+export const SMALL_TIMEOUT = 10_000
+export const LARGE_TIMEOUT = 20_000

apps/cowswap-frontend-e2e/src/e2e/fiat-amounts.test.ts

@@ -12,11 +12,16 @@ function parseFiatAmountText(text: string): number {
 
 describe('Fiat amounts', () => {
   beforeEach(() => {
+    cy.intercept('GET', '**/tokens/**/usdPrice', {
+      statusCode: 200,
+      body: { price: 2000 },
+    }).as('usdPrice')
     cy.visit('/#/11155111/swap/WETH/COW')
   })
 
   it('Should change fiat amount after changing currency amount', () => {
     cy.unlockCrossChainSwap()
+    cy.wait('@usdPrice')
     getInputToken().type('1')
 
     // Get fiat amount for 1 WETH
@@ -27,7 +32,7 @@ describe('Fiat amounts', () => {
       getInputToken().clear().type('2')
 
       // Get fiat amount for 2 WETH
-      getInputFiatAmount().then((fiatAmountTwoText) => {
+      getInputFiatAmount().should((fiatAmountTwoText) => {
         const fiatAmountTwo = parseFiatAmountText(fiatAmountTwoText)
         const onePercent = fiatAmountOne * 0.01
 

apps/cowswap-frontend-e2e/src/e2e/limit-orders.test.ts

@@ -1,9 +1,11 @@
+import { SMALL_TIMEOUT } from '../config'
+
 const CHAIN_ID = 11155111
 const SELL_TOKEN = 'WETH'
 const BUY_TOKEN = 'COW'
 
 function unlock(): void {
-  cy.get('#unlock-limit-orders-btn', { timeout: 10000 }).click()
+  cy.get('#unlock-limit-orders-btn', { timeout: SMALL_TIMEOUT }).click()
 }
 
 function navigate(path = '', unlockLimitOrders = true): void {

apps/cowswap-frontend-e2e/src/e2e/lists.test.ts

@@ -1,11 +1,15 @@
+import { LARGE_TIMEOUT } from '../config'
+
 describe('Lists', () => {
   beforeEach(() => {
     cy.visit('/#/11155111/swap/')
   })
 
   it('change list', () => {
     cy.unlockCrossChainSwap()
-    cy.get('#output-currency-input .open-currency-select-button', { timeout: 20_000 }).should('be.enabled').click()
+    cy.get('#output-currency-input .open-currency-select-button', { timeout: LARGE_TIMEOUT })
+      .should('be.enabled')
+      .click()
     cy.get('#list-token-manage-button').click()
     cy.get('#tokens-lists-table > div').should('have.length.greaterThan', 0)
   })

apps/cowswap-frontend-e2e/src/e2e/search.test.ts

@@ -1,5 +1,7 @@
+import { LARGE_TIMEOUT } from '../config'
+
 function openTokenSelector(): void {
-  cy.get('.open-currency-select-button').first({ timeout: 20_000 }).should('be.enabled').click()
+  cy.get('.open-currency-select-button').first({ timeout: LARGE_TIMEOUT }).should('be.enabled').click()
 }
 
 // mock test to pass CI until we fix the test

apps/cowswap-frontend-e2e/src/e2e/swap.test.ts

@@ -60,10 +60,11 @@ describe('Swap (custom)', () => {
   it('can swap ETH for USDC', () => {
     cy.visit(`/#/${CHAIN_ID}/swap/ETH/${USDC}`, {
       onBeforeLoad: async (win) => {
+        const address = await win.ethereum.signer.getAddress()
         mockSendCall(win.ethereum, [
           handleNativeBalance(
             win.ethereum,
-            await win.ethereum.signer.getAddress(),
+            address,
             5n * 10n ** 18n, // 18 decimals
           ),
         ])
@@ -83,10 +84,11 @@ describe('Swap (custom)', () => {
   it('Swap ETH for USDC - shows optional Switch to WETH', () => {
     cy.visit(`/#/${CHAIN_ID}/swap/ETH/${USDC}`, {
       onBeforeLoad: async (win) => {
+        const address = await win.ethereum.signer.getAddress()
         mockSendCall(win.ethereum, [
           handleNativeBalance(
             win.ethereum,
-            await win.ethereum.signer.getAddress(),
+            address,
             5n * 10n ** 18n, // 18 decimals
           ),
         ])
@@ -100,8 +102,11 @@ describe('Swap (custom)', () => {
     cy.get('#output-currency-input .token-amount-input').should('not.equal', '')
     acceptFeesExceedWarning()
     cy.wait(1000)
-    cy.get('#classic-eth-flow-banner').should('contain', 'Wrap your ETH and use the classic WETH experience').click()
-    cy.get('#wrap-native').should('contain', 'Wrap my ETH and swap').click()
+    cy.get('#classic-eth-flow-banner')
+      .should('contain', 'Switch to the classic')
+      .and('contain', 'experience and benefit!')
+      .click()
+    cy.get('#switch-to-wrapped').should('contain', 'Switch to WETH').click()
   })
 
   describe('url params', () => {

apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts

@@ -1,3 +1,4 @@
+import { SMALL_TIMEOUT } from '../config'
 import { handleNativeBalance, mockSendCall } from '../support/mocks/mockSendCall'
 
 const COW = '0x0625aFB445C3B6B7B929342a04A22599fd5dBB59'
@@ -78,10 +79,11 @@ describe('Swap (mod)', () => {
   it('can find COW and swap Native for COW', () => {
     cy.visit('/#/11155111/swap', {
       onBeforeLoad: async (win) => {
+        const address = await win.ethereum.signer.getAddress()
         mockSendCall(win.ethereum, [
           handleNativeBalance(
             win.ethereum,
-            await win.ethereum.signer.getAddress(),
+            address,
             50n * 10n ** 18n, // 18 decimals
           ),
         ])
@@ -91,7 +93,7 @@ describe('Swap (mod)', () => {
     cy.swapEnterInputAmount(ETH, '0.5', true)
     cy.swapSelectOutput(COW)
     cy.get('#output-currency-input .token-amount-input').should('not.equal', '')
-    cy.get('#do-trade-button').should('contain.text', 'Swap').click({ timeout: 10000 })
+    cy.get('#do-trade-button').should('contain.text', 'Swap').click({ timeout: SMALL_TIMEOUT })
     cy.get('#trade-confirmation > button').should('contain', 'Confirm Swap')
   })
 

apps/cowswap-frontend-e2e/src/support/commands.ts

@@ -97,18 +97,20 @@ declare namespace Cypress {
 // TODO: Add proper return type annotation
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function _clickOnToken(inputOrOutput: string) {
-  cy.get(`#${inputOrOutput}-currency-input .open-currency-select-button`, { timeout: 20_000 })
-    .should('not.be.disabled')
-    .click()
+  const buttonSelector = `#${inputOrOutput}-currency-input .open-currency-select-button`
+
+  cy.get(buttonSelector, { timeout: 20_000 }).should('not.be.disabled')
+  cy.get(buttonSelector).click()
 }
 
 // TODO: Add proper return type annotation
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function _selectTokenFromSelector(tokenAddress: string, inputOrOutput: string) {
-  cy.get(`#tokens-list div[data-address="${tokenAddress.toLowerCase()}"]`)
-    .scrollIntoView()
-    .should('be.visible')
-    .click({ force: true })
+  const tokenSelector = `#token-search-results div[data-address="${tokenAddress.toLowerCase()}"]`
+  const searchSelector = '#token-search-input'
+
+  cy.get(searchSelector, { timeout: 20_000 }).should('be.visible').clear().type(tokenAddress)
+  cy.get(tokenSelector, { timeout: 20_000 }).should('be.visible').click({ force: true })
 
   cy.get(`#${inputOrOutput}-currency-input .token-amount-input`).should('be.visible')
 }

apps/cowswap-frontend-e2e/src/support/e2e.ts

@@ -55,6 +55,12 @@ Cypress.on('window:before:load', (win) => {
   }
 })
 
+Cypress.on('uncaught:exception', (err) => {
+  if (err.message.includes('ResizeObserver loop completed with undelivered notifications')) {
+    return false
+  }
+})
+
 const skippedUrls = [
   // analytics
   /ads-twitter.com/,
@@ -89,7 +95,6 @@ beforeEach(() => {
     req.headers['origin'] = Cypress.config('baseUrl')!
     req.continue()
   })
-
   skippedUrls.forEach((url) => {
     cy.intercept(url, (req) => {
       req.reply({ statusCode: 404 })

apps/cowswap-frontend-e2e/src/support/ethereum.ts

@@ -11,15 +11,22 @@ const CHAIN_NAME = 'sepolia'
 const INTEGRATION_TEST_PRIVATE_KEY = Cypress.env('INTEGRATION_TEST_PRIVATE_KEY')
 assert(INTEGRATION_TEST_PRIVATE_KEY, 'INTEGRATION_TEST_PRIVATE_KEY env missing')
 
+const INTEGRATION_TESTS_INFURA_KEY = Cypress.env('INTEGRATION_TESTS_INFURA_KEY')
 const INTEGRATION_TESTS_ALCHEMY_KEY = Cypress.env('INTEGRATION_TESTS_ALCHEMY_KEY')
 
 const NETWORK_URL = Cypress.env('REACT_APP_NETWORK_URL_' + CHAIN_ID)
 
-const PROVIDER_URL = NETWORK_URL || `https://eth-${CHAIN_NAME}.g.alchemy.com/v2/${INTEGRATION_TESTS_ALCHEMY_KEY}`
+const PROVIDER_URL =
+  NETWORK_URL ||
+  (INTEGRATION_TESTS_ALCHEMY_KEY
+    ? `https://eth-${CHAIN_NAME}.g.alchemy.com/v2/${INTEGRATION_TESTS_ALCHEMY_KEY}`
+    : INTEGRATION_TESTS_INFURA_KEY
+      ? `https://${CHAIN_NAME}.infura.io/v3/${INTEGRATION_TESTS_INFURA_KEY}`
+      : undefined)
 
 assert(
   PROVIDER_URL,
-  `PROVIDER_URL is empty, NETWORK_URL=${NETWORK_URL}, INTEGRATION_TESTS_ALCHEMY_KEY=${INTEGRATION_TESTS_ALCHEMY_KEY}`,
+  `PROVIDER_URL is empty, NETWORK_URL=${NETWORK_URL}, INTEGRATION_TESTS_ALCHEMY_KEY=${INTEGRATION_TESTS_ALCHEMY_KEY}, INTEGRATION_TESTS_INFURA_KEY=${INTEGRATION_TESTS_INFURA_KEY}`,
 )
 
 // address of the above key