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

Question

我在使用 cy.request() 命令时遇到 Cypress 加载响应主体的问题。

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

当我尝试在 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: "developer@company.com",
            email_2: "developer@company.com",
            user_data: "Continue"
        }
    });

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

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

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

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

Answer 1

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

如果您想测试表单提交，请使用 cy.get(), cy.type(), and 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()

Answer 2

如果您想模拟表单 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: "developer@company.com",
            email_2: "developer@company.com",
            user_data: "Continue"
        }
    });

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

Submit a POST form in Cypress and navigate to the resulting page

response

xmlhttprequest

request

cypress