Cypress: disable sounds effects

[kantord]

Cypress tests interact with parts of the application where sounds effects are made. This is distracting when working with the tests locally. (i. e. yarn web cy:open or yarn web cy:run)

howler is used project-wide to implement sound effects, here's one example:

https://github.com/kantord/LibreLingo/blob/c89466d7560eb3338b95d4c2cdb7fe02d1b51af4/workspaces/web/src/media/voice.js#L1-L9

The task is to make sure that the sound effects are not played when running from Cypress. The easiest way to detect that a code is running from Cypress is using window.isCypress.

Ideally, this solution would not involve having to check in each place where sound is played. Instead, this logic should be implemented in one place, and simply re-used in all the other places. This can be done, for example, by subclassing howler, or whatever solution that seems fit!

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.93. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[DavidLuterancik]

I am looking for my first contribution and would like to try implementing a solution for this issue.

[luthrap]

I would like to participate as well.

[kantord]

@DavidLuterancik awesome, go for it!! If you have any questions, feel free to ask

@luthrap let's give this one to @DavidLuterancik. Of course if you agree to, you can cooperate/do pair programming etc :wink: Otherwise, there's some more good first issues that you can check out:/

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[spankyed]

For the love of god please mute sounds on headless tests.

[imohib]

Any progress?

[alexqem]

Also looking for solution. Working with apps with sound effects

[ucatunit]

I struggled with this as well - app I work with has forced autoplay whenever video player appears. No matter if I was running the tests in headless or through cypress dashboard. I am not familiar with howler at all, as well as maybe I am stating the obvious here, though you may pass additional launchOptions on before:browser:launch event in cypress.config.js:

on(‘before:browser:launch’, (browser = {}, launchOptions) => {
                if (browser.family === ‘chromium’) {
                    launchOptions.args.push(‘--mute-audio’)
                }

                return launchOptions
            })

the following piece of code mutes the audio completely.

list of flags: https://github.com/GoogleChrome/chrome-launcher/blob/main/docs/chrome-flags-for-tools.md

This is a bit of overkill, although worked in my case.

[kantord]

I struggled with this as well - app I work with has forced autoplay whenever video player appears. No matter if I was running the tests in headless or through cypress dashboard. I am not familiar with howler at all, as well as maybe I am stating the obvious here, though you may pass additional launchOptions on before:browser:launch event in cypress.config.js:

on(‘before:browser:launch’, (browser = {}, launchOptions) => {
                if (browser.family === ‘chromium’) {
                    launchOptions.args.push(‘--mute-audio’)
                }

                return launchOptions
            })

the following piece of code mutes the audio completely.

list of flags: https://github.com/GoogleChrome/chrome-launcher/blob/main/docs/chrome-flags-for-tools.md

This is a bit of overkill, although worked in my case.

sounds like an interesting option, I like that in this case it does not require mocking the audio or overriding app behavior. But maybe it would be nice to have a solution that works equally in all browsers :thinking: