typescript - Cypress + Typescript : How to use JS methods on return values of type Cypress. Chainable<字符串>？

Question

我是 Typescript 的新手，虽然我认为我了解大部分内容，但我不明白的是为什么我不能对具有 Cypress.Chainable 类型的值使用标准 JS 方法。

例如:

const chainedString: Cypress.Chainable<string> = cy.wrap(" test ")
const trimmed = chainedString.trim()

抛出这样的错误:Property 'trim' does not exist on type 'Chainable<string>'

如何处理返回的、可链接的值并在其上使用 JS 方法而不会在键入时出错？

事实证明，在线搜索不是很有帮助 - Cypress 中 Typescript 项目的资源有限

更多内容如下...

这是自定义命令。下面是类型定义

Cypress.Commands.add('checkText', (XpathSelector, options?: CheckTextType ) => {
    return cy.xpath(XpathSelector).invoke('text').then(text=>{
      text = text.trim() // remove trailing whitespace

        if(options!=undefined){
            // if options has values provided, run checks
            if(options.matchCase==undefined || options.matchCase==true){
                //* Matching case!
                try {
                    expect(text).to.contain(options.textToAssert)
                } catch (error) {
                    if(options.ignoreError==false || options.ignoreError==undefined){
                      if(options.messageOnFail!=undefined){
                          throw new AssertionError(`${options.messageOnFail}. Error was \n ${error}`)
                      } else if(options.messageOnFail==undefined){
                          throw error
                      }
                    } else {
                      return cy.wrap(false)
                    }
                }      
            } else {
                //* NOT matching case!
                try {
                    expect(Cypress._.toLower(text)).to.contain(Cypress._.toLower(options.textToAssert))
                } catch (error) {
                    if(options.ignoreError==false || options.ignoreError==undefined){
                      if(options.messageOnFail!=undefined){
                          throw new AssertionError(`${options.messageOnFail}. Error was \n ${error}`)
                      } else if(options.messageOnFail==undefined){
                          throw error
                      }
                    } else {
                      return cy.wrap(false)
                    }
                }
                
            }
            return cy.wrap(true);
        }
        return cy.wrap(text)
    })
})

这是类型定义

export type CheckTextType = {
  textToAssert:string
  matchCase?:boolean
  ignoreError?:boolean
  messageOnFail?:string
}


declare global {
  namespace Cypress {
/**
       * @description Checks the asserted text against what the element has. Matching case default is *true*.
       * @returns String of text from the element
       * @param {String} XpathSelector The **Xpath** selector to use to grab the element in question.
       * @param {String} textToAssert The string of element's text you want to assert on.
       * @param {Boolean} matchCase Specify false if you want to use lowercase strings. Else, case will be matched
       * @param {Boolean} ignoreError Speficy true if you want to ignore the default error thrown when command assertion fails
       * @param {String} messageOnFail Input a string to include in the output if the command assertion fails
       * @example cy.checkText("//div[contains(@class,'email-address')]", {textToAssert:"example@gmail.com", matchCase:false})
       */
      checkText(XpathSelector:string, {textToAssert, matchCase, ignoreError, messageOnFail}?:CheckTextType):Chainable<Chainable<string> | Chainable<boolean>>
 }
}

Answer 1

第一行也应该失败，因为您分配的字符串不是 Chainable。

应该是包裹

const chainedString: Cypress.Chainable<string> = cy.wrap(" test ");

其中 Chainable 是实现 Cypress 队列的包装器对象。

没有 .trim() 或任何其他字符串方法的原因是，

• Chainable 的泛型可以是任何类型(字符串、数字、对象)
• 目的只是为了实现命令链

您可以使用 .then() 轻松处理展开的值

const chainedString: Cypress.Chainable<string> = cy.wrap(" test ")
chainedString
  .then(str => str.trim())  // typescript infers str type from above
  .should('eq', 'test')