拦截真实数据响应答案

【问题标题】：Intercepting a real data response拦截真实数据响应
【发布时间】：2020-12-05 10:24:17
【问题描述】：

我在 Cypress 6 中遇到数据存根问题。我正在尝试实现从服务器到自定义数据的真实数据交换。我阅读了文档并得出结论

describe("test", () => {
  it("intercept", () => {
    cy.intercept("http://localhost:3000/spoons", (req) => {
      req.reply((res) => {
        let { body } = res;
        body.newProperty = "new";
        console.log(res.body);
        return body;
      });
    });
  });
});

将是解决方案，但是...网络中的请求 http://localhost:3000/spoons 的正文返回给我

{
  "sizes": [
    "huge",
    "small"
  ],
  "colors": [
    "yello",
    "brown"
  ],
  "build": {
    "back": true,
    "front": true
  }
}

但是在 console.log 中显示 res.body 有什么，它得到一个 空的 console.log，就好像它没有任何 res.body 一样。

编辑#1 关于内部“服务器”，我用一个网站制作了一个简单的快速服务器，该网站使获取请求可以在“网络”中轻松获得另一个请求。它只是作为训练intercept 和其他东西的战场。这个/spoons有唯一的端点

server.js

const express = require("express");
const app = express();
const port = 3000;
const path = require("path");

const obj = {
  sizes: ["huge", "small"],
  colors: ["yello", "brown"],
  build: {
    back: true,
    front: true,
  },
};

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname + "/index.html"));
});

app.get("/spoons", (req, res) => {
  res.json(obj);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    console.log(fetch("http://localhost:3000/spoons"));
  </script>
</html>

【问题讨论】：

标签： javascript automated-tests cypress

【解决方案1】：

它适用于拦截外部网络请求，

/// <reference types="@cypress/fiddle" />

const test = {
  html: `
    <script>
      fetch('https://jsonplaceholder.typicode.com/todos/1')
    </script>
  `,
  test: `
  cy.intercept('https://jsonplaceholder.typicode.com/todos/1', req => {
    req.reply((res) => {
      let { body } = res;
      body.newProperty = "new";
      console.log(res.body);
      return body;
    });
  })
  `
}
it('test', () => {
  cy.runExample(test)
})

此日志

{
  completed: false,
  id: 1,
  newProperty: "new",           // added by intercept
  title: "delectus aut autem",
  userId: 1
}

您能否更详细地解释一下 api 服务器和客户端端口？

我设置了你的服务器，发现它工作正常。

我唯一更改的是在服务器响应中添加 no-store 标头（阻止浏览器看到状态代码“304”）。

没有它，赛普拉斯测试cy.intercept() 的每秒刷新一次都不会触发。通过将完整的路由匹配器添加到 cy.intercept() 而不仅仅是 url，这实际上可以在测试中修复。

app.use((req, res, next) => {
  res.set('Cache-Control', 'no-store')
  next()
})

app.get("/", (req, res) => {...

我还把app中的脚本修改为.then()中的console.log，不然你就拿到promise对象了。

<script>
  fetch('http://localhost:3000/spoons')
    .then(res => res.json())
    .then(res => console.log('app', res))
</script>

这是我使用的规范。

it('test', () => {
  cy.intercept('http://localhost:3000/spoons', req => {
    req.reply((res) => {
      let { body } = res;
      body.newProperty = "new";
      console.log('intercept', res.body);
      return body;
    });
  })
  cy.visit('../app/intercept-mod-response-local-server-2.html')
})

【讨论】：

已编辑以包含服务器信息，但很高兴知道它仅适用于“外部”端点：/
我用你的服务器试了一下，发现结果到处都是。有时身体有价值，有时没有，有时拦截甚至没有捕捉到。
好的，在 Cypress.fiddle 中运行时它很不稳定，但每次切换到 html 文件都可以正常工作。