Cypress JS и возможность загрузки и добавления изображения

Question

Итак, я работаю над загрузкой файла в Cypress.Теперь у меня проблема с добавлением изображения на страницу.Я пытаюсь загрузить / добавить изображение в соответствии со следующим:

<label for="upload-137" class="field-upload>
 <div class="layout justify-center">
  <span class="v-btn">
   <div class="v-btn__content">
    <i class="v-icon">add</i>
   </div>
  </span>
 </div>
 <input id="upload-137" name="upload" type="file" accept=".jpg,.jpeg,.png" class="file-input">
</label>

В частности, я ищу, чтобы добавить его после макета, как брат после промежутка.

Итак, моя мысль была бы:

   cy.fixture('/driver/jack.jpg', 'base64').then(fileContent => {
    const jack = cy.get('input[type="file"]').upload({
      fileContent,
      fileName: 'jack.jpg',
      mimeType: 'image/jpg'
    }, {
      subjectType: 'input'
    }, );
    cy.get('.field-upload > .layout').then(($div) => {
      function words(){
        var image = document.createElement("img");
        image.setAttribute("src", jack);
        var location = document.getElementsByClassName("layout");
        location.appendChild(image);
      }
      $div.append(words)
    })
  })

Я думал о том, чтобы использовать пакет загрузки Cypress, чтобы извлечь файл, чтобы назначить его полю ввода и загрузить.Затем получите местоположение, создайте img, установите источник, включая загруженный прибор.Затем добавьте его в местоположение (на основе имени класса).

Я получаю

TypeError: location.appendChild не является функцией

Есть ли способ добавить изображение, которое было загружено?

Answer 1

Две проблемы с кодом:

1. document в вашем тестовом коде будут относиться к document, используемому для выполнения ваших тестов, вы на самом деле хотите использовать cy.document() для получения документа тестируемого приложения (AUT)
2. document.getElementsByClassName возвращает массив HTMLElement s, поэтому вам необходимо получить первый элемент из этого массива для его использования.

Исправленный код будет выглядеть так:

cy.fixture('/driver/jack.jpg', 'base64').then(fileContent => {
  cy.get('input[type="file"]').upload({
    fileContent,
    fileName: 'jack.jpg',
    mimeType: 'image/jpg'
  }, {
    subjectType: 'input'
  }, );

  cy.document().then($document => {
    cy.get('.field-upload > .layout').then(($div) => {
      function words(){
        var image = $document.createElement("img");
        image.setAttribute("src", "path/to/jack.jpg");
        return image
      }
      $div.append(words)
    })
  })
})

Answer 2

Метод document.getElementsByClassName возвращает вам массив элементов. Где, как appendChild - это метод элемента. Следовательно, вы получаете ошибку.

Чтобы решить эту проблему, есть 2 способа,

1. Назначить ID

Назначьте идентификатор вашему HTML-элементу, который делает его уникальным, и получите этот элемент через document.getElementById . После этого вы можете добавить к нему другой элемент.

<label for="upload-137" class="field-upload>
 <div class="layout justify-center" id="layoutContainer">
  <span class="v-btn">
   <div class="v-btn__content">
    <i class="v-icon">add</i>
   </div>
  </span>
 </div>
 <input id="upload-137" name="upload" type="file" accept=".jpg,.jpeg,.png" class="file-input">
</label>

А в вашем JavaScript:

var image = document.createElement("img");
image.setAttribute("src", jack);
var location = document.getElementById("layoutContainer");
location.appendChild(image);

2. Получить элемент из массива

Если вы не хотите назначать ID, вы можете получить элемент из массива через индекс. Хотя в этом случае вы должны быть уверены, что существует только один тег HTML с классом layout.

var image = document.createElement("img");
image.setAttribute("src", jack);
var location = document.getElementsByClassName("layout")[0];
location.appendChild(image);