Balancer Frontend testing with Synpress

Local Setup

Create file .env.local to project root and add these required env variables:
- ```
   SECRET_WORDS="word1 word2 ... ... etc"
   NETWORK_NAME=goerli
```
- If you want to use a specific Metamask acocunt, add the account number env variable to .env.local. Eg. CYPRESS_WALLET_ACCOUNT_NUMBER=3
Start the Frontend App using the same network you defined in .env file.
- Eg. Start with Goerli testnet by running: $ VUE_APP_NETWORK=5 npm run serve
Once the frontend is up and running, you can start running the Synpress tests:
- $ npm run synpress:start
After test run is complete, Cypress window stays open so you can investigate the test results.
- If you want, you can generate test report by running: $ npm run synpress:report
- Report is saved to: synpress/report/mochawesome.html

If the tests fail in CI, you can download the test report artifact with video and screenshots from the workflow's Summary Page.

Set that branch in frontend-v2 E2E job: .github/workflow/checks.yml

uses: actions/checkout@v2
with:
  repository: balancer-labs/frontend-e2e
+ ref: new-e2e-branch-name
  path: e2e

When test have run successfully, merge frontend-e2e PR, then remove brach ref line in .github/workflow/checks.yml and merge your frontend-v2 PR.

Running individual tests locally by opening Cypress UI is not supported because Synpress doesn't clear metamask state before each e2e test. To run only selected tests, mark them with .only and .skip as defined in Mocha documentation.
Default way to add custom commands to Cypress (using: Cypress.Commands.add method) seems to cause Synpress to crash in the pipeline. Add custom commands to customCommands.ts.
For now there's only 1 test file in the /specs folder. If more spec files are added, Synpress will anyway run only 1 of them. (Probably a bug in Synpress).