Многочастный запрос POST форматы данных просто не работает в Cypress для меня - PullRequest
Новая
       32

Многочастный запрос POST форматы данных просто не работает в Cypress для меня

0 голосов
/ 01 марта 2019

У меня ничего не работает.Если я использую cy.request (), я не смогу отправить вместе с ним форм-данные, содержащие текст и изображение.Так что я должен идти по маршруту XHR.Итак, в моем command.js я использовал следующий код для создания команды: - 

Cypress.Commands.add("formrequest", (method, url, formData, done) => {
  cy.window().then(win => {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open(method, url, false);
      xhr.setRequestHeader("accept", "application/json");
      xhr.setRequestHeader("access-token", accesstoken);
      xhr.setRequestHeader("client", client);
      xhr.setRequestHeader("expiry", expiry);
      xhr.setRequestHeader("token-type", tokentype);
      xhr.setRequestHeader("uid", uid);
      xhr.setRequestHeader("Accept-Encoding", null);
      xhr.onload = function() {
        done(xhr);
      };
      xhr.onerror = function() {
        done(xhr);
      };
      xhr.send(formData);
    });
  });
});

Теперь, когда я вызываю ее, я сначала создаю BLOB, а затем использую ее в моих данных формы.чтобы позже отправить запрос XHR.Например: - 

it.only("Test XHR", () => {
    cy.AppLogin();
    cy.fixture("/images/clients/Golden JPEG.jpeg", "binary").then(imageBin => {
      // File in binary format gets converted to blob so it can be sent as Form data
      Cypress.Blob.binaryStringToBlob(imageBin, "image/jpeg").then(blob => {
        // Build up the form
        const formData = new FormData();

        formData.set("client[name]", "Test TER"); //adding a plain input to the form

        formData.set(
          "client[client_logo_attributes][content]",
          blob
          //"Bull Client.jpg"
        ); //adding a file to the form

        // Perform the request
        cy.formrequest(method, url, formData, function(response) {
          expect(response.status).to.eq(201);
        });
      });
    });
  });

Обратите внимание, что cy.AppLogin () устанавливает заголовки запроса, такие как accesstoken, client, expiry, tokentype и uid.

Пожалуйста, обратитесь к приложенному файлу (XHRfromCypress.txt) для проверки генерируемого XHR-запроса с использованием приведенного выше кода.Также прикреплен файл (XHRfromCypressUI.txt), показывающий запрос XHR, который был сделан, когда я запускал свой тест кипариса end-2-end из пользовательского интерфейса приложения.

Я постоянно получаю 405. Ошибка метода не разрешена.

Тест E2E от UI

enter image description here

Тест API

enter image description here

Тест E2E работает, но тест API с использованием приведенного выше кода просто не работает.Я также попробовал cy.request (), но так как он не отображается на вкладке разработчиков, я не уверен, что сделал это правильно.Кроме того, я сомневаюсь, как я использовал там формданные.Означает, что cy.request () может даже принимать dormdata.

Я экспортировал XHR (E2E и API), на всякий случай, если они необходимы.

Нужно ли добавлять какие-либо библиотеки для выполнения запроса XHR?Я только что добавил библиотеку Cypress в настройку своего проекта.

////////////////

Перемещение всего кода в Test Case не исправляет ничего 

it.only("POSTing", () => {
    cy.fixture("/images/clients/Golden JPEG.jpeg", "binary").then(imageBin => {
      Cypress.Blob.binaryStringToBlob(imageBin, "image/jpeg").then(blob => {
        data.set("client[name]", "Test TER fails");
        data.set("client[client_logo_attributes][content]", blob);
        xhr.open(method, url);
        xhr.setRequestHeader("accept", "application/json");
        xhr.setRequestHeader("access-token", accesstoken);
        xhr.setRequestHeader("client", client);
        xhr.setRequestHeader("expiry", expiry);
        xhr.setRequestHeader("token-type", tokentype);
        xhr.setRequestHeader("uid", uid);
        xhr.send(data);
      });
    });
  });

1 Ответ

0 голосов
/ 05 марта 2019

Спасибо, Эрик.Это работает для меня, следуя советам и инструкциям Эрика, упомянутым на github.com/javieraviles/cypress-upload-file-post-form

Cypress.Commands.add(
  "Post_Clients",
  (imagePath, imageType, attr1, attr2, attr1Val, done) => {
    cy.fixture(imagePath, "binary").then(imageBin => {
      Cypress.Blob.binaryStringToBlob(imageBin, imageType).then(blob => {
        const xhr = new XMLHttpRequest();
        xhr.withCredentials = true;
        const data = new FormData();
        data.set(attr1, attr1Val);
        data.set(attr2, blob);
        xhr.open("POST", "https://api.teamapp.myhelpling.com/admin/clients");
        xhr.setRequestHeader("accept", "application/json");
        xhr.setRequestHeader("access-token", accesstoken);
        xhr.setRequestHeader("client", client);
        xhr.setRequestHeader("expiry", expiry);
        xhr.setRequestHeader("token-type", tokentype);
        xhr.setRequestHeader("uid", uid);
        xhr.onload = function() {
          done(xhr);
        };
        xhr.onerror = function() {
          done(xhr);
        };
        xhr.send(data);
      });
    });
  }
);


it.only("API POSTing TEST", () => {
    cy.Post_Clients(
      "/images/clients/Golden JPEG.jpeg",
      "image/jpeg",
      "client[name]",
      "client[client_logo_attributes][content]",
      "Test Attr 1 Value is Hi!!!",
      response => {
        cy.writeFile(
          "cypress/fixtures/POST API OUTPUT DATA/Client.json",
          response.
        );
        expect(response.status).to.eq(201);
      }
    );
  });
...