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

Question

I'm having issues with Cypress loading the response body when I utilize the cy.request() command.

In our application, when a form is filled out and submitted, it POSTs, and the response body is the new page.

When I'm trying to do in Cypress is programmatically fill out the form. So I set up a cy.request() command, with the body filled with the form fields, which is the same as what happens when you fill it out manually. When I run the command, I can view the console and see that the correct body is being returned, but the new document page doesn't load. So I'm left just sitting on the old empty form page.

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: "[email protected]",
            email_2: "[email protected]",
            user_data: "Continue"
        }
    });

All of the data is correct, and I get the correct response body, but I can only see it in the console. I have no idea how to get it to load, like it would when I submit the form. All I get right now is a 200 response, and the test ends.

I've tried visiting the next URL right after, but I get an error that the page for that URL doesn't exist. I've tried clicking the submit button after the POST, but that just results in an empty form being submitted, which causes a validation error.

I'm at a loss for how to get cypress to load the response body, which is in the form of a document (the new page). Anyone have any tips?

Edit: I should add that - the reason I am looking to fill the form from a POST is because the form is necessary to fill out for me to test whether certain options work or not. I have a single test that ensures the form fields and submission work as required, but for the 30+ options that need to be checked on the other side of this form, I wanted to follow Cypress' best practice of not manually filling the form every single time (they show an example with login on the website).

Answer 1

If you'd like to simulate a form POST navigating to a new page, you can use cy.visit() to do this! Just change your request to visit and it should work:

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: "[email protected]",
            email_2: "[email protected]",
            user_data: "Continue"
        }
    });