#image #upload #cypress
Вопрос:
Я пробовал различные способы заставить Cypress с помощью attachFile() перетаскивать или прикреплять изображение или видеофайл. Как вы можете видеть на прикрепленном изображении сбоя Cypress, оно не загружает изображение в модальное поле, кнопка «Добавить» остается отключенной, и тест завершается неудачно.
#1
Cypress.Commands.add('uploadMedia', (mediaType) =gt; { cy.wait(2000) const fileName = 'Cover.jpg' cy.fixture('Cover.jpg').then(Cypress.Blob.base64StringToBlob) .then((fileContent) =gt; { cy.get(newStoryPage.getDragAndDropFiles()).attachFile( { fileContent, fileName, mimeType: 'image/jpg'}, {subjectType: 'drag-n-drop' }) }) #2 Я тоже пробовал это:
cy.fixture('Cover.jpg').then(jpg =gt; { const files = [ { fileName: 'Cover.jpg', fileContent: jpg, mimeType: 'image/jpg' } ] newStoryPage.getDragAndDropFiles().attachFile(files, {subjectType: 'drag-n-drop', events: ['dragenter', 'drop'] }) }) #3 И попробовал это:
Cypress.Commands.add('dropFile', {prevSubject: false}, (fileName) =gt; { Cypress.log({name: 'dropFile'}) return cy.fixture(fileName, 'base64').then(Cypress.Blob.base64StringToBlob).then((blob) =gt; { return cy.window().then((win) =gt; { const file = new win.File([blob], fileName) const dataTransfer = new win.DataTransfer() dataTransfer.items.add(file) return cy.document().trigger('drop', {dataTransfer}) }) }) } ) Возврат
возврат функции получения области перетаскивания пользовательского интерфейса:
class NewStoryPage getDragAndDropFiles() { return cy.get("div[class*='upload-file-ui']")} Этот класс использует функцию #3 для ее запуска:
import NewStoryPage from '../../support/pageobjects/NewStoryPage' const newStoryPage = new NewStoryPage() class Create { uploadImage() { newStoryPage.getDragAndDropFiles().trigger('dragenter') cy.dropFile('Cover.jpg') newStoryPage.getAddButton().click() } } export default Create html-часть:
lt;div class="jsx-3861824103 upload-file-ui"gt; lt;span class="jsx-3993537252 icon"gt; lt;svg viewBox="0 0 32 32" class="jsx-3993537252"gt; lt;path d="M31.8 16.704c0 3.489-2.765 6.296-5.238 6.296H24v-1h2.562c1.92 0 4.238-2.362 4.238-5.296a5.359 5.359 0 0 0-3.607-5.097l-.407-.138-.581-.198-.087-.608-.06-.425A7.953 7.953 0 0 0 18.462 3.2a7.647 7.647 0 0 0-6.683 4.187l-.259.488-.37.696-.763-.197-.535-.138a3.474 3.474 0 0 0-.874-.13 2.943 2.943 0 0 0-3.024 2.766l-.022.404-.031.573-.51.262-.357.183A5.173 5.173 0 0 0 2.2 16.897c0 2.653 2.166 5.085 4.545 5.103H11v1H6.737C3.733 22.978 1.2 19.988 1.2 16.897a6.169 6.169 0 0 1 3.378-5.493l.357-.183.022-.402a3.93 3.93 0 0 1 4.022-3.713 4.432 4.432 0 0 1 1.125.162l.534.138.26-.488A8.645 8.645 0 0 1 18.462 2.2a8.956 8.956 0 0 1 8.584 7.897l.06.425.408.138a6.358 6.358 0 0 1 4.285 6.044zM18 14.707l2.646 2.646.707-.707-3.853-3.853-3.854 3.854.707.707L17 14.707V30h1z" class="jsx-3993537252"gt; lt;/pathgt; lt;/svggt; lt;/spangt; lt;div class="jsx-3861824103 upload-section"gt; lt;p class="jsx-3861824103 upload-title"gt;Drag and drop a file herelt;/pgt; lt;div class="jsx-3861824103 upload-description"gt;Only include media in your story that you have permission to use and will not violate copyright laws if published.lt;span class="jsx-3861824103"gt;amp;nbsp;lt;/spangt; lt;a rel="noopener noreferrer" target="_blank" class="jsx-181317841" href="https://doc.arcgis.com/en/arcgis-online/reference/terms-of-use.htm"gt; lt;span class="jsx-181317841"gt;Learn morelt;/spangt; lt;/agt; lt;/divgt; lt;/divgt; lt;button type="button" class="jsx-4157471165 button default primary"gt;Browse your fileslt;/buttongt; lt;p class="jsx-3861824103 upload-types"gt;Supported file types: .jpg, .png, .gif, .svglt;/pgt; lt;/divgt; 
Как вы можете видеть, я использовал различные способы, пытаясь добавить изображение; но, к сожалению, я просто не могу загрузить его. Любые мысли очень ценятся. Спасибо
Ответ №1:
Хорошо, значит, я смог ее решить. Я усложнял свои функции намного больше, чем требовалось. Все, что мне было нужно, это следующее:
newStoryPage.getDragAndDropFiles().attachFile('image.jpg', { subjectType: 'drag-n-drop', events: ['dragenter', 'drop'] }) Вот оно что! Усвоенные уроки, не усложняйте все слишком сильно! Я надеюсь, что это поможет всем, кто застрял с «attachFile ()».