如何将数据类型附加到 Cypress.as 别名函数

Question

我有一个对象，我从中创建了一个名为 userId 的别名

cy.wrap(response.id).as('userId');

当引用 userId 时，它的类型是 JQuery<HTMLElement>

cy.get('@userId').then(userId => // userId type is JQuery<HTMLElement> });

定义别名时如何定义别名类型？

目的是直接将其设为 number 而不是默认的 JQuery<HTMLElement>

编辑

我不想要这样的东西

cy.get<number>('@userId').then(userId => // userId type is number });

我想在函数定义处定义类型。

Answer 1

AFAIK，不可能从别名定义派生类型到别名引用。但是你可以直接在引用上定义它（仅适用于 Typescript 文件）：

cy.get<number>('@userId').then(userId => // userId type is number });

您也可以为这样的数字别名提取一个简单的函数（或添加一个自定义的赛普拉斯命令）：

function cyNumber(alias: string) : Chainable<number> {
  return cy.get<number>(alias)
}

cyNumber('@userId').then(userId => // userId type is number });

Answer 2

问题出在 cypress.d.ts

中的这两个类型定义

// cypress.d.ts

/**
 * Get one or more DOM elements by selector.
 * The querying behavior of this command matches exactly how $(…) works in jQuery.
 * @see https://on.cypress.io/get
 * @example
 *    cy.get('.list>li')    // Yield the <li>'s in <.list>
 *    cy.get('ul li:first').should('have.class', 'active')
 *    cy.get('.dropdown-menu').click()
 */
get<E extends Node = HTMLElement>(
  selector: string, 
  options?: Partial<Loggable & Timeoutable & Withinable & Shadow>)
  : Chainable<JQuery<E>>

/**
 * Get one or more DOM elements by alias.
 * @see https://on.cypress.io/get#Alias
 * @example
 *    // Get the aliased ‘todos’ elements
 *    cy.get('ul#todos').as('todos')
 *    //...hack hack hack...
 *    //later retrieve the todos
 *    cy.get('@todos')
 */
get<S = any>(
  alias: string, 
  options?: Partial<Loggable & Timeoutable & Withinable & Shadow>)
  : Chainable<S>

您可以通过颠倒顺序来“修复”它，

// cypress/support/index.ts

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      // change the order of these two dfns
      get<S = any>(alias: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<S>
      get<E extends Node = HTMLElement>(selector: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<E>>
    }
  }
}

现在 cy.get('@alias') 类型为 any（因为 get<S = any>），这是有效的，因为别名存储任何类型。

而且 selector 版本也被输入到 any，似乎相同的类型签名使其中一个 defns 变得多余。

正如 Mikhail Bolotov 指出的那样，使用不同的命令名称可以解决问题，但我会在 /cypress/support/index.ts 中将其定义为自定义命令并将其命名为 getAlias，因为它必须适用于任何类型.

如何将数据类型附加到 Cypress.as 别名函数

How to attach data type to Cypress.as alias function

javascript

typescript

cypress

typescript-types