赛普拉斯使用preventDefault提交表单

Question

我在使用赛普拉斯时遇到麻烦。

我目前有2个问题。

1. 正在提交带有preventDefault的表单，并且页面正在刷新。
2. 我必须.click()并输入才能进入.type()。

-

我有一个具有preventDefault的表单，从测试中您可以看到它提交了表单，该表单将一个空查询字符串添加到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作为前端。

表格：

<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快照也没有发现任何异常。

也许与自动填充有关？

有人遇到这些问题吗？

Answer 1

Sapper的问题在于它是SSR，因此该应用程序在赛普拉斯开始运行测试之前没有被水化，这引起了很多问题。

解决方案是告诉赛普拉斯等到应用程序水合为止。这是通过在sapper.start的诺言中设置一个属性，然后覆盖Cypress访问命令来实现的。

client.js：

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

赛普拉斯命令：

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

现在一切正常，测试通过了。