Cypress + typescript :如何在Cypress.Chainable类型的返回值上使用JS方法< string>?

kmb7vmvb  于 2022-11-18  发布在  TypeScript
关注(0)|答案(2)|浏览(198)

我对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>>
 }
}
c0vxltue

c0vxltue1#

第一行也应该失败,因为您要指派的字串不是Chainable。
应该包起来

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

其中Chainable是实现Cypress队列的 Package 器对象。
没有.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')
pftdvrlh

pftdvrlh2#

由于@returns String of text from the element,返回类型看起来不正确,请尝试此类型

checkText(
  XpathSelector:string, 
  {textToAssert, matchCase, ignoreError, messageOnFail}?:CheckTextType
): Chainable<string | boolean>

如果有一个typescript的typescript,它会查看实现并自动建议类型定义,那就太好了。

相关问题