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

Question

我想使用 cypress-audit 进行灯塔测试，但在完成他们在 https://www.npmjs.com/package/cypress-audit 上所说的一切之后它不起作用。我可以在 cypress/support/commands.js 中使用“cy.lighthouse()”，但不能在扩展名为 .spec.ts 或 .ts 的文件中使用(我得到“Property 'lighthouse' does not exist on type 'cy & EventEmitter'.ts(2339)”错误)。我已经尝试在 Internet 上找到任何解决方案，但没有任何效果。

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);

  }