在 Cypress 中提交 POST 表单并导航到结果页面

Posted 2023-02-19

【中文标题】在 Cypress 中提交 POST 表单并导航到结果页面

【英文标题】：Submit a POST form in Cypress and navigate to the resulting page

【发布时间】：2019-10-23 03:04:12

【问题描述】：

我在使用 cy.request() 命令时遇到了赛普拉斯加载响应正文的问题。

在我们的应用程序中，当一个表单被填写并提交时，它会 POST，响应正文是新页面。

当我尝试在 Cypress 中以编程方式填写表格时。所以我设置了一个 cy.request() 命令，正文填充了表单字段，这与手动填写时发生的情况相同。当我运行该命令时，我可以查看控制台并看到正在返回正确的正文，但没有加载新的文档页面。所以我只能坐在旧的空表单页面上。

cy.request(
        url: "company-webpage-form-url.com",
        method: "POST",
        form: true,
        body: 
            first_name: "first_name",
            last_name: "last_name",
            company_name: "company_name",
            address1: "address1",
            address2: "address2",
            city: "city",
            state: "NY",
            zip: "13903",
            country: "US",
            phone_number: "607-555-5555",
            phone_ext: "555",
            fax_number: "fax_number",
            fax_ext: "fax_ext",
            email: "[e-mail]",
            email_2: "[e-mail]",
            user_data: "Continue"
        
    );

所有数据都是正确的，我得到了正确的响应正文，但我只能在控制台中看到它。我不知道如何让它加载，就像我提交表单时一样。我现在得到的只是 200 响应，测试结束。

之后我尝试访问下一个 URL，但我收到一条错误消息，指出该 URL 的页面不存在。我尝试在 POST 之后单击提交按钮，但这只会导致提交一个空表单，从而导致验证错误。

我不知道如何让 cypress 加载响应正文，该正文以文档的形式（新页面）。有人有什么建议吗？

编辑：我应该补充一点——我希望通过 POST 填写表格的原因是因为我需要填写表格来测试某些选项是否有效。我有一个测试可以确保表单字段和提交按要求工作，但是对于需要在此表单的另一侧检查的 30 多个选项，我想遵循赛普拉斯的最佳实践，即不要每次手动填写表单单次（他们在网站上显示了一个登录示例）。

【问题讨论】：

你为什么会期待别的？您不是通过 页面 发出请求，没有发出可能会改变您在浏览器中看到的内容的请求。 按照用户的方式填写表格。

我希望有一种方法可以遵循最佳实践，通过在我拥有的每个测试中手动填写表格来避免让我的测试陷入困境。赛普拉斯明确表示这违反了最佳实践，因此，在尝试遵循他们的建议并且在初始手动运行之后 30 次不必要地在界面上测试一项功能时，我正在寻找一种与这些最佳实践相一致并加快速度的解决方案我们的测试。

“在网站上” - 这是互联网，请提供您所指内容的实际链接。您没有提供有关您正在测试的实际应用程序的足够信息来说明这是否可以正常工作，但您目前正在尝试的绝对不会。

【参考方案1】：

如果你想模拟一个表单 POST 导航到一个新页面，你可以使用cy.visit() 来做到这一点！只需将您的 request 更改为 visit 即可：

cy.visit(
        url: "company-webpage-form-url.com",
        method: "POST",
        body: 
            first_name: "first_name",
            last_name: "last_name",
            company_name: "company_name",
            address1: "address1",
            address2: "address2",
            city: "city",
            state: "NY",
            zip: "13903",
            country: "US",
            phone_number: "607-555-5555",
            phone_ext: "555",
            fax_number: "fax_number",
            fax_ext: "fax_ext",
            email: "[e-mail]",
            email_2: "[e-mail]",
            user_data: "Continue"
        
    );

【讨论】：

我没有意识到你可以像这样构造一个 cy.visit() 命令，但这正是我想要做的。谢谢！我对开发还是有点陌生​​，所以阐明我正在寻找的东西有点困难，所以谢谢你的解决方案。没错。

这很酷，我不知道你能做到这一点，但请注意，这会将你的 E2E 测试与底层数据结构结合起来。这可能不是一个好主意，但 YMMV。

【参考方案2】：

cy.request() 旨在用于访问 API 以设置您的测试，它根本不与被测应用程序或 DOM 交互。

如果您想测试表单提交，请使用 cy.get()、cy.type() 和 cy.click() 与表单进行交互，就像真正的用户一样：

// fill out a form field
cy.get('input[name="first_name"]')
.type('first name here')
.get('input[name="last_name"]')
.type('last name here')
/** fill out more form fields **/

// simulate clicking submit
cy.get('input[type=submit]')
.click()

【讨论】：

我正在尝试这种方法，但是在提交表单后，发生了奇怪的重定向，而不是像往常一样登陆下一页，我最终进入了登录页面，即默认页面。这怎么可能？看起来提交按钮在普通浏览器和赛普拉斯中的工作方式不同。 prnt.sc/um4hmt