How to intercept video file in Cypress?

Question

I'm trying to mock static video with cy.intercept

cy.intercept('/video.webm', { fixture: 'videos/video.webm' });

And that doesn't seems to work, it still return actual video instead of fixture one. I Also tried specify encoding binary and null like that

cy.intercept('/video.webm', { fixture: 'videos/video.webm,null' });
cy.intercept('/video.webm', { fixture: 'videos/video.webm,binary' });

But null gives me an error - The value "null" is invalid for option "encoding"

And with binary it seems that it returns an empty black video

So what am I doing wrong?

Answer 1

I can't fault it, this example works - plays the bunny vid which I have in cypress/fixtures .

Best guess is you have the wrong fixture path.

cy.visit('https://www.webmfiles.org/demo-files/');

cy.intercept('/elephants-dream.webm', { fixture: 'big-buck-bunny_trailer.webm,null' })
cy.get('a[href="https://dl8.webmfiles.org/elephants-dream.webm"]')
  .click()

Answer 2

So I figured it out, do not know why but this works for me.

cy.intercept('/video.webm', (req) => {
    req.continue((res) => {
        res.send({ fixture:'videos/video.webm' });
    });
});

PS: Also this answer from @TesterDick actually works https://stackoverflow.com/a/73887996/12937539 . But when I use video as source in the video tag and not in the link this not working. Maybe video tag with source the case