在赛普拉斯中提交POST表单,然后导航到结果页面

时间:2019-06-07 15:19:38

标签: request xmlhttprequest response cypress

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

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

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

我不知如何获得一个柏树来加载响应主体,它以文档的形式出现(新页面)。有人有提示吗?

编辑:我应该补充一点-我想要从POST填写表格的原因是因为表格对于我来说是必要的,以测试某些选项是否有效。我有一个测试可以确保表单字段和提交工作按要求进行,但是对于此表单另一侧需要检查的30多个选项,我想遵循赛普拉斯的最佳做法,即不要每次手动填写表单一次(他们显示了登录网站的示例)。

2 个答案:

答案 0 :(得分: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"
        }
    });

答案 1 :(得分:0)

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