Testing images with Cypress

Today we'll write a test that asserts an image was correctly uploaded and displayed using Cypress.
isFixtureImage command: gist.github.co...

[@rongreen3648]

Well done. Nice clear progression from defining the problem to presenting and refining the solution. Thank you!

[@danielmondragon2476]

Thank you so much for this. Nice way to explain it. I think that the assertion "be.visible" is still necessary because the image could have an opacity: 0 bug.

[@RafalPe]

Nice & clear path to writing this test!

[@fKH6599]

Imagine we have a pdf file and we want to verify the logos, checkboxes, text inside this pdf. What should we do. I know how to verify text but dont know how compare or verify img and checkbox inside the pdg.

[@prashanthipurnimasriram4183]

Hi sir, Can you please suggest to me any snapshotting tool for both cypress e2e and component testing? Thanks🙏

[@jyothiprasad5473]

Thanks for you video, I am getting error "cy.then() timed out after waiting 10000ms. Your callback function returned a promise that never resolved." I am trying to fix this but still can't get solution, can you help on this please

[@githinjibonface8486]

Nice tutorial for testing images in ecommerce

[@RyanToronto]

Thanks!

[@KevinOld]

Great video, Ryan!

[@randomgrinn]

You are lucky to live in the fantasy world where all your HTML has been re-written to use "data-*' tags. Back here in the real world of existing 10 year old code, I have spent 2 hours just trying to emulate your first cy.get("data-test=image") statement and am more than a bit frustrated.

[@RyanToronto]

Sorry about that! Check out this page from Cypress about using test selectors that begin with data-*: docs.cypress.io/guides/references/best-practices#Selecting-Elements

[@sindran126]

If my expected screenshot is dynamic in actual manner (e.g):date and time how I could compare

[@techfth710]

super cypress knowedge i appreciate it

[@dasabaja]

Hi. You're passing img as an array? .should([img]). In all other examples arguments in .should() or .then() are objects, not arrays. Example .should((img) = >{}) What is the difference? If I don't pass an array your example won't work. Why is that?

[@RyanToronto]

The syntax `.should(([img]) => ...)` is called argument destructing, it lets you take an array argument and assign its first element to a variable named "img". When you do ([first]) => console.log(first), it the same as doing: (array) => { let first = array[0]; console.log(first); } Destructing is an awesome feature of JavaScript, you can learn more about it here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

[@StephenRayner]

Decent more! ❤

[@lannguyen7460]

😘

[@camelion14]

thanks for this greate work , what's your cypress version ? cause the methode that you're using [img] get me an error : Invalid attempt to destructure non-iterable instance

[@RyanToronto]

Hey there! I believe this video was made with Cypress 9.3.1. What's the value of the argument passed to the function? I'd double check that and make sure it's not null or anything that would prevent destructuring.

[@camelion14]

@@RyanToronto I think this is due to cypress version, I'm still in the 6.7.0. Thanks man for your reply