Cypress отправка формы с предотвращением - PullRequest
Новая
       71

Cypress отправка формы с предотвращением

1 голос
/ 22 апреля 2020

У меня проблемы с использованием Cypress.

В настоящее время у меня есть 2 проблемы.

  1. Отправляется форма с protectDefault и страница обновляется.
  2. Мне нужно .click() и ввести, прежде чем я смогу .type() в него.

-

У меня есть форма, которая предотвращает, и вы можете видеть из теста, который отправляет форму, которая добавляет пустую строку запроса к URL, и ни одно из моих сообщений об ошибках не показывается. На самом деле этого не происходит, когда я сам использую приложение. 

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

Я использую Svelte / Sapper в качестве внешнего интерфейса.

enter image description here

Форма: 

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

Вторая проблема заключается в том, что мне нужно .click() и ввести в свой тест, прежде чем я смогу .type() в него.

Я должен сделать это:

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

Вместо этого:

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

Я не уверен, почему это происходит. Если я не щелкаю поле, оно говорит, что поле может иметь атрибут disabled, чего нет. Когда я тестирую его сам, я не вижу никаких проблем, и снимки dom в Cypress не показывают ничего необычного.

Возможно, это связано с автозаполнением?

Кто-нибудь запускал в эти проблемы?

1 Ответ

1 голос
/ 22 апреля 2020

Проблема с Sapper заключается в том, что это SSR, поэтому приложение не было увлажнено до того, как Cypress запустил тесты, что вызвало целый ряд проблем.

Решением было заставить Cypress ждать, пока приложение было гидратировано. Это было достигнуто путем установки атрибута в ответе на обещание от sapper.start и затем перезаписи команды Cypress визит.

клиент. js: 

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

Команды Cypress: 

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

Теперь все работает и тесты проходят.

...