为 Synpress/Cypress 项目添加自定义函数答案

【问题标题】：Adding custom functions for Synpress/Cypress Project为 Synpress/Cypress 项目添加自定义函数
【发布时间】：2022-06-21 00:19:19
【问题描述】：

我想将 custom functions 添加到 synpress project。（Synpress 是 Cypress 的包装器，允许与 Metamask 交互）。请注意有一个问题：Cypress custom command is not recognized when invoked，但即使我阅读了此 QA，我的自定义函数也无法识别。

这是我的项目设置。

synpress_project/
├─ cypress/
│  ├─ e2e/
│  ├─ support/
├─ package-lock.json
├─ package.json

来自前面提到的answer

index.js 中的所有代码和引用的模块都在您之前加载测试文件。所以你需要在你的 index.js 中引用(require) commands.js 文件

我服从了，在cypress/support：

commands.js

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

// add it here, because custom functions need synpress commands as well
import "@synthetixio/synpress/support";

// add custom functions

Cypress.Commands.add("disconnectFromDappify", () => {
    cy.disconnectMetamaskWalletFromDapp().should("be.true");
  });

index.js

import './commands'

我知道正在读取文件，因为删除行 import "@synthetixio/synpress/support"; 会破坏测试（元掩码交互不再起作用）。但是，我的功能不可用

TypeError: cy.disconnectFromDappify is not a function

package.json

{
  "devDependencies": {
    "cypress": "^10.0.1"
  },
  "scripts": {
    "test": "env-cmd -f .env npx synpress run -cf synpress.json"
  },
  "dependencies": {
    "@synthetixio/synpress": "^1.2.0",
    "env-cmd": "^10.1.0"
  }
}

synpress.json

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

【问题讨论】：

标签： javascript cypress e2e-testing metamask cypress-custom-commands

【解决方案1】：

尝试为您的自定义命令添加类型定义。

我只希望 TypeError 是您使用的是 Typescript，但您的文件扩展名另有说明。

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject> {
    disconnectFromDappify(): Chainable<any>
  }
}

Cypress.Commands.add("disconnectFromDappify", () => {
  cy.disconnectMetamaskWalletFromDapp().should("be.true");
});

【讨论】：

不幸的是，这对我不起作用。

【解决方案2】：

在同事的帮助下，我得以解决。

虽然，我在synpress.json 中指定了"supportFile": "cypress/support/index.js"。它找不到自定义函数。

但如果我改变调用 supportFile 的方式，显式而不是隐式，它会起作用。

在命令末尾添加--supportFile='cypress/support/index.js'。

"scripts": {
    "test": "env-cmd -f .env npx synpress run -cf synpress.json --supportFile='cypress/support/index.js'"
  },

此外，从commands.js 文件中删除import "@testing-library/cypress/add-commands";。（不知道为什么需要这样做，但是代码中断，如果使用，欢迎任何提示！）

【讨论】：