赛普拉斯中的.click（）命令未执行其功能

Question

这是我第一次使用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>

Answer 1

好像您是在输入字段而不是按钮上单击。试试：

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

Answer 2

您还可以尝试基于按钮text

单击“提交”按钮

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