cy.lighthouse 和 cy.pa11y 在 .spec.ts 或 .ts 等文件中不起作用

Question

我想使用 cypress-audit 进行 lighthouse 测试，但是在完成了他们在 https://www.npmjs.com/package/cypress-audit 上所说的一切之后，它不起作用。我可以在 cypress/support/commands.js 中使用“cy.lighthouse()”，但不能在扩展名为 .spec.ts 或 .ts 的文件中使用（我得到“属性 'lighthouse' 在类型 'cy & EventEmitter'.ts(2339) 上不存在”错误）。我已经尝试在互联网上找到任何解决方案，但没有任何效果。

package.json:

{
  "name": "XXXX",
  "version": "0.0.1",
  "description": "",
  "scripts": {
    "start_cypress": "npx cypress open",
    "install_dependencies": "npm install"
  },
  "author": "",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "cypress": "^9.3.1",
    "cypress-audit": "^1.1.0",
    "typescript": "^4.5.4",
    "webpack": "^5.66.0",
    "webpack-dev-server": "^4.7.3"
  }
}

cypress/plugins/index.js:

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

/**
 * @type {Cypress.PluginConfig}
 */

const { lighthouse, pa11y, prepareAudit } = require("cypress-audit");

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, launchOptions) => {
    prepareAudit(launchOptions);
  });

  on("task", {
    lighthouse: lighthouse(), // calling the function is important
    pa11y: pa11y(), // calling the function is important
  });
}

cypress/support/commands.js:

import 'cypress-audit/commands';

CypressAudit.spec.ts:

describe('Audits', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it("should pass the audits", function () {
        cy.lighthouse();
        cy.pa11y();
    });
});

Answer 1

cypress-audit 包中有一些类型定义应该被引入。也许是 ts 和 js 文件的混合？

尝试将这些添加到 /cypress/support/index.ts

  interface Chainable<Subject> {
    /**
     * Runs a lighthouse audit
     * @example
     * cy.lighthouse(thresholds,opts,config)
     */
    lighthouse(thresholds?: LighthouseThresholds, opts?: any, config?: any);

    /**
     * Runs a pa11y audit
     * @example
     * cy.pa11y(opts)
     */
    pa11y(opts?: Options);

  }

Answer 2

原来我想在 file.spec.ts 中使用“cy.lighthouse()”（我使用的是打字稿），在检查了示例中的所有内容后，我注意到示例在file.spec.js。事实证明，即使 cypress 使用 typescript，该命令也仅适用于 javascript.

cy.lighthouse 和 cy.pa11y 在 .spec.ts 或 .ts 等文件中不起作用

cy.lighthouse and cy.pa11y not working in files like .spec.ts or .ts

typescript

cypress