使用打字稿处理 cypress 新选项卡

Question

我是 Cypress 新手，我正在尝试处理新应用程序选项卡的使用。

我有一个

单击此按钮时，将打开一个新选项卡，其中 URL 中包含随机 id（例如“/ticket/{some-id}”）

我有一个带有打字稿的 Cypress 测试项目。 我正在尝试获取新选项卡的链接并在当前的测试运行器浏览器中使用它。

我遵循了https://glebbahmutov.com/blog/cypress-tips-and-tricks/#deal-with-windowopen中的示例，但我有一些错误：

1. .wrappedMethod的错误：：属性“wrappedMethod”在类型“((url?: string | URL, target?: string, features?: string) => Window) & (( url?: 字符串 | URL、目标?: 字符串、功能?: 字符串) => 窗口)'.

2. .as('open')的错误：：类型'SinonStub'上不存在属性'as'。

注意：此错误仅发生在 .ts 文件中。该方法适用于 .js 文件。但我需要用打字稿进行测试

有人可以帮助我了解我是否需要一些特定的依赖项/配置才能使其工作吗？

这是我的代码： tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": "../node_modules",
    "target": "es6",
    "module": "commonjs",
    "allowJs": true,
    "lib": ["es6", "dom", "dom.iterable"],
    "types": ["cypress", "@testing-library/cypress", "node"]
  },
  "include": ["**/*.ts", "cypress.config.ts.test"]
}

package.json：

{
  "name": "E2E test suite",
  "version": "1.0.0",
  "description": "Cypress e2e tests",
  "main": "index.js",
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "format": "prettier . --write"
  },
  "dependencies": {
    "@cspell/eslint-plugin": "^8.4.1",
    "dotenv": "^16.0.0",
    "faker": "^6.6.6",
    "npx": "^10.2.2"
  },
  "devDependencies": {
    "@bahmutov/cy-api": "^2.2.6",
    "@cypress/puppeteer": "^0.1.3",
    "@faker-js/faker": "^8.4.1",
    "@testing-library/cypress": "^10.0.1",
    "@typescript-eslint/eslint-plugin": "^7.1.0",
    "@typescript-eslint/parser": "^7.1.0",
    "chai": "^5.0.3",
    "cypress": "^13.7.0",
    "cypress-await": "^1.6.2",
    "cypress-codegen": "^2.0.0",
    "cypress-wait-until": "^3.0.1",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "prettier": "^3.2.5",
    "typescript": "^4.2.3"
  }
}

test.cy.ts 类：

import { parkingLotAccessPage } from '../../support/pageObjects/pageElements/parkingLot/parking-lot-access.page';

describe('Parking Lot Access', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('should successfully access parking lot while still available spaces', function () {
    cy.window().then((win) => {
      cy.stub(win, 'open')
        .callsFake((url, target) => {
          expect(target).to.be.undefined;
          return win.open.wrappedMethod.call(win, url, '_self');
        })
        .as('open');
    });
    parkingLotAccessPage.openBarrierButton().click();
  });
});

parkingLotAccessPage.page.ts 页面对象：

class ParkingLotAccessPage {
  private elements = {
    openBarrierButton: () => cy.get('.barrier-button'),
  };

  get openBarrierButton() {
    return this.elements.openBarrierButton;
  }
}

export const parkingLotAccessPage = new ParkingLotAccessPage();

cypress.config.ts：

import { defineConfig } from 'cypress';
require('dotenv').config();

export default defineConfig({
  screenshotOnRunFailure: false,
  video: false,
  defaultCommandTimeout: 10000,

  retries: {
    runMode: 2
  },

  env: {
    apiUrl: process.env.BASE_API ?? 'http://localhost:8080',

    userPassword: process.env.USER_PASSWORD,
    userName: process.env.USER_NAME,

    adminPassword: process.env.ADMIN_PASSWORD,
    adminUserName: process.env.ADMIN_NAME
  },

  e2e: {
    baseUrl: process.env.BASE_URL ?? 'http://localhost:3000',
    supportFile: 'cypress/support/e2e.ts'
  }
});

Answer 1

cy.stub()

命令在底层使用Sinon，所以你首先需要的是sinon类型:

npm install --save @types/sinon

并添加tsconfig.json

{
  "compilerOptions": {
    ...
    "types": ["cypress", "@testing-library/cypress", "node", "@types/sinon/index.d.ts"]

然后在测试中，您可以通过强制转换解决#1wrappedMethod，并通过反转链接顺序解决#2

.as()

cy.window().then((win) => {
  cy.stub(win, 'open')
    .as('open')
    .callsFake((url, target) => {
      expect(target).to.be.undefined;
      return (win.open as sinon.SinonStub).wrappedMethod.call(win, url, '_self')
    })
})