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

问题

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: "developer@company.com",
            email_2: "developer@company.com",
            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).

回答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: "developer@company.com",
            email_2: "developer@company.com",
            user_data: "Continue"
        }
    });

回答2:

cy.request() is intended to be used for accessing APIs to set up your tests, it does not interact with the application under test or the DOM at all.

If you want to test form submission, use cy.get(), cy.type(), and cy.click() to interact with the form like a real user would:

// 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()

来源：https://stackoverflow.com/questions/56497146/submit-a-post-form-in-cypress-and-navigate-to-the-resulting-page