Rithu
Rithu

Reputation: 31

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

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

image

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`)
    })
})

Upvotes: 2

Views: 1528

Answers (3)

Fody
Fody

Reputation: 31894

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

Upvotes: 1

Seeker
Seeker

Reputation: 465

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()

Upvotes: 3

Alapan Das
Alapan Das

Reputation: 18650

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')
})

Upvotes: 0

Related Questions