Need support: TypeError: cy.fetchMetamaskWalletAddress is not a function

[Rabbit523]

Hi, Jakub. This package is what I really wanted. Nice tool!! I referred from Kwenta, but I'm having a problem like below. I'm working on NX with react, nextjs, typescript. Looking forward to your guide. @drptbl Thanks.

[drptbl]

Hey @Rabbit523, thanks for good words. It seems to be a setup error.

1. Did you follow the readme? https://github.com/Synthetixio/synpress#-important
2. Did you set up required enviromental variables like SECRET_WORDS?
3. Can you see metamask setup before your tests start? (importing a wallet with secret words inside metamask before tests start)
4. Do you run synpress with synpress run?

If above won't help, do you have your code available anywhere, so that I can take a look and assist?

Thanks, Jakub.

[Rabbit523]

Thanks for your reply, @drptbl. I looked forward your response.

1. I read the readme, but had never thought should metamaskSetup first. Will try again.
2. I didn't run synpress run

As I mentioned in the previous post, I'm using NX so I'm confusing how can I run synpress.

package.json

"scripts": {
    "nx": "nx",
    "start": "nx serveAppAndApi",
    "build": "nx build",
    "test": "nx test",
    "lint": "nx workspace-lint && nx lint",
    "e2e": "nx e2e",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "update": "nx migrate latest",
    "workspace-generator": "nx workspace-generator",
    "dep-graph": "nx dep-graph",
    "help": "nx help",
    "start:storybook": "nx run uikit:storybook",

workspace.json

"frontend-e2e": {
      "root": "apps/frontend-e2e",
      "sourceRoot": "apps/frontend-e2e/src",
      "projectType": "application",
      "targets": {
        "e2e": {
          "executor": "@nrwl/cypress:cypress",
          "options": {
            "cypressConfig": "apps/frontend-e2e/cypress.json",
            "tsConfig": "apps/frontend-e2e/tsconfig.e2e.json",
            "devServerTarget": "frontend:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "frontend:serve:production"
            }
          }
        },
        "lint": {
          "executor": "@nrwl/linter:eslint",
          "options": {
            "lintFilePatterns": [
              "apps/frontend-e2e/**/*.{js,ts}"
            ]
          }
        }
      }
    },

If I changed @nrwl/cypress:cypress in "executor" to synpress then I'm getting errors from nrwl node_modules. So, I'm wondering how can I add synpress run in script. Thanks again.

[drptbl]

@Rabbit523 metamaskSetup() is done automatically, you just need to pass all environmental variables that it needs, otherwise it will fail and throw an error. SECRET_WORDS is one of them.

Sorry, but I can't help with nx as I had no chance to work with it yet, but as far as I can see you're not having your tests at tests/e2e path. If you want to use custom folder structure, you have to mirror synpress config (https://github.com/Synthetixio/synpress/blob/dev/synpress.json) and set custom path to your e2e tests there. Everything is described in the readme of synpress.

[Rabbit523]

@drptbl Thank you very much for your guide. I could get more knowledge for synpress. But like you said, you have also no experience with NX. Could you kindly give me some other open source examples which are using synpress? Thank you again for your guide. :)

[drptbl]

@Rabbit523 Happy to help! This is the only one that I know for now: https://github.com/vbstreetz/synth-scan

[Rabbit523]

