Firefox - Issue with 'media.navigator.streams.fake' in Test Runner

[cmue]

Current behaviour

When using Firefox with media.navigator.streams.fake the fake camera device can not be detected by the page under test within the test runner.
However, if visiting the page under test outside the test runner (new tab) the fake camera is detected by the page under test.

Desired behaviour

Like Chrome/Electron, fake camera is detected within the test runner, so it can be tested.

Test code to reproduce

index.js

  on('before:browser:launch', (browser = {}, launchOptions) => {
    if (browser.name === 'chrome') {
      launchOptions.args.push('--disable-dev-shm-usage');
      return launchOptions;
    }
    if (browser.family === 'firefox') {
      launchOptions.preferences['media.navigator.streams.fake'] = true;
      return launchOptions;
    }
  });

camera-recording.spec.js

context('Cypress', function () {
  beforeEach(function () {
    // These are not real credentials.
    // Please sign up (for free) at www.vidyard.com, verify your email address, then update these accordingly.

    const email = 'fake@qa.com';
    const password = 'Password123!';

    cy.visit('https://secure.vidyard.com/user/sign_in');
    cy.get('#username').type(email);
    cy.get('#password').type(password);
    cy.get('#sign-in').click();
    cy.wait(5000); // Just to make sure the page is fully loaded.
  });

  it('Start Camera Recording', function () {
    cy.get('.actionbar').within(() => {
      cy.get('*[id*="menu-button-"]')
        .should('be.visible')
        .and('have.text', '   \n          New\n           ')
        .click();
      cy.get('[aria-label="Record Video"]')
        .should('be.visible')
        .click();
    });
    cy.get('#media-recorder-dialog')
      .should('be.visible');
    cy.get('#recording__start-recording')
      .should('be.visible')
      .and('have.text', '   \n      Start Recording\n     ')
      .click();
  });
});

Versions

Cypress 5.1.0 & 5.3.0 with Firefox 81 on Windows 10

[jennifer-shehane]

I'm getting the same error screen within Chrome with the code provided. Did you provide the code to also have this pass in Chrome? It'd be helpful to see a passing test case to compare Firefox to since I'm not familiar with the application itself.

[cmue]

My apologies @jennifer-shehane , I was able to reproduce the issue you observed in Chrome as well, with my provided example. I was able to remedy camera recording in Chrome by using the following to the cypress.json.

{
  "baseUrl": "https://secure.vidyard.com",
  "viewportHeight": 768,
  "viewportWidth": 1366
}

Alternatively, you could just use {} in the file.
I still am unable to get Firefox camera recording working with this configuration.

[mateatslc]

I'm running into the same problem on FF. I found that even without setting the media.navigator.streams.fake flag through the before:browser:launch hook, FF can see and use the fake video device. The problem is that the device is only present in the top-level frame and not in the app frame, so my app-under-test has no chance either.

My quick test was: open test runner, pop-up dev tools and use this snippet to see what video devices are there in different frames in each browser.

(async () => {
	const devices = await navigator.mediaDevices.enumerateDevices();
	console.table(devices.filter((device) => device.kind === 'videoinput'));
})();

Chromium has no problem accessing the fake camera no matter the frame, Firefox reports no devices in the app frame though.

[mateatslc]

I managed to work around this for now, picked up the hint reading through this article. Followed up with this.

To set the allow attribute on the app-under-test's frame, I ended up with this eventually:

beforeEach(() => {
  cy.on('window:load', (win) => {
    win.parent.document
      .querySelector('.aut-iframe')	// this selector is rather empirical
      .setAttribute('allow', 'camera;microphone');
  });
});

Use at your own peril 👋

[EtienneBruines]

This seems to also be needed starting Firefox 92, which includes some fixes in how they handle permissions.

See also Feature Policy iframe allow

[EtienneBruines]

@mateatslc Thank you for your workaround!

I'm hoping we can set this allow attribute in Cypress by default; that PR should then fix the issue for everyone.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[todd-m-kemp]

This issue is still reproducible in Cypress 12.8.1 in Firefox 110 on macOS 13.3.1 without the provided workaround.

[chrisbreiding]

I have replicated this issue in the latest version of Cypress and will forward this ticket to the appropriate team. They will evaluate the priority of this ticket and consider their capacity to pick it up. Please note that this does not guarantee that this issue will be resolved.