chore(APP-2680): Enhance Automated E2E Testing (#1393)

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 <repository-url>
+   cd <project-directory>
+
+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=<value>
+   METAMASK_PASSWORD=<value>
+
+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/).

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();
 });

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();
 });

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();
 });

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();
 });

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();
 });

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();
 });

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();
 });

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",

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 */

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"