Cypress submitting form with preventDefault

问题

I am having trouble using Cypress.

There are 2 problems I'm currently having.

A form with preventDefault is being submitted and the page is refreshing.
I have to .click() and input before I can .type() into it.

I have a form that has preventDefault, and you can see from the test that it submites the form, which adds a empty query string to the url, and none of my error handling messages are shown. This doesn't actually happen when I use the app myself.

    it('requires email', () => {
        cy.visit('/sign-in')
        cy.get('form').contains('Sign in').click()
        cy.get('.errors').should('contain', 'Email is required.')
    })

I am using Svelte/Sapper as my front-end.

Form:

<form on:submit|preventDefault={handleSubmit}>
    <Input label="Email" type="email" bind:value={email} />
    <Input label="Password" type="password" bind:value={password} />
    <Button text="Sign in" />
</form>

The second issue is that I have to .click() and input in my test before I can .type() into it.

I have to do this:

cy.get('#email').click().type('user@example.com{enter}')

Instead of this:

cy.get('#email').type('user@example.com{enter}')

I am not sure why this is happening. If I don't click the field, it says the field may have the attribute disabled, which it doesn't. When I test it myself, I don't see any issues, and the dom snapshots in Cypress don't reveal anything unusual.

Perhaps it has to do with autofill?

Has anyone run into these problems?

回答1:

The issue with Sapper is that it is SSR, so the app was not hydrated before Cypress started running tests, which was causing a whole bunch of issues.

The solution was to tell Cypress to wait until the app was hydrated. This was accomplished by setting an attribute in the return to the promise from sapper.start and then overwriting the Cypress visit command.

client.js:

sapper.start({
    target: document.querySelector("#app"),
}).then(() => {
    document.body.setAttribute('hydrated', '')
})

Cypress commands:

Cypress.Commands.overwrite('visit', (orig, url, options) => {
    orig(url, options)
    cy.get('body[hydrated]').should('have.length', 1)
})

Now everything works and tests are passing.

来源：https://stackoverflow.com/questions/61369896/cypress-submitting-form-with-preventdefault

标签

integration-testing

cypress

svelte

sapper