Cypress 中的 .click() 命令未执行其功能答案

【问题标题】：.click() command in Cypress is not performing its functionCypress 中的 .click() 命令未执行其功能
【发布时间】：2020-05-01 03:15:30
【问题描述】：

这是我第一次使用 Cyrpress，我正在尝试为我的 React 应用程序运行测试。测试是在模式中输入名称后，单击提交按钮，您将被带到主页。但是， .click 功能不起作用，至少我认为它不起作用，因为模式仍然存在，上面有名称。谁能告诉我我做错了什么以及如何解决它？

这就是我编写测试的方式：

   **fourth.spec.js**
        describe ('UI tests', () => {
            it('should navgitate to landing page after submitting with button', () =>{
                const text = "Christian"
                cy.visit('/')
                cy.get('.new').type (text).should ('have.value', text)
                .click()
            })
        })

这就是我为我的模态设置按钮的方式

 <div className="my-modal">
         <h1>Welcome!</h1>
            <p>Please enter your name</p>
               <form>  
                 <input 
                     autoFocus
                     className="new task"
                     placeholder="Name"
                     type="text" 
                     name="firstName" 
                     onChange={this.inputChange}>
                 </input>
               </form>
               <button  
                  className="modal-btn"
                  type="button" 
                   disabled={!this.state.firstName} 
                   onClick={this.displayNameHandler}>
                   Submit
               </button>
    </div>

【问题讨论】：

标签： testing cypress

【解决方案1】：

看起来您点击的是输入字段而不是按钮。试试：

cy.get('.modal-btn').click()

【讨论】：

【解决方案2】：

您也可以尝试根据按钮text点击提交按钮

cy.get('button[type="button"]').contains("Submit").click();

【讨论】：