How to use Cypress with encrypted streaming?

I won’t waste your time by explaining why Cypress is an amazing framework, and why you should have automated E2E tests. If you are here, it is because you already know all of this.

The issue

We decided to adopt Cypress to build an automated test suite to avoid regressions, increase the developer’s confidence, and maintain a stable codebase. After a few tests, we hit a stumbling block.

We weren’t able to test our players and our content because our clients use DRM content (CypressGitHub issue).

Browsers use External Components like “Widevine Content Decryption Module” to resolve DRM content. In Cypress, however, all the browser external components are disabled.

This will cause an exception in the Players while it’s resolving the content.

As you can imagine, for a streaming app it is crucial to be able to test the players and their logic, and this put us in front of a tough decision, give up on Cypress and automated tests, or find a solution!

How do we handle that?

After hours of crazy research and days of frustration, we came up with a simple question:

Do we really need it?

In our tests, we usually stream video content in order to check some business logic or to assert that the player is acting as intended. (We are not testing the actual encoding of the content or similar).

Then we faced the ugly/beautiful truth. No, you don’t need a DRM content to test that!

When we came to this mind blowing conclusion, we decided to mock the service that returns all the streaming information.

We created a JSON file to mock the streaming information that will use a clear content “Big Buck Bunny: the Dark Truths”

cypress/mock/streamingInfo.json

And stub the service that returns the streaming information in our tests:

And voilà, you are ready to stream 🍿

Note: Our projects are using Cypress v3.2.2, at the time of writing.