Cypress: Disable flag options for fake camera UI

Created on 25 Apr 2019  路  10Comments  路  Source: cypress-io/cypress

Current behavior:

Hi I have been writing some tests to verify ID verification process during a specific user journey. There are 2 parts to this process - 1. is it to upload a file for example passport and 2. is to capture/upload a selfie image. The problem i am encountering with cypress is that it switches ON the fake camera by default and i am struggling to upload an image or to send out a video file(which I dont want to do) I just want to basically skip this fake camera input and use the upload function. Is there any way I can do this by passing something like "--disable--fake-video-capture". If you need any more info let me know.

Desired behavior:

I can see that its been passed as flag to chrome from this script
https://github.com/cypress-io/cypress/blob/develop/packages/server/lib/browsers/chrome.coffee#L21

But how/where can I comment out this line in order for me to be able to not use the fake camera ui?

Versions

Cypress Version - 3.2.0
OS: Windows 10
Browser: Chrome

My previous conversation is under this link

https://github.com/cypress-io/cypress/issues/2704

question

Most helpful comment

You can add and remove arbitrary browser flags by using the Plugin API and writing plugin code that removes them. Put something like this in your cypress/plugins/index.js:

module.exports = (on, config) => {
  on('before:browser:launch', (browser, args) => {
    // now `args` is a list of all the arguments that will be passed to Chrome when it launchers
    args = args.filter((arg) => {
      return arg !== "--use-fake-ui-for-media-stream" && arg !== "--use-fake-device-for-media-stream"
    })
    args.push('--allow-file-access-from-files')
    return args
  })
}

All 10 comments

or atleast you can enable this flag which will allow me to upload files
--allow-file-access-from-files allows getUserMedia() to be called from file:// URLs. as per 2704

You can add and remove arbitrary browser flags by using the Plugin API and writing plugin code that removes them. Put something like this in your cypress/plugins/index.js:

module.exports = (on, config) => {
  on('before:browser:launch', (browser, args) => {
    // now `args` is a list of all the arguments that will be passed to Chrome when it launchers
    args = args.filter((arg) => {
      return arg !== "--use-fake-ui-for-media-stream" && arg !== "--use-fake-device-for-media-stream"
    })
    args.push('--allow-file-access-from-files')
    return args
  })
}

@flotwig Awesome! Thanks so much. I have been struggling to do this for a while now and your solution blowed all my things away in a jiffy. Once again thanks so much and sorry for nagging a lot about this issue. @jennifer-shehane This has now been resolved so please ignore my previous comments in #2704. Hats off to cypress.io team :) for your speedy response.

Happy with your solution @flotwig so closing this ticket

@flotwig @jennifer-shehane Sorry to re-open this case but i have a question. When i run my spec using electron as a browser - I get an error saying "args.filter" isnt applicable to electron. How do I handle it for that specific browser. Would be good to solve this problem?
Thanks
Krish

Electron is a little weirder, we pass you the BrowserWindow initialization options to modify instead of an array of arguments.

You should be able to do something like to support both chrome and electron:

This will only work for Chrome:

function getCliArgs(args) {
  args = args.filter((arg) => {
    return arg !== "--use-fake-ui-for-media-stream" && arg !== "--use-fake-device-for-media-stream"
  })
  args.push('--allow-file-access-from-files')
  return args
}

module.exports = (on, config) => {
  on('before:browser:launch', (browser, args) => {
    if (browser.family === 'chromium' && browser.name !== 'electron') {
      // `args` is a list of all the arguments that will be passed to Chrome when it launchers
      return getCliArgs(args)
    }
  })
}

@flotwig I tried this method but for some reason when I looked at the recorded video it invoked the fake camera eventhoug we said it to use !== Not sure why?

@flotwig I'm still trying to get cypress to recognize my launch options and use my fake video in electron
Using Cypress 4.0.2

function getCliArgs(args) {
  args.push('--use-fake-ui-for-media-stream')
  args.push('--use-fake-device-for-media-stream')
  args.push('--use-file-for-fake-video-capture=cypress/fixtures/face.y4m')
  return args
}

if (browser.name === 'electron') {
      if (!launchOptions.preferences.webPreferences.additionalArguments) {
        launchOptions.preferences.webPreferences.additionalArguments = []
      }
      launchOptions.preferences.webPreferences.additionalArguments = getCliArgs(
        launchOptions.preferences.webPreferences.additionalArguments
      )
      return launchOptions
}

Adding the additionalArguments array w/ those arguments didn't seem to work.

@nbedell Apologies, I did not test that example. additionalArguments will not do what you need here. I am not sure if this is currently possible with Electron, you may need to use Chrome or Chromium instead.

Unfortunately we have to close this issue due to inactivity. Please comment if there is new information to provide concerning the original issue and we can reopen.

Was this page helpful?
0 / 5 - 0 ratings