Hey, i am trying to load an image file with the following code:

ts
  cy.fixture('test-image-1.png')
    .then((_) => (console.log('image 1?', _), _))
    .as('productTestImage1');
  cy.fixture('test-image-2.png').as('productTestImage2');

  cy.wait(['@productTestImage1', '@productTestImage2']).then((imageFiles) => {
    console.log('[[ fixture loaded? ]] /imageFiles:', imageFiles);
    forAPI.images = imageFiles;
  });

The file structure - which looks fine to me - is as on attached screenshot and yet Cypress throws an error that it's not able to locate the image file and logs don't show up. What could be the reason?

Hi, have u tried by changing the name of the files to testImage1.png?

Yes. Even

test.png

doesn't work. I have a suspicion that it has to do something with my Cypress being launched from inside the Docker

Try this . I had some issues as well. Made a video about a by the book way and a quick and dirty way. Hope it helps

Well, i have a different (and i guess more severe) issue, because my Cypress is not able to find a file with given path (although it seems correct to me) - i don't have a problem with actually reading what

cy.fixture()

yields - even my

console.log

inside

cy.fixture( .. ).then()

is not called, because the promise-alike yielded by Cypress apparently doesn't get resolve due to the not found file

When i first used fixtures I had the same issue you describe. But it got fixed by following the steps from the video. I will copy your code and give it a try on my end.

js
              cy.fixture(gameImage).then((image) => {
                const formData = new FormData();
                const fileName = gameNames[index] + ".jpg";
                const blob = Cypress.Blob.base64StringToBlob(
                  image,
                  "image/jpg"
                );
                formData.append("file", blob, fileName);
                imageUploadReq(formData).then((response) => {
                  const bodyString = Cypress.Blob.arrayBufferToBinaryString(
                    response.body
                  );

Here is part of my code implementation of uploading images with cy.fixture, imageUploadReq is just a function that sends the request after image upload

I have image uploading lessons using

cy.request

and forms in my (paid) course https://cypress.tips/courses/network-testing

Folks, thank you for replies, but i don't have a problem with uploading an image in the app per se. I have a problem with

cy.fixture()

function not being able to find images (it doesn't even call

.then()

where my test logs are), despite the fact i am sure they are in the correct location. Moreover, i am able to workaround it with custom plugin function, where i use Node's

fs.readFileSync()

to manually read these image files. So it's something about

cy.fixture()

having problem with locating the images paths. So it's not that i can't share loaded images between tests (like the issue with

this

context) or i can't upload them via HTTP - the issue is with loading a fixture by Cypress built-in command 🙂