Блог

Главная - Вопросы по программированию - Перехват реального ответа данных

Перехват реального ответа данных

#javascript #automated-tests #cypress

#javascript #автоматизированные тесты #cypress

Вопрос:

У меня проблема с заглушкой данных в 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
  }
}

но в консоли.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>

Ответ №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’).

Без этого каждое второе обновление теста Cypress cy.intercept() не срабатывало. На самом деле это можно исправить в тесте, добавив полный сопоставитель маршрута cy.intercept() вместо просто URL.

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

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

Я также изменил сценарий в приложении на консоль.войдите в .then() систему, иначе вы просто получите объект 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')
})

Комментарии:

1. отредактировано, чтобы содержать информацию о сервере, но полезно знать, что оно работает только для «внешних» конечных точек :/

2. Я попробовал это с вашим сервером и обнаружил, что результаты повсюду. Иногда тело имеет значение, иногда нет, а в других случаях перехват даже не перехватывается.

3. Хорошо, при запуске в Cypress.fiddle это было сложно, но переключение на html-файл каждый раз работает нормально.