Merge branch 'dev' into ahmed/cancel-mm-access

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Related repository**
+Link to repository related with this issue.
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. macOS]
+ - Synpress version: [e.g. 3.1.1]
+- CI platform (if applicable): [e.g. GitHub Actions]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: feature-request
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/pull_request_template.md

@@ -0,0 +1,18 @@
+## Motivation and context
+
+Clearly and concisely describe the feature added/isses being solved.
+
+## Does it fix any issue?
+
+#(issue)
+
+## Other useful info
+
+N/A
+
+## Quality checklist
+
+- [ ] I have performed a self-review of my code.
+- [ ] If it is a core feature, I have added thorough e2e tests.
+
+**⚠️👆 Delete any section you see irrelevant before submitting the pull request 👆⚠️**

README.md

@@ -29,8 +29,8 @@ tests with all features of cypress and playwright.
 
 🔥 Synpress works out-of-the-box with other frameworks! There is no need to use
 it directly. Check
-[usage examples](https://github.com/Synthetixio/synpress/#usage-examples)
-for more details.
+[usage examples](https://github.com/Synthetixio/synpress/#usage-examples) for
+more details.
 
 ## Supported frameworks
 
@@ -49,56 +49,56 @@ for more details.
 
 ---
 
-For additional custom commands and their examples,
-[check here](https://github.com/synthetixio/synpress/blob/dev/support/index.d.ts).
+For full Synpress commands and their examples,
+[check here](https://github.com/Synthetixio/synpress/blob/dev/docs/synpress-commands.md).
 
 To see in which direction Synpress is headed to, take a look at
 [planning board](https://github.com/orgs/Synthetixio/projects/14).
 
 ## Features
 
-- added support for metamask 🦊
-- supports headless mode 🤖 (`synpress run --headless`)
-  - recommended for local development (but
+- Added support for metamask 🦊
+- Supports headless mode 🤖 (`synpress run --headless`)
+  - Recommended for local development (but
     [not for CI yet](https://developer.chrome.com/articles/new-headless/) as
     it's new and experimental)
-- integrated with
+- Integrated with
   [docker 🐳](https://github.com/Synthetixio/synpress#-using-with-docker)
-  - recommended for
+  - Recommended for
     [CI](https://github.com/Synthetixio/synpress#ci-tips--tricks)
-  - includes VNC and [noVNC](https://novnc.com/info.html)
-  - integrated video recording 🎥 (full screen)
-  - exposes noVNC with [ngrok](https://ngrok.com/) (optional)
-- easy to debug 🐛
-  - improved error handling
-  - supports [cypress](https://docs.cypress.io/guides/guides/debugging) and
+  - Includes VNC and [noVNC](https://novnc.com/info.html)
+  - Integrated video recording 🎥 (full screen)
+  - Exposes noVNC with [ngrok](https://ngrok.com/) (optional)
+- Easy to debug 🐛
+  - Improved error handling
+  - Supports [cypress](https://docs.cypress.io/guides/guides/debugging) and
     [playwright](https://playwright.dev/docs/debug) debuggers
   - noVNC allows for interactions through browser 🌐
-  - debug remote machines on CI with ngrok
-- blazingly-fast ⚡
-- extensible ⚙️ (add own custom commands and plugins)
-- can be used in existing
+  - Debug remote machines on CI with ngrok
+- Blazingly-fast ⚡
+- Extensible ⚙️ (add own custom commands and plugins)
+- Can be used in existing
   [cypress setup](https://github.com/Synthetixio/synpress/issues/346#issuecomment-1060506096)
-- supports dotenv
-  - loads all env vars from your `.env` file automatically (from project root
+- Supports dotenv
+  - Loads all env vars from your `.env` file automatically (from project root
     folder)
-- ability to use latest metamask or lock it's version to avoid unexpected
+- Ability to use latest metamask or lock it's version to avoid unexpected
   failures related to metamask updates
-- supports multi-lang of metamask, it doesn't depend on any labels
-- synpress is
+- Supports multi-lang of metamask, it doesn't depend on any labels
+- Synpress is
   [fully tested](https://github.com/Synthetixio/synpress/tree/dev/tests/e2e/specs)
-- waits for XHR requests, navigations and animations automatically
-- ability to fail test run if there are any browser console errors found
-- types support for all additional custom commands
-- the best possible options set up in place to avoid flakiness
-- etherscan API helpers in place which for ex. allows to compare your
+- Waits for XHR requests, navigations and animations automatically
+- Ability to fail test run if there are any browser console errors found
+- Types support for all additional custom commands
+- The best possible options set up in place to avoid flakiness
+- Etherscan API helpers in place which for ex. allows to compare your
   transaction results with etherscan and check tx status
-- synthetix helpers in place which allows to interact with synthetix protocol
+- Synthetix helpers in place which allows to interact with synthetix protocol
   programmatically
-- supports codespaces
-  - run your tests in docker
-  - get your feedback remotely thanks to ngrok
-  - use mpeg-4 preview plugin to watch videos from inside codespaces :) ...
+- Supports codespaces
+  - Run your tests in docker
+  - Get your feedback remotely thanks to ngrok
+  - Use mpeg-4 preview plugin to watch videos from inside codespaces :) ...
 
 ## 👷 Example setup for eslint and tsconfig
 
@@ -369,6 +369,31 @@ Options:
   -h, --help                display help for command
 ```
 
+## Environmental variables
+
+| Variable                | Description                                                                                                                                     |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `SECRET_WORDS`          | Space separated words for the test wallet recovery phrase (mnemonic; 12 words)                                                                 |
+| `PRIVATE_KEY`           | Test wallet private key                                                                                                                         |
+| `NETWORK_NAME`          | Network name (eg `NETWORK_NAME=Optimism`)                                                                                                       |
+| `RPC_URL`               | Network RPC (eg`RPC_URL=https://mainnet.optimism.io`)                                                                                           |
+| `CHAIN_ID`              | Network ID (eg`CHAIN_ID=10`)                                                                                                                   |
+| `SYMBOL`                | Native chain token ticker (eg `SYMBOL=OP`)                                                                                                     |
+| `IS_TESTNET`            | `boolean` indicates that the added network is testnet                                                                                           |
+| `BLOCK_EXPLORER`        | Blockchain explorer (eg `BLOCK_EXPLORER=https://optimistic.etherscan.io/`)                                                                     |
+| `SYNDEBUG`              | Set debugging mode to be on                                                                                                                      |
+| `STABLE_MODE`           | Introduce delay between main actions, 300ms by default (eg `STABLE_MODE=300ms`, `STABLE_MODE=true`)                                              |
+| `SLOW_MODE`             | Introduce delay between every action, 50ms by default (eg `SLOW_MODE=true`, `SLOW_MODE=200ms`)                                                  |
+| `METAMASK_VERSION`      | Metamask version to be installed                                                                                                               |
+| `SKIP_METAMASK_INSTALL` | Will skip MetaMask installation                                                                                                                 |
+| `SKIP_METAMASK_SETUP`   | Will skip MetaMask initial setup                                                                                                               |
+| `GH_USERNAME`           | GitHub username (used to avoid rate-limit issue while downloading metamask)                                                                                                                                  |
+| `GH_PAT`                | GitHub [personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) (used to avoid rate-limit issue while downloading metamask) |
+| `ETHERSCAN_KEY`         | [Etherscan key](https://info.etherscan.com/etherscan-developer-api-key/) (used only for etherscan-related commands)                 |
+| `FAIL_ON_ERROR`         | Fail a test if there are any browser console errors                                                                                             |
+| `CYPRESS_GROUP`         | [Group tests](https://docs.cypress.io/guides/guides/command-line#cypress-run-group-lt-name-gt)                                                  |
+| `CI`                    | `boolean` value indicate that tests are runing from CI/CD pipeline                                                                              |
+
 ## 🚢 Release process
 
 1. Create PR from `dev` branch to `master` branch

package.json

@@ -53,7 +53,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/webpack-dev-server": "^3.3.0",
     "@drptbl/gremlins.js": "^2.2.1",
-    "@playwright/test": "^1.31.1",
+    "@playwright/test": "^1.31.2",
     "@synthetixio/js": "^2.41.0",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/react": "^14.0.0",
@@ -73,7 +73,7 @@
     "dotenv-parse-variables": "^2.0.0",
     "download": "^8.0.0",
     "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-chai-friendly": "^0.7.2",
     "eslint-plugin-cypress": "^2.12.1",
@@ -84,22 +84,36 @@
     "eslint-plugin-standard": "^4.1.0",
     "eslint-plugin-testing-library": "^5.10.2",
     "eslint-plugin-ui-testing": "^2.0.1",
-    "eslint-plugin-unicorn": "^45.0.2",
-    "ethers": "^6.0.8",
+    "eslint-plugin-unicorn": "^46.0.0",
+    "ethers": "^6.1.0",
     "etherscan-api": "^10.3.0",
     "find-config": "^1.0.0",
     "node-fetch": "^2.6.1",
     "prettier": "^2.8.4",
     "serve": "^14.2.0",
-    "start-server-and-test": "^1.15.4",
+    "start-server-and-test": "^2.0.0",
     "synthetix-js": "^2.74.1"
   },
   "devDependencies": {
-    "@metamask/test-dapp": "^5.5.0",
+    "@metamask/test-dapp": "^5.6.0",
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
     "@trunkio/launcher": "^1.2.3",
-    "npm-check-updates": "^16.7.9",
-    "release-it": "^15.6.0"
+    "npm-check-updates": "^16.7.12",
+    "release-it": "^15.8.0"
+  },
+  "resolutions": {
+    "etherscan-api/gh-pages": "5.0.0",
+    "@synthetixio/js/lodash": "4.17.21",
+    "@synthetixio/js/**/axios": "1.3.4",
+    "@synthetixio/js/**/underscore": "1.12.1",
+    "synthetix-js/**/elliptic": "6.5.4",
+    "synthetix-js/lodash": "4.17.21",
+    "synthetix-js/**/axios": "1.3.4",
+    "synthetix-js/**/json5": "1.0.2",
+    "synthetix-js/**/node-fetch": "2.6.7",
+    "download/**/http-cache-semantics": "4.1.1",
+    "**/ansi-regex": "5.0.1",
+    "**/@testing-library/dom": "8.20.0"
   },
   "engines": {
     "node": ">=14"

plugins/index.js

@@ -12,31 +12,25 @@ module.exports = (on, config) => {
   // `config` is the resolved Cypress config
 
   on('before:browser:launch', async (browser = {}, arguments_) => {
-    if (browser.name === 'chrome' && browser.isHeadless) {
-      console.log('TRUE'); // required by cypress ¯\_(ツ)_/¯
-      arguments_.args.push('--window-size=1920,1080');
-      return arguments_;
-    }
-
-    if (browser.name === 'electron') {
-      arguments_['width'] = 1920;
-      arguments_['height'] = 1080;
-      arguments_['resizable'] = false;
-      return arguments_;
-    }
-
-    // metamask welcome screen blocks cypress from loading
     if (browser.name === 'chrome') {
+      // metamask welcome screen blocks cypress from loading
       arguments_.args.push(
         '--disable-background-timer-throttling',
         '--disable-backgrounding-occluded-windows',
         '--disable-renderer-backgrounding',
       );
+      if (process.env.CI) {
+        // Avoid: "dri3 extension not supported" error
+        arguments_.args.push('--disable-gpu');
+      }
+      if (process.env.HEADLESS_MODE) {
+        arguments_.args.push('--headless=new');
+      }
+      if (browser.isHeadless) {
+        arguments_.args.push('--window-size=1920,1080');
+      }
     }
 
-    if (browser.name === 'chrome' && process.env.CI)
-      arguments_.args.push('--disable-gpu'); // Avoid: "dri3 extension not supported" error
-
     if (!process.env.SKIP_METAMASK_INSTALL) {
       // NOTE: extensions cannot be loaded in headless Chrome
       const metamaskPath = await helpers.prepareMetamask(
@@ -45,8 +39,6 @@ module.exports = (on, config) => {
       arguments_.extensions.push(metamaskPath);
     }
 
-    if (process.env.HEADLESS_MODE) arguments_.args.push('--headless=new');
-
     return arguments_;
   });