Cypress : The submit button is disabled even after all the text fields have filled

Question

I was trying to automate a text submit form using cypress. The 'Create student' button is disabled even after all the fields have been filled

Please see the cypress error

code :

it('should be able to add a new student and update the details, remove from the class and delete the account', function () {
        cy.visit(
            'https://readingeggs.blake-staging.com/district_ui#/reading/manage-schools/students/195286/new'
        )
        cy.findByLabelText('First Name').type('ark')
        cy.get('#first-name').should('have.value', 'ark')
        cy.findByLabelText('Last Name').type('last')
        cy.get('#last-name').should('have.value', 'last')
        cy.get('[data-test-select-grade]').select('1')
        cy.get('#grade-dropdown').should('have.value', '1')
        cy.get('[data-test-select-teacher]').select('Lehner, Abbey')
        cy.get('#teacher-dropdown').should('have.value', '3068134')
    
        cy.get('[data-test-submit-new-student]').click()
        cy.get('#main')
            .findByRole('alert')
            .should('include.text', `Successfully created a student`)
    })
})

Answer 1

Be careful using click({force:true}) as suggested in the error message, there may be another problem that your test will now ignore!

You can first try an assertion that the button is not disabled.

Sometimes the test can run too quickly, and the web page has not yet enabled the button before the test tries to click it.

Adding .should('not.be.disabled') will retry this check for up to 4 seconds, which should be enough time for the page to complete changes.

cy.get('[data-test-submit-new-student]')
  .should('not.be.disabled')
  .click()

Answer 2

If using .should('not.be.disabled') does not work (I agree, it should be the first thing to try), try adding a trigger event to each input - in case the .type() command is not triggering the validation change.

cy.findByLabelText('First Name').type('ark').trigger('change')
cy.get('#first-name').should('have.value', 'ark')

cy.findByLabelText('Last Name').type('last').trigger('change')
cy.get('#last-name').should('have.value', 'last')

cy.get('[data-test-select-grade]').select('1').trigger('change')
cy.get('#grade-dropdown').should('have.value', '1')

cy.get('[data-test-select-teacher]').select('Lehner, Abbey').trigger('change')
cy.get('#teacher-dropdown').should('have.value', '3068134')
    
cy.get('[data-test-submit-new-student]').click()

If still no joy, use .click({force:true})

By the way, cy.get('[data-test-select-grade]').select('1') looks a bit suspicious. The select command can take a display value as a string or a position value as a number. The screenshot shows "K" is selected, so I would expect either of these to work

cy.get('[data-test-select-grade]').select(1)   // number passed

// or

cy.get('[data-test-select-grade]').select('K')  // string passed

Answer 3

One option would be to use {force: true} with click().

it('should be able to add a new student and update the details, remove from the class and delete the account', function () {
  cy.visit(
    'https://readingeggs.blake-staging.com/district_ui#/reading/manage-schools/students/195286/new'
  )
  cy.findByLabelText('First Name').type('ark')
  cy.get('#first-name').should('have.value', 'ark')
  cy.findByLabelText('Last Name').type('last')
  cy.get('#last-name').should('have.value', 'last')
  cy.get('[data-test-select-grade]').select('1')
  cy.get('#grade-dropdown').should('have.value', '1')
  cy.get('[data-test-select-teacher]').select('Lehner, Abbey')
  cy.get('#teacher-dropdown').should('have.value', '3068134')
  cy.get('[data-test-submit-new-student]').click({force: true})
  cy.get('#main')
    .findByRole('alert')
    .should('include.text', 'Successfully created a student')
})