Synpress 不能使用 cy.acceptMetamaskAccess（不是函数）

Question

我正在尝试使用 Synpress，但我无法理解如何解决

TypeError: cy.acceptMetamaskAccess is not a function

让我分享相关代码*（我主要是按照这个教程https://medium.com/andamp/how-to-setup-synpress-for-wen3-dapp-frontend-test-automation-with-metamask-73396896684a）

*如有遗漏，请告知

package.json:

{
  "devDependencies": {
    "@testing-library/cypress": "^8.0.2",
    "cypress": "^9.7.0"
  },
  "scripts": {
    "cypress:open": "cypress open",
    "test": "env-cmd -f .env npx synpress run -cf synpress.json --config supportFile='tests/support/index.js'",
    "test:watch": "env-cmd -f .env npx synpress open -cf synpress.json"
  },
  "dependencies": {
    "@synthetixio/synpress": "^1.2.0",
    "env-cmd": "^10.1.0"
  }
}

我是如何配置 synpress.json

{
    "baseUrl": "https://dappify.com/",
    "userAgent": "synpress",
    "retries": { "runMode": 0, "openMode": 0 },
    "integrationFolder": "tests/integration",
    "screenshotsFolder": "screenshots",
    "videosFolder": "videos",
    "video": true,
    "chromeWebSecurity": true,
    "viewportWidth": 1366,
    "viewportHeight": 850,
    "component": {
      "componentFolder": ".",
      "testFiles": "**/*spec.{js,jsx,ts,tsx}"
    },
    "env": {
      "coverage": false
    },
    "defaultCommandTimeout": 30000,
    "pageLoadTimeout": 30000,
    "requestTimeout": 30000,
    "supportFile": "tests/support/index.js"
  }

简单测试

describe('Test User Login', () => {

    
    it('Connects with Metamask', () => {
        cy.visit('https://dappify.com')
        cy.contains('Sign').click(); 
        cy.contains('Confirm').click();
        cy.contains('Connect Wallet').click();
        cy.contains('Metamask').click();
        cy.switchToMetamaskWindow();
        cy.acceptMetamaskAccess().should("be.true");

    })
  })

我不明白为什么cy.acceptMetamaskAccess()不是一个函数，我可以在这里找到它：https://github.com/synthetixio/synpress/blob/master/support/index.d.ts

如何使用此 index.d.ts 文件中列出的功能？

解决方案

Fody 的回答很有帮助！让我总结一下所需的步骤：

在 support 文件夹中，您需要一个 index.js

里面index.js

import './commands'
import "@synthetixio/synpress/support";

如果您想添加自定义函数，请将此文件也添加到 support

里面 commands.js:

import "@testing-library/cypress/add-commands";

// here go(es) your custom function(s)

Answer 1

解开 Synpress 结构有点困难。通常使用插件库，您可以导入一个支持组件，并将该库的自定义命令添加到您的测试中。

文章说

Run your tests with env-cmd -f .env npx synpress run -cf synpress.json --config supportFile='support/index.js'

这让我觉得最后一个参数引入了自定义命令。

如果您已经尝试过，以下是命令定义，您可以尝试将其添加到规范的顶部。

Cypress.Commands.add('acceptMetamaskAccess', allAccounts => {
  return cy.task('acceptMetamaskAccess', allAccounts);
})

Synpress 不能使用 cy.acceptMetamaskAccess（不是函数）

Synpress cannot use cy.acceptMetamaskAccess (is not a function)

javascript

json

cypress

e2e-testing

metamask

package.json:

我是如何配置 synpress.json

简单测试

解决方案

Synpress 不能使用 cy.acceptMetamaskAccess（不是函数）

Synpress cannot use cy.acceptMetamaskAccess (is not a function)

javascript

json

cypress

e2e-testing

metamask

package.json:

我是如何配置 synpress.json

简单测试

** 解决方案 **

解决方案