Hi, @drptbl. Need your help again... package.json "scripts": { "frontend-e2e": "start-server-and-test 'nx run frontend:serve' http-get://localhost:4200 'synpress open --configFile tests/e2e/synpress.json'", And I followed the folder structure of KWENTA. So, I could open Cypress but I'm still getting this error.

Here is folder structure.

According to the dev console, I've confirmed that Cypress.env is working fine. app.spec.ts

let metamaskWalletAddress
describe('frontend', () => {
  beforeEach(() => {
    cy.addMetamaskNetwork(Cypress.env("BSC_TESTNET"))
    cy.setupMetamask(Cypress.env("METAMASK_SECRET_WORDS"), Cypress.env("BSC_TESTNET"), Cypress.env("METAMASK_PWD"))
    cy.fetchMetamaskWalletAddress().then((address: string) => {
      metamaskWalletAddress = address
    })
  })

  context('Connect metamask wallet', () => {
    it(`should login with success`, () => {
      cy.visit('/')
      cy.get('[data-cy-connect-wallet]').click()
      cy.acceptMetamaskAccess()
      cy.waitUntil(() => {
        expect(cy.get('[data-cy-connect-wallet]').invoke('text')).to.equal('Logout')
      })
    })
  })
})

So sorry to bother you again. Regards.

[drptbl]

@Rabbit523 use synpress run instead of synpress open.

What is the content of your synpress.json?

I see some issues.. try this:

let metamaskWalletAddress;
describe('frontend', () => {
    before(() => {
        process.env.NETWORK_NAME = 'BSC_TESTNET';
        process.env.RPC_URL = 'https://data-seed-prebsc-1-s1.binance.org:8545/';
        process.env.CHAIN_ID = 97;
        process.env.IS_TESTNET = true;
        cy.fetchMetamaskWalletAddress().then((address: string) => {
            metamaskWalletAddress = address;
        });
    });

    context('Connect metamask wallet', () => {
        it(`should login with success`, () => {
            cy.visit('/');
            cy.get('[data-cy-connect-wallet]').click();
            cy.acceptMetamaskAccess();
            cy.waitUntil(() => {
                expect(cy.get('[data-cy-connect-wallet]').invoke('text')).to.equal('Logout');
            });
        });
    });
});

Still, it's hard to help without ability to take a look at your repo.

[Rabbit523]

@drptbl as I mentioned exactly, Crypress.env is working. So, i could get everything from the env which is defined in synpress.json.

And going to try with your code, I'm getting type error.

And once change them into string, but I'm getting same error.

[Rabbit523]

@drptbl Regarding the script, I already set it to synpress open.

If not, how can I get Cypress Head UI... If you think you can correct this error, then please contact me in private way. Please check my GitHub profile. Thank you so much, @drptbl

[drptbl]

@Rabbit523 Your environmental variables are not properly named, that's the issue. Most of them are placed under BSC_TESTNET which is also wrong. Take a look at the readme.

You can also add env variables as prefix before synpress run instead of putting them inside test code, like this: NETWORK_NAME=xyz RPC_URL=xyz CHAIN_ID=123 synpress run

[drptbl]

@Rabbit523 as I said, try to use synpress run - it also works in headed mode.

[Rabbit523]

@drptbl If I use synpress run, there is no previous error occurs. but this metamask setup always appears every time. and once I finished setup, there is no event happen and getting this error.

[Rabbit523]

"BSC_TESTNET": {
      "NETWORK_NAME": "Smart Chain - Testnet",
      "RPC_URL": "https://data-seed-prebsc-1-s1.binance.org:8545/",
      "CHAIN_ID": 97,
      "SYMBOL": "BNB",
      "BLOCK_EXPLORER": "https://testnet.bscscan.com",
      "IS_TESTNET": true
    }

As you can see, I correct the custom network setup insynpress.json env.

[drptbl]

@Rabbit523 All of them are placed under BSC_TESTNET which is also wrong. They have to be parent variables, not childs. Why are you placing all of them inside BSC_TESTNET? Readme tells nothing about it.

And again, it's hard to help without being able to look at the code and setup.

[Rabbit523]

Hi, @drptbl I think my problem is related with incompatible version matched in node modules. Because I'm getting this error.

TypeError: Cannot destructure property 'DOMElement' of '_prettyFormat.default.plugins' as it is undefined.
      ...
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/pretty-dom.js:33:3)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/config.js:11:18)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/queries/label-text.js:8:15)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/queries/index.js:7:18)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/get-queries-for-element.js:8:46)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/index.js:61:29)

[Rabbit523]

HI, @drptbl , I have an improvement. Metamask setup is moved to this step automatically. But the seed phrases are not put automatically. Anyway, install node_modules with yarn, there is no automatic progress, but with npm I could get this step. It's weird. Do you have any idea?

[drptbl]

@Rabbit523 If this step fails to pass it means that you're missing SECRET_WORDS variable and I can see that you've named it METAMASK_SECRET_WORDS few posts above. Again, you're not following the readme, everything is described there. Please, follow the readme. Thanks! 🙏

On the other side.. great progress, you're getting close to get it working :). Great job 🎉.

[Rabbit523]

Hi, @drptbl. Thanks for your reply again. 🙏 Please confirm the env again. I made env like this.

 "env": {
    "SECRET_WORDS": "xxx, xxxx, xxx, xxx, xxx, xxx, xxx, xxx, xxx, xxx, xxx, xxx",
    "PASSWORD": "xxx",
    "NETWORK_NAME": "Smart Chain - Testnet",
    "RPC_URL": "https://data-seed-prebsc-1-s1.binance.org:8545/",
    "CHAIN_ID": 97,
    "SYMBOL": "BNB",
    "BLOCK_EXPLORER": "https://testnet.bscscan.com",
    "IS_TESTNET": true
  }

[drptbl]

@Rabbit523 I'm sure that if you're going to follow the readme, you will know if env is right.

Please, let me know if you're going to have any issues related to synpress itself (technical issues/bugs/etc). I can't assist you further as I've already put a lot of my time trying to help you, sorry. Just start following the readme and you will make it work. I've also provided two different repos as an examples of synpress setup.

Thanks for understanding, Jakub.