TypeError：无法读取未定义赛普拉斯的属性“点击”答案

【问题标题】：TypeError: Cannot read property 'click' of undefined CypressTypeError：无法读取未定义赛普拉斯的属性“点击”
【发布时间】：2021-09-01 17:32:30
【问题描述】：

我使用代码找到按钮：

cy.get('[class="ng-select ng-select-multiple ng-select-searchable ng-untouched ng-valid ng-select-focused ng-select-opened ng-select-top ng-dirty"]')
  .children('[class="ng-select-container ng-has-value"]')
  .children('[title="Clear all"]')

然后我执行几个操作 - 例如单击、检查是否可见等。如果我将这段代码直接放在测试文件中，所有这些都可以工作。

getClearObjectsButton() {
  cy.get('[class="ng-select ng-select-multiple ng-select-searchable ng-untouched ng-valid ng-select-focused ng-select-opened ng-select-top ng-dirty"]')
    .children('[class="ng-select-container ng-has-value"]')
    .children('[title="Clear all"]')  
}

但是，如果我使用带有已创建函数的辅助文件，则会收到标题中的错误。

register.getClearObjectsButton().click()

cypress_runner.js:174495 TypeError: Cannot read property 'click' of undefined
    at Context.<anonymous> (tests?p=cypress\integration\create_user\check_objects_selector.js-106:580)

知道如何解决这个问题吗？

【问题讨论】：

标签： javascript cypress

【解决方案1】：

我对赛普拉斯还很陌生，但我建议您尝试以下操作：

1) 最可能的问题/解决方案 - 是否执行了“辅助文件”？ 我记得在调用 cypress/support/commands.js 文件中定义的辅助函数时遇到了一些问题。 commands.js 是您提到的“辅助文件”吗？似乎你用register.getClearObjectsButton() 调用它。 register 是什么？如果您将getClearObjectsButton 方法放入cypress/support/commands.js 文件中，则可以使用cy.getClearObjectsButton() 在所有测试文件中调用它

2) 如果执行了，请尝试在该辅助文件中执行单击。有用吗？

3) 另外，如果您确定您的方法已执行，我猜您预计 cypress .get 函数的产量会保持“活动”，但可能并非如此。尝试将其保存在变量中并从您的 getClearObjectsButton 方法返回。

【讨论】：

【解决方案2】：

是的，文件已执行。

    import CreateUser from "C:/cypress-s/cypress/classes/CreateUser.spec.js";

    describe('Check role selector', () => {
        const register = new CreateUser();

     it.only('clear field button', () => {
            register.fillObject(0)
            register.getClearObjectsButton().click()
     })
})

我将此文件中的函数用于其他测试，但我从未遇到过这个问题。

【讨论】：

赛普拉斯建议使用命令来执行此操作。您是决定走这条路还是我从柏树中遗漏了什么？

【解决方案3】：

另一个想法 - 也许这会以某种方式帮助你。

  getClearObjectButton() {
    cy.get('[class="ng-select ng-select-multiple ng-select-searchable ng-untouched ng-valid ng-select-focused ng-select-opened ng-select-top ng-dirty"]').children('[class="ng-select-container ng-has-value"]')
    .children('[title="Clear all"]').click()
  }

    it.only('clear field button', () => {
        register.fillObject(0)
        register.getClearObjectButton()
})

工作得很好，但是如果我更改 click() 位置，我会收到错误提示。

  getClearObjectButton() {
    cy.get('[class="ng-select ng-select-multiple ng-select-searchable ng-untouched ng-valid ng-select-focused ng-select-opened ng-select-top ng-dirty"]').children('[class="ng-select-container ng-has-value"]')
    .children('[title="Clear all"]')
  }


   it.only('clear field button', () => {
        register.fillObject(0)
        register.getClearObjectButton().click()
})

【讨论】：

【解决方案4】：

返回是关键：)

  getClearObjectButton() {
   rreturn cy.get('[class="ng-select ng-select-multiple ng-select-searchable ng-untouched ng-valid ng-select-focused ng-select-opened ng-select-top ng-dirty"]').children('[class="ng-select-container ng-has-value"]')
    .children('[title="Clear all"]')
  }


   it.only('clear field button', () => {
        register.fillObject(0)
        register.getClearObjectButton().click()
})

【讨论】：