Merge pull request #681 from Synthetixio/dev

promote dev to master

.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

@@ -27,7 +27,10 @@ effort to make sure that dapp tests are stable and trustful.
 It also provides an easy way to use and access metamask straight from your e2e
 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/edit/dev/README.md#usage-examples) for more details.
+🔥 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.
 
 ## Supported frameworks
 
@@ -44,58 +47,58 @@ tests with all features of cypress and playwright.
 - ⭐ [synpress-examples](https://github.com/drptbl/synpress-examples/)
 - [synpress](https://github.com/Synthetixio/synpress/tree/dev/tests/e2e)
 
--------
+---
 
-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
 
@@ -366,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

commands/metamask.js

@@ -122,31 +122,6 @@ const metamask = {
  extensionImportTokenUrl,
  };
  },
- // workaround for metamask random blank page on first run
- async fixBlankPage() {
- await playwright.metamaskWindow().waitForTimeout(1000);
- for (let times = 0; times < 5; times++) {
- if (
- (await playwright
- .metamaskWindow()
- .locator(onboardingWelcomePageElements.app)
- .count()) === 0
- ) {
- await playwright.metamaskWindow().reload();
- await playwright.metamaskWindow().waitForTimeout(2000);
- } else if (
- (await playwright
- .metamaskWindow()
- .locator(onboardingWelcomePageElements.criticalError)
- .count()) > 0
- ) {
- await playwright.metamaskWindow().reload();
- await playwright.metamaskWindow().waitForTimeout(2000);
- } else {
- break;
- }
- }
- },
  async closePopupAndTooltips() {
  // note: this is required for fast execution of e2e tests to avoid flakiness
  // otherwise popup may not be detected properly and not closed
@@ -202,7 +177,8 @@ const metamask = {
  return true;
  },
  async unlock(password) {
- await module.exports.fixBlankPage();
+ await playwright.fixBlankPage();
+ await playwright.fixCriticalError();
  await playwright.waitAndType(unlockPageElements.passwordInput, password);
  await playwright.waitAndClick(
  unlockPageElements.unlockButton,
@@ -608,10 +584,17 @@ const metamask = {
  skipSetup,
  );
  },
- async activateEnhancedGasFeeUI(skipSetup) {
+ async activateEthSignRequests(skipSetup) {
  return await activateAdvancedSetting(
- experimentalSettingsPageElements.enhancedGasFeeUIToggleOn,
- experimentalSettingsPageElements.enhancedGasFeeUIToggleOff,
+ advancedPageElements.ethSignRequestsToggleOn,
+ advancedPageElements.ethSignRequestsToggleOff,
+ skipSetup,
+ );
+ },
+ async activateImprovedTokenAllowance(skipSetup) {
+ return await activateAdvancedSetting(
+ experimentalSettingsPageElements.improvedTokenAllowanceToggleOn,
+ experimentalSettingsPageElements.improvedTokenAllowanceToggleOff,
  skipSetup,
  true,
  );
@@ -771,15 +754,23 @@ const metamask = {
  },
  async confirmPermissionToSpend(spendLimit) {
  const notificationPage = await playwright.switchToMetamaskNotification();
- await playwright.waitAndSetValue(
- spendLimit,
- notificationPageElements.customSpendingLimitInput,
- notificationPage,
- );
- await playwright.waitAndClick(
- notificationPageElements.allowToSpendButton,
- notificationPage,
- );
+ // experimental mode on
+ if (
+ await playwright
+ .metamaskNotificationWindow()
+ .locator(notificationPageElements.customSpendingLimitInput)
+ .isVisible()
+ ) {
+ await playwright.waitAndSetValue(
+ spendLimit,
+ notificationPageElements.customSpendingLimitInput,
+ notificationPage,
+ );
+ await playwright.waitAndClick(
+ notificationPageElements.allowToSpendButton,
+ notificationPage,
+ );
+ }
  await playwright.waitAndClick(
  notificationPageElements.allowToSpendButton,
  notificationPage,
@@ -1149,7 +1140,13 @@ const metamask = {
  },
  async initialSetup(
  playwrightInstance,
- { secretWordsOrPrivateKey, network, password, enableAdvancedSettings },
+ {
+ secretWordsOrPrivateKey,
+ network,
+ password,
+ enableAdvancedSettings,
+ enableExperimentalSettings,
+ },
  ) {
  const isCustomNetwork =
  (process.env.NETWORK_NAME &&
@@ -1164,7 +1161,8 @@ const metamask = {
  await playwright.assignWindows();
  await playwright.assignActiveTabName('metamask');
  await module.exports.getExtensionDetails();
- await module.exports.fixBlankPage();
+ await playwright.fixBlankPage();
+ await playwright.fixCriticalError();
  if (
  await playwright
  .metamaskWindow()
@@ -1180,7 +1178,7 @@ const metamask = {
  await module.exports.importAccount(secretWordsOrPrivateKey);
  }
 
- await setupSettings(enableAdvancedSettings);
+ await setupSettings(enableAdvancedSettings, enableExperimentalSettings);
 
  if (isCustomNetwork) {
  await module.exports.addNetwork(network);
@@ -1266,7 +1264,10 @@ async function activateAdvancedSetting(
  return true;
 }
 
-async function setupSettings(enableAdvancedSettings) {
+async function setupSettings(
+ enableAdvancedSettings,
+ enableExperimentalSettings,
+) {
  await switchToMetamaskIfNotActive();
  await metamask.goToAdvancedSettings();
  await metamask.activateAdvancedGasControl(true);
@@ -1278,7 +1279,9 @@ async function setupSettings(enableAdvancedSettings) {
  await metamask.activateTestnetConversion(true);
  }
  await metamask.goToExperimentalSettings();
- await metamask.activateEnhancedGasFeeUI(true);
+ if (enableExperimentalSettings) {
+ await metamask.activateImprovedTokenAllowance(true);
+ }
  await playwright.waitAndClick(
  settingsPageElements.closeButton,
  await playwright.metamaskWindow(),