Ability to capture video without test runner sidebar (command log)

[drFabio]

Current behavior:

Currently the video recordings take the side bar, it is already possible to do screenshots without a sidebar since 3.0.0. I would propose allowing the same for video

Desired behavior:

Have an option to capture the video without the sidebar to use the automated tests to create tutorials and guides easily that would be always up to date with the latest UI.

Versions

[MCTaylor17]

Funny, I just wrote an article about using Cypress for creating human friendly videos: https://www.linkedin.com/pulse/creating-hyper-realistic-ux-simulations-using-cypressio-taylor/

I didn't actually see this issue before writing that so it's nice to see I'm not alone in my thinking. I did come across issue #181 where Brian suggested:

If we did this for video it would kind of take away the entire point of knowing why your tests failed.

From a test automation perspective, I fully agree. Those videos are currently designed for investigating why your passing development build failed in production.

With that said, I think using Cypress to generate tutorials and other useful artifacts is a very compelling use case. Despite some glaring flaws easily fixed with with time and coffee, I think my first attempt at creating a "UX simulations" worked out quite well:

In my ideal world, the commands for scripting tests and simulations would be the same, with environment variables or config files controlling the speed of those commands.

[eiswind]

I see this the same way. Having an option to record only the app, would give us the possibility to automate ui demos, screencasts, tutorials etc. This would be really cool stuff.

[Tenmak]

I've been inspiring myself from this comment #181 (comment) and came up with a simple workaround :

My environment (I haven't tested for other versions) :
Cypress: 3.6.1
Electron 73

Cypress.Commands.add('clearViewport', () => {
  // Collapse Cypress commands panel
  const runnerContainer = window.parent.document.getElementsByClassName('runner container')[0];
  runnerContainer.setAttribute('style', 'left: 0;');
  // Resize iframe container
  const sizeContainer = window.parent.document.getElementsByClassName('size-container')[0];
  sizeContainer.setAttribute('style', '');
});

First part collapses the Cypress command panel, and the second one cleans up the styles set in the iframe container to make it fullscreen inside the window.

Beware : Any window resize after this will set the styles of the runnerContainer back, making the display not UI friendly at all. My advice would be to not touch it at all until this issue is properly resolved.

With that said, I think using Cypress to generate tutorials and other useful artifacts is a very compelling use case. Despite some glaring flaws easily fixed with with time and coffee, I think my first attempt at creating a "UX simulations" worked out quite well:

I'm actually using this for this exact purpose. I'm for now using env variables to show or collapse the viewport accordingly.

EDIT : Also, it would be good to update the title of this issue by using the Cypress technical terms such as "command panel". I had a bit of a struggle to find it.

[MCTaylor17]

@Tenmak you are an internet god!! I never even considered accessing the parent window. I've been looking for a reason to revisit this. I'll have to dust off the old prototype and put it to productive use :)

[jennifer-shehane]

So, the above workaround #2970 (comment) does not work in the Cypress 4+ It just resizes the iframe to some arbitrary size and still shows Command Log.

I'm not sure what changed, but likely something from the Firefox PR #1359

Needless to say, this is pretty hacky and may cause unintended consequences and could certainly break in newer releases (as it already has).

[AlexA-1976]

Can somebody please add this capability?

[cmfcmf]

The following command works in Cypress 4.7.0:

Cypress.Commands.add("clearViewport", () => {
  const runnerContainer = window.parent.document.getElementsByClassName(
    "iframes-container"
  )[0];
  runnerContainer.setAttribute(
    "style",
    "left: 0; top: 0; width: 100%; height: 100%;"
  );

  const sizeContainer = window.parent.document.getElementsByClassName(
    "size-container"
  )[0];
  sizeContainer.setAttribute("style", "");

  const sidebar = window.parent.document.getElementsByClassName(
    "reporter-wrap"
  )[0];
  sidebar.setAttribute("style", "opacity: 0");

  const header = window.parent.document.querySelector(
    ".runner.container header"
  );
  header.setAttribute("style", "opacity: 0");
});

[bahmutov]

Thank you @cmfcmf - I am using your snippet in http://github.com/bahmutov/cypress-movie to successfully hide the command log and generate high-resolution movies and screenshots from tests

[flotwig]

The command log can also be disabled via CYPRESS_NO_COMMAND_LOG: https://docs.cypress.io/guides/references/troubleshooting#Disable-the-Command-Log

[flotwig]

Closing since there are ways to do this now, including @cmfcmf's approach and CYPRESS_NO_COMMAND_LOG.