From 60cccf709ef898f402632605171ab20d74cce127 Mon Sep 17 00:00:00 2001 From: Barukimang Date: Fri, 9 Aug 2024 10:48:07 +0300 Subject: [PATCH] chore(APP-2680): Enhance Automated E2E Testing (#1393) --- .github/workflows/e2e-tests.yml | 53 ----------------- docs/e2eTests.md | 50 ++++++++++++++++ .../03_withdrawFunds.spec.ts | 2 +- .../05_editSettings.spec.ts | 2 +- .../02_publishProposal.spec.ts | 2 +- .../05_editSettings.spec.ts | 2 +- .../new-token/03_withdrawFunds.spec.ts | 2 +- .../new-token/04_addMember.spec.ts | 2 +- .../new-token/05_editSettings.spec.ts | 2 +- package.json | 2 +- playwright.config.ts | 38 ++++++------ yarn.lock | 59 +++++++++++++------ 12 files changed, 121 insertions(+), 95 deletions(-) delete mode 100644 .github/workflows/e2e-tests.yml create mode 100644 docs/e2eTests.md diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml deleted file mode 100644 index 3a446ce4a..000000000 --- a/.github/workflows/e2e-tests.yml +++ /dev/null @@ -1,53 +0,0 @@ -name: E2E Tests - -on: - pull_request: - types: - - labeled - -jobs: - e2e-run: - if: ${{ github.event.label.name == 'e2e-tests' }} - runs-on: ubuntu-latest - - steps: - - name: Checkout Repository - uses: actions/checkout@v3 - - - name: Install NodeJS - uses: actions/setup-node@v3 - with: - node-version: 18 - cache: 'yarn' - - - name: Install dependencies - run: yarn install --pure-lockfile - - - name: Build - run: yarn build --mode staging - env: - VITE_REACT_APP_DEPLOY_VERSION: ${{ github.sha }} - VITE_REACT_APP_DEPLOY_ENVIRONMENT: ${{ needs.set-environment.outputs.environment }} - VITE_REACT_APP_ANALYTICS_KEY: ${{ secrets.VITE_REACT_APP_ANALYTICS_KEY }} - VITE_GATEWAY_IPFS_API_KEY: ${{secrets.VITE_GATEWAY_IPFS_API_KEY}} - VITE_ETHERSCAN_API_KEY: ${{secrets.VITE_ETHERSCAN_API_KEY}} - VITE_POLYGONSCAN_API_KEY: ${{secrets.VITE_POLYGONSCAN_API_KEY}} - VITE_ARBISCAN_API_KEY: ${{secrets.VITE_ARBISCAN_API_KEY}} - VITE_BASESCAN_API_KEY: ${{secrets.VITE_BASESCAN_API_KEY}} - VITE_GATEWAY_RPC_API_KEY: ${{secrets.VITE_GATEWAY_RPC_API_KEY}} - VITE_GATEWAY_RPC_API_KEY_ALCHEMY: ${{secrets.VITE_GATEWAY_RPC_API_KEY_ALCHEMY}} - VITE_WALLET_CONNECT_PROJECT_ID: ${{secrets.VITE_WALLET_CONNECT_PROJECT_ID}} - VITE_COVALENT_API_KEY: ${{secrets.VITE_COVALENT_API_KEY}} - - - name: Run E2E Tests - run: yarn e2e - with: - start: yarn dev - wait-on: 'http://localhost:3000' - env: - # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY - # in GitHub repo → Settings → Secrets → Actions - # CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} - CYPRESS_RECORD_KEY: '0c4de406-82ab-48c2-94b1-6267578d2f33' # key of testing project - # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/docs/e2eTests.md b/docs/e2eTests.md new file mode 100644 index 000000000..a97b27d01 --- /dev/null +++ b/docs/e2eTests.md @@ -0,0 +1,50 @@ +# Getting Started with E2E Testing Using Playwright and Synpress + +This guide provides a quick start for running end-to-end (E2E) tests using Playwright and Synpress. + +## Prerequisites + +1. **Node.js**: [Download Node.js](https://nodejs.org/). +2. **Yarn or npm**: Choose your preferred package manager. + +## Project Setup + +1. **Clone the Repository**: + git clone + cd + +2. **Install Dependencies**: + yarn install + + # or + + npm install + +3. **Set Up Environment Variables**: + Create a `.env` file in the root directory using `.env.example` as a template if available. Include the following variables with your values: + METAMASK_SEED_PHRASE= + METAMASK_PASSWORD= + +4. **Install Playwright with dependencies**: + yarn playwright install --with-deps + +5. **Build Synpress cache** (needed for Metamask, see `e2e/basic.setup.ts` for details): + npx synpress ./e2e/ + +## Running E2E Tests + +- **Ensure Metamask Wallet has Sufficient Funds**: Before running tests, make sure your Metamask wallet is funded. + +- **Running All or Specific Tests**: + - From Playwright UI: + yarn e2e + - On a specific platform (e.g., Firefox): + yarn playwright test --project firefox + - See `playwright.config.js` for more options. + +## Troubleshooting + +- **Common Issues**: Review error messages for details. +- **Debugging**: Utilize Playwright's debugging tools. + +For further assistance, consult the official documentation of [Playwright](https://playwright.dev/docs/intro) and [Synpress](https://synpress.io/). diff --git a/e2e/tests/token-voting-plugin/existing-token/governance-compatible/03_withdrawFunds.spec.ts b/e2e/tests/token-voting-plugin/existing-token/governance-compatible/03_withdrawFunds.spec.ts index 2949a8b4e..c37aab78d 100644 --- a/e2e/tests/token-voting-plugin/existing-token/governance-compatible/03_withdrawFunds.spec.ts +++ b/e2e/tests/token-voting-plugin/existing-token/governance-compatible/03_withdrawFunds.spec.ts @@ -56,5 +56,5 @@ test('Withdraw DAO funds proposal', async ({ await page.getByRole('button', {name: 'Execute now'}).click(); await page.getByRole('button', {name: 'Execute now'}).click(); await metamask.confirmTransaction(); - await page.getByRole('button', {name: 'Continue to proposal'}).click(); + // await page.getByRole('button', {name: 'Continue to proposal'}).click(); }); diff --git a/e2e/tests/token-voting-plugin/existing-token/governance-compatible/05_editSettings.spec.ts b/e2e/tests/token-voting-plugin/existing-token/governance-compatible/05_editSettings.spec.ts index 3ad01fd07..18592f223 100644 --- a/e2e/tests/token-voting-plugin/existing-token/governance-compatible/05_editSettings.spec.ts +++ b/e2e/tests/token-voting-plugin/existing-token/governance-compatible/05_editSettings.spec.ts @@ -68,5 +68,5 @@ test('Edit DAO settings Proposal', async ({ await page.getByRole('button', {name: 'Execute now'}).click(); await page.getByRole('button', {name: 'Execute now'}).click(); await metamask.confirmTransaction(); - await page.getByRole('button', {name: 'Continue to proposal'}).click(); + // await page.getByRole('button', {name: 'Continue to proposal'}).click(); }); diff --git a/e2e/tests/token-voting-plugin/existing-token/governance-incompatible/02_publishProposal.spec.ts b/e2e/tests/token-voting-plugin/existing-token/governance-incompatible/02_publishProposal.spec.ts index 0e6d2e20a..c5aec9dd6 100644 --- a/e2e/tests/token-voting-plugin/existing-token/governance-incompatible/02_publishProposal.spec.ts +++ b/e2e/tests/token-voting-plugin/existing-token/governance-incompatible/02_publishProposal.spec.ts @@ -50,5 +50,5 @@ test('Publish signaling Proposal', async ({ await page.getByRole('button', {name: 'Submit your vote'}).click(); await page.getByRole('button', {name: 'Vote now'}).click(); await metamask.confirmTransaction(); - await page.getByRole('button', {name: 'Continue to proposal'}).click(); + // await page.getByRole('button', {name: 'Continue to proposal'}).click(); }); diff --git a/e2e/tests/token-voting-plugin/existing-token/governance-incompatible/05_editSettings.spec.ts b/e2e/tests/token-voting-plugin/existing-token/governance-incompatible/05_editSettings.spec.ts index 1737a1569..e26dafe81 100644 --- a/e2e/tests/token-voting-plugin/existing-token/governance-incompatible/05_editSettings.spec.ts +++ b/e2e/tests/token-voting-plugin/existing-token/governance-incompatible/05_editSettings.spec.ts @@ -68,5 +68,5 @@ test('Edit DAO settings Proposal', async ({ await page.getByRole('button', {name: 'Execute now'}).click(); await page.getByRole('button', {name: 'Execute now'}).click(); await metamask.confirmTransaction(); - await page.getByRole('button', {name: 'Continue to proposal'}).click(); + // await page.getByRole('button', {name: 'Continue to proposal'}).click(); }); diff --git a/e2e/tests/token-voting-plugin/new-token/03_withdrawFunds.spec.ts b/e2e/tests/token-voting-plugin/new-token/03_withdrawFunds.spec.ts index 3887dd44c..6cf3c6e88 100644 --- a/e2e/tests/token-voting-plugin/new-token/03_withdrawFunds.spec.ts +++ b/e2e/tests/token-voting-plugin/new-token/03_withdrawFunds.spec.ts @@ -56,5 +56,5 @@ test('Withdraw DAO funds proposal', async ({ await page.getByRole('button', {name: 'Execute now'}).click(); await page.getByRole('button', {name: 'Execute now'}).click(); await metamask.confirmTransaction(); - await page.getByRole('button', {name: 'Continue to proposal'}).click(); + // await page.getByRole('button', {name: 'Continue to proposal'}).click(); }); diff --git a/e2e/tests/token-voting-plugin/new-token/04_addMember.spec.ts b/e2e/tests/token-voting-plugin/new-token/04_addMember.spec.ts index ebeab2eb5..0423be707 100644 --- a/e2e/tests/token-voting-plugin/new-token/04_addMember.spec.ts +++ b/e2e/tests/token-voting-plugin/new-token/04_addMember.spec.ts @@ -57,5 +57,5 @@ test('Add DAO member Proposal', async ({ await page.getByRole('button', {name: 'Execute now'}).click(); await page.getByRole('button', {name: 'Execute now'}).click(); await metamask.confirmTransaction(); - await page.getByRole('button', {name: 'Continue to proposal'}).click(); + // await page.getByRole('button', {name: 'Continue to proposal'}).click(); }); diff --git a/e2e/tests/token-voting-plugin/new-token/05_editSettings.spec.ts b/e2e/tests/token-voting-plugin/new-token/05_editSettings.spec.ts index a642756a4..34aa2c821 100644 --- a/e2e/tests/token-voting-plugin/new-token/05_editSettings.spec.ts +++ b/e2e/tests/token-voting-plugin/new-token/05_editSettings.spec.ts @@ -65,5 +65,5 @@ test('Edit DAO settings Proposal', async ({ await page.getByRole('button', {name: 'Execute now'}).click(); await page.getByRole('button', {name: 'Execute now'}).click(); await metamask.confirmTransaction(); - await page.getByRole('button', {name: 'Continue to proposal'}).click(); + // await page.getByRole('button', {name: 'Continue to proposal'}).click(); }); diff --git a/package.json b/package.json index 082dc9449..f0a3be79b 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "@aragon/osx-commons-configs": "^0.6.0", "@aragon/sdk-client": "^1.26.0", "@aragon/sdk-client-common": "^1.17.0", - "@playwright/test": "^1.42.1", + "@playwright/test": "^1.45.3", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-dialog": "^1.0.4", "@sentry/react": "^7.103.0", diff --git a/playwright.config.ts b/playwright.config.ts index 828208aaf..f332bae56 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -18,7 +18,7 @@ export default defineConfig({ /* Retry on CI only */ retries: process.env.CI ? 2 : 0, /* Opt out of parallel tests on CI. */ - workers: process.env.CI ? 1 : undefined, + workers: process.env.CI ? 1 : 1, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ @@ -51,24 +51,28 @@ export default defineConfig({ }, /* Test against mobile viewports. */ - // { - // name: 'Mobile Chrome', - // use: { ...devices['Pixel 5'] }, - // }, - // { - // name: 'Mobile Safari', - // use: { ...devices['iPhone 12'] }, - // }, + { + name: 'Mobile Chrome', + use: {...devices['Pixel 5']}, + timeout: 120000, // Set a timeout of 120 seconds for each test in this project + }, + { + name: 'Mobile Safari', + use: {...devices['iPhone 12']}, + timeout: 120000, // Set a timeout of 120 seconds for each test in this project + }, /* Test against branded browsers. */ - // { - // name: 'Microsoft Edge', - // use: { ...devices['Desktop Edge'], channel: 'msedge' }, - // }, - // { - // name: 'Google Chrome', - // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, - // }, + { + name: 'Microsoft Edge', + use: {...devices['Desktop Edge'], channel: 'msedge'}, + timeout: 120000, // Set a timeout of 120 seconds for each test in this project + }, + { + name: 'Google Chrome', + use: {...devices['Desktop Chrome'], channel: 'chrome'}, + timeout: 120000, // Set a timeout of 120 seconds for each test in this project + }, ], /* Run your local dev server before starting the tests */ diff --git a/yarn.lock b/yarn.lock index 6ef0b31ff..bc642a2e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2917,12 +2917,12 @@ picocolors "^1.0.0" tslib "^2.6.0" -"@playwright/test@^1.42.1": - version "1.42.1" - resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.42.1.tgz#9eff7417bcaa770e9e9a00439e078284b301f31c" - integrity sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ== +"@playwright/test@^1.45.3": + version "1.45.3" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.45.3.tgz#22e9c38b3081d6674b28c6e22f784087776c72e5" + integrity sha512-UKF4XsBfy+u3MFWEH44hva1Q8Da28G6RFtR2+5saw+jgAFQV5yYnB1fu68Mz7fO+5GJF3wgwAIs0UelU8TxFrA== dependencies: - playwright "1.42.1" + playwright "1.45.3" "@popperjs/core@^2.9.0": version "2.11.2" @@ -9741,17 +9741,17 @@ pkg-types@^1.0.3: mlly "^1.2.0" pathe "^1.1.0" -playwright-core@1.42.1: - version "1.42.1" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.42.1.tgz#13c150b93c940a3280ab1d3fbc945bc855c9459e" - integrity sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA== +playwright-core@1.45.3: + version "1.45.3" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.45.3.tgz#e77bc4c78a621b96c3e629027534ee1d25faac93" + integrity sha512-+ym0jNbcjikaOwwSZycFbwkWgfruWvYlJfThKYAlImbxUgdWFO2oW70ojPm4OpE4t6TAo2FY/smM+hpVTtkhDA== -playwright@1.42.1: - version "1.42.1" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.42.1.tgz#79c828b51fe3830211137550542426111dc8239f" - integrity sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg== +playwright@1.45.3: + version "1.45.3" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.45.3.tgz#75143f73093a6e1467f7097083d2f0846fb8dd2f" + integrity sha512-QhVaS+lpluxCaioejDZ95l4Y4jSFCsBvl2UZkpeXlzxmqS+aABr5c82YmfMHrL6x27nvrvykJAFpkzT2eWdJww== dependencies: - playwright-core "1.42.1" + playwright-core "1.45.3" optionalDependencies: fsevents "2.3.2" @@ -10911,7 +10911,16 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -10982,7 +10991,14 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -11894,7 +11910,7 @@ which@^2.0.1, which@^2.0.2: dependencies: isexe "^2.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -11912,6 +11928,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"