javascript - 如何在 Cypress 中测试提交的数据

Question

我需要检查提交数据中的某些值是否具有预期值。为此，我尝试在请求运行期间通过 Cypress 中的 XMLHttpRequest 访问和发送数据。

    describe('test submitted data', () => {
      it('some data is changed', () => {
        submitBtn().click({force: true});
        
        //in this case Cypress doesnt get into this debugger point
        cy.server({
          onAnyRequesty: (props) => {
            debugger
          }
        });

        //in this one Cypress go into and stops at the point but
        //the data variable doesnt contrain submitedData
        cy.route('PUT', `${APP_CONTEXT}/api/model/${modelId}`, (data) => {
          debugger;
        });
      });
    });

数据通过以下方式发送:

 $.ajax({
        url: url,
        method: "PUT",
        data: "{"inputData":"123"}",
        contentType: "application/json",
        success: () => {},
        error: () => {}
      });

我做错了什么？谢谢

还有一件事:如何让 Cypress 检查数据条件是否满足？例如:

it('some data is changed', () => {
        submitBtn().click({force: true});
        cy.route('PUT', `${APP_CONTEXT}/api/model/${modelId}`, (data) => {

          const parsedData = JSON.parse(data);
          // the test is passed if the value is equal
          expect(parsedData.inputData).to.eq('123');
        });

更新

我尝试了@richard-matsen 建议的答案和不同的回调键，但都没有用:

• onResponse
• onAnyResponse
• 请求
• onAnyRequest

但是两者的回调函数都没有运行

      it("Signature removed from the field and empty value submitted", () => {
        cy.server();
        submitBtn().click();

        //here i check the put url as an url submitting to
        cy.log(`${BASE_URL}/api/data/${formId}/${modelId}`);

        cy.route({
          method: "PUT",
          url: `${BASE_URL}/api/data/${formId}/${modelId}`,
          onAnyRequest: (data) => {
            const signValue = JSON.parse(data)[`${modelId}|sign_2||`];
            debugger;
            cy.log(signValue);
            expect(signValue).to.eq(null)
          }
        })
      })

更新更新@richard-matsen，谢谢，你是对的，我在方法选项中犯了一个错误，但我决定简化路由选项，但调试器仍然无法进入两个处理程序:

      it("Submitted data", () => {
        cy.server({ whitelist: (xhr) => console.log('custome log: server', xhr) });
        submitBtn().click({force: true});

        cy.route({
          url: /.+/,
          onResponse: (data) => {
            debugger;
            cy.log('onResponse signature value - ' + data);
          },
          onAnyResponse: (data) => {
            debugger;
            cy.log('onAnyResponse signature value - ' + data);
          },
          onRequest: (data) => {
            debugger;
            cy.log('onRequest signature value - ' + data);
          },
          onAnyRequest: (data) => {
            debugger;
            cy.log('onAnyRequest signature value - ' + data);
          }
        })
      })

还尝试在 cy.route 之后立即单击提交 btn，但效果不佳。感谢您的帮助!

Answer 1

使用cy.route()的模式是

• cy.route(url)
• cy.route(url, response)
• cy.route(方法, url)
• cy.route(方法，url，响应)
• cy.route(callbackFn)
• cy.route(选项)

看起来您的命令被解释为 #4，但 response 是用于 stub 的值。从未见过它的功能，所以是最好的猜测。

可以肯定的是，使用 pattern with options并将函数放入 onResponse

cy.route({
  method: 'PUT', 
  url: `${APP_CONTEXT}/api/model/${modelId}`, 
  onResponse: (data) => {
    expect(parsedData.inputData).to.eq('123');
  }
})

同时 onAnyRequesty: (props) => 更改为 onAnyRequest: (props) =>。

---

在您最新的代码中，

onAnyRequest: (data) => {, 

数据已被解析，因此 JSON.parse(data) 会导致错误。

在我的测试中，当我尝试在 onResponse() 中重新解析时，我遇到了一个关于跨源的奇怪错误(预期会出现类似“位置 1 的 JSON 中的意外标记 o”的消息)。

无论如何，将调试器放在一行以避免其他代码问题。

---

如果 cy.route() 与 url 不匹配，您可以看到所有带有(临时)的调用

cy.server({ whitelist: (xhr) => console.log('server', xhr) }). 

也许是 APP_CONTEXT !== BASE_URL？

---

提交可以是不会被 Cypress 捕获的原生事件。

我想你可以测试一下，看Submit a POST form in Cypress and navigate to the resulting page .

如果您执行以下操作而不是 submitBtn().click({force: true}) 并且 cy.route() 确实接收到它，那么您有本地事件。

cy.visit({
  url: `${BASE_URL}/api/data/${formId}/${modelId}`,
  method: "PUT",
  form: true,
  body: {
    inputData :"123"
  }
});