search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
47.07k stars 3.19k forks source link

Recording tests on the dashboard seems not to be working as expected #16884

Closed paschalidi closed 1 year ago

paschalidi commented 3 years ago

Current behavior

I am recording some of my tests on the dashboard. The end goal would be to see those tests when failing and see figure out some issues. At the moment the videos seem to be working for 5 seconds every 5 minutes. In other words most of the time it shows me the same screen screen.

Desired behavior

I would basically wanted to be able to see the video.

https://user-images.githubusercontent.com/4181674/121431853-3d812900-c97a-11eb-8237-f3788bb67e82.mp4

Versions

"cypress": "7.5.0"
jennifer-shehane commented 3 years ago

@paschalidi A frozen video like this usually indicates that the machine you are running Cypress on does not have enough resources. Do you know the CPU/memory of the machine you're running Cypress in? I would suggest increasing the resources and seeing if that resolves the issue.

paschalidi commented 3 years ago

Its basically running on gh actions. Dunno what they are using but I have used it in the past in another project and looked fine to me. Do you perhaps know where I could find that info for gh actions?!

jennifer-shehane commented 3 years ago

I believe GH Actions runs on 2CPU/7memory be default. https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#supported-runners-and-hardware-resources

Which browser are you running? Are you running --headed or --headless?

paschalidi commented 3 years ago

Hey thanks for the quick response @jennifer-shehane. I am running chrome --headed. Is headless a better alternative you think?

I have run cypress in another project headed and I am sure I could see the browser and the video pretty well. I havent heard of an option that gh would give you, where you could specify the power of you machine.

What you think would be a solution here @jennifer-shehane, you think there might be a way to control the gh action's machine type, ot how would you go about it?

jennifer-shehane commented 3 years ago

You can try to log the memory and CPU usage of Cypress by following these instructions: https://on.cypress.io/troubleshooting#Log-memory-and-CPU-usage This will help determine if Cypress is running out of resources and whether the machine requires more.

I don't see any reason to run --headed in the actions, but I also can't quite see any benefit to changing to --headless.

coltdorsey commented 3 years ago

I'm experiencing this exact issue using github-hosted runner.

I'm using Cypress version 7.6.0 and I'm passing flags browser: chrome and headless: true to cypress-io/github-action@v2 in the github workflow yml file.

I haven't found any information on how to increase github-hosted runner resources. Any help appreciated.

Update: @bahmutov recommended reducing the window size. I'm having some luck setting the window resolution to 800x600. The recorded video is obviously smaller and the command log is disproportionately large (Is there any way to programmatically change the command log size?), but the video renders a bit better.

See https://www.cypress.io/blog/2021/03/01/generate-high-resolution-videos-and-screenshots/#the-window-size-on-ci

paschalidi commented 3 years ago

Any news on this @jennifer-shehane? Still being an issue for us

paschalidi commented 3 years ago

@coltdorsey tried to reduce my screen size 

// cypress/plugins/index.js
module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    const width = 1024;
    const height = 800;
    if (browser.name === 'chrome' && browser.isHeadless) {
      launchOptions.args.push(`--window-size=${width},${height}`);

      // force screen to be non-retina and just use our given resolution
      launchOptions.args.push('--force-device-scale-factor=1');
    }

    return launchOptions;
  });
};

Reducing window size actually helps with video performance.

One other thing I did is tho reduce the in the cypress.json file

"videoCompression": 38
coltdorsey commented 3 years ago

There is a bug fix in Cypress 8.6.0 that addresses the same problem characteristics described in this issue, however I haven't yet tested if these changes mitigate this issue:

paschalidi commented 3 years ago

@coltdorsey I am running cypress 8.6.0 =)

romankhomitskyi commented 3 years ago

I have the same issue running 4 instances of cypress inside one docker container Container without restrictions, all resources are shared My server has 120 cores and 128Gb / RAM Cypress 8.6.0 Image FROM cypress/browsers:node14.17.0-chrome91-ff89 width = 1920 height = 1080;

webbertakken commented 2 years ago

I'm having the same issue with default settings on v9.2.1 on a default GitHub Actions runner.

Did anyone get this to work? If so, could you please share what ended up fixing the problem for you?

paschalidi commented 2 years ago

Nope, we didnt get any assistance here unfortunately

josh803316 commented 2 years ago

We are struggling with this as well... the videos appear so slow that they don't provide flow benefit and only show images at the end. I've tried adjusting the compression added the following to no avail:

/cypress/plugins/index.js

module.exports = (on, config) => {
  // on is used to hook into various events Cypress emits
  // config is the resolved Cypress config
  // ...
  on('before:browser:launch', (browser, launchOptions) => {
    console.log(
      'launching browser %s is headless? %s',
      browser.name,
      browser.isHeadless
    );
    const width = 1440; // could come from env variable / config
    const height = 900; // same
    console.log('setting the browser window size to %d x %d', width, height);
    if (browser.name === 'chrome' && browser.isHeadless) {
      launchOptions.args.push(`--window-size=${width},${height}`);
      // force screen to be non-retina and just use our given resolution
      launchOptions.args.push('--force-device-scale-factor=1');
    }
    if (browser.name === 'electron' && browser.isHeadless) {
      // might not work on CI for some reason
      launchOptions.preferences.width = width;
      launchOptions.preferences.height = height;
    }
    if (browser.name === 'firefox' && browser.isHeadless) {
      launchOptions.args.push(`--width=${width}`);
      launchOptions.args.push(`--height=${height}`);
    }
    // console.log(config, browser, launchOptions);
    launchOptions.args.push('--another-arg');
    if (browser.name === 'chrome') {
      launchOptions.args.push(
        '--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process'
      );
    }
    return config;
  }
};
romankhomitskyi commented 2 years ago

We are struggling with this as well... the videos appear so slow that they don't provide flow benefit and only show images at the end. I've tried adjusting the compression added the following to no avail:

/cypress/plugins/index.js

module.exports = (on, config) => {
  // on is used to hook into various events Cypress emits
  // config is the resolved Cypress config
  // ...
  on('before:browser:launch', (browser, launchOptions) => {
    console.log(
      'launching browser %s is headless? %s',
      browser.name,
      browser.isHeadless
    );
    const width = 1440; // could come from env variable / config
    const height = 900; // same
    console.log('setting the browser window size to %d x %d', width, height);
    if (browser.name === 'chrome' && browser.isHeadless) {
      launchOptions.args.push(`--window-size=${width},${height}`);
      // force screen to be non-retina and just use our given resolution
      launchOptions.args.push('--force-device-scale-factor=1');
    }
    if (browser.name === 'electron' && browser.isHeadless) {
      // might not work on CI for some reason
      launchOptions.preferences.width = width;
      launchOptions.preferences.height = height;
    }
    if (browser.name === 'firefox' && browser.isHeadless) {
      launchOptions.args.push(`--width=${width}`);
      launchOptions.args.push(`--height=${height}`);
    }
    // console.log(config, browser, launchOptions);
    launchOptions.args.push('--another-arg');
    if (browser.name === 'chrome') {
      launchOptions.args.push(
        '--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process'
      );
    }
    return config;
  }
};

I turned off video compression, situation got better a little bit, I am wondering if you running multiple instances of cypress in one machine?

josh803316 commented 2 years ago

I don't think I am, just using the normal settings as far as I know for the Cypress V2 github action - not even running parallel. I did a profile run, but don't really know how to read this chart:

Workflow - Navigate to Lesson
    Base URL - MCAT
  cypress:server:util:process_profiler current & mean memory and CPU usage by process group:
  cypress:server:util:process_profiler ┌─────────┬───────────────────┬──────────────┬───────────────────────────────────────────────────────┬────────────┬────────────────┬──────────┬──────────────┬─────────────┐
  cypress:server:util:process_profiler │ (index) │       group       │ processCount │                         pids                          │ cpuPercent │ meanCpuPercent │ memRssMb │ meanMemRssMb │ maxMemRssMb │
  cypress:server:util:process_profiler ├─────────┼───────────────────┼──────────────┼───────────────────────────────────────────────────────┼────────────┼────────────────┼──────────┼──────────────┼─────────────┤
  cypress:server:util:process_profiler │    0    │     'Chrome'      │      8       │ '2412, 2416, 2417, 2419, 2441, 2420 ... 2 more items' │     55     │     40.98      │ 1407.12  │    901.35    │   1407.12   │
  cypress:server:util:process_profiler │    1    │     'cypress'     │      1       │                         '709'                         │   10.33    │     21.65      │  247.79  │    225.37    │   248.62    │
  cypress:server:util:process_profiler │    2    │ 'electron-shared' │      4       │                 '715, 872, 716, 885'                  │     0      │       0        │  183.05  │    179.05    │   183.05    │
  cypress:server:util:process_profiler │    3    │     'plugin'      │      1       │                         '942'                         │     0      │      2.27      │  131.48  │    270.16    │   704.79    │
  cypress:server:util:process_profiler │    4    │     'ffmpeg'      │      1       │                        '2411'                         │    3.67    │      4.02      │  64.37   │    55.54     │    68.23    │
  cypress:server:util:process_profiler │    5    │      'other'      │      2       │                     '2549, 2550'                      │     0      │       0        │   3.34   │     3.4      │    3.44     │
  cypress:server:util:process_profiler │    6    │      'TOTAL'      │      17      │                          '-'                          │     69     │     66.95      │ 2037.15  │   1583.75    │   2492.79   │
  cypress:server:util:process_profiler └─────────┴───────────────────┴──────────────┴───────────────────────────────────────────────────────┴────────────┴────────────────┴──────────┴──────────────┴─────────────┘ +10s
  cypress:server:util:process_profiler current & mean memory and CPU usage by process group:
  cypress:server:util:process_profiler ┌─────────┬───────────────────┬──────────────┬───────────────────────────────────────────────────────┬────────────┬────────────────┬──────────┬──────────────┬─────────────┐
  cypress:server:util:process_profiler │ (index) │       group       │ processCount │                         pids                          │ cpuPercent │ meanCpuPercent │ memRssMb │ meanMemRssMb │ maxMemRssMb │
  cypress:server:util:process_profiler ├─────────┼───────────────────┼──────────────┼───────────────────────────────────────────────────────┼────────────┼────────────────┼──────────┼──────────────┼─────────────┤
  cypress:server:util:process_profiler │    0    │     'Chrome'      │      8       │ '2412, 2416, 2417, 2419, 2441, 2420 ... 2 more items' │   61.16    │     41.82      │  883.04  │    900.59    │   1407.12   │
  cypress:server:util:process_profiler │    1    │     'cypress'     │      1       │                         '709'                         │   13.88    │     21.34      │  244.93  │    226.16    │   248.62    │
  cypress:server:util:process_profiler │    2    │ 'electron-shared' │      4       │                 '715, 872, 716, 885'                  │     0      │       0        │  183.05  │    179.21    │   183.05    │
  cypress:server:util:process_profiler │    3    │     'plugin'      │      1       │                         '942'                         │     0      │      2.17      │  131.48  │    264.38    │   704.79    │
  cypress:server:util:process_profiler │    4    │     'ffmpeg'      │      1       │                        '2411'                         │    3.96    │      4.01      │  64.37   │    55.91     │    68.23    │
  cypress:server:util:process_profiler │    5    │      'other'      │      2       │                     '2621, 2622'                      │     0      │       0        │   3.4    │     3.4      │    3.44     │
  cypress:server:util:process_profiler │    6    │      'TOTAL'      │      17      │                          '-'                          │   79.01    │     67.43      │ 1510.28  │   1580.81    │   2492.79   │
  cypress:server:util:process_profiler └─────────┴───────────────────┴──────────────┴───────────────────────────────────────────────────────┴────────────┴────────────────┴──────────┴──────────────┴─────────────┘ +11s
  cypress:server:util:process_profiler current & mean memory and CPU usage by process group:
  cypress:server:util:process_profiler ┌─────────┬───────────────────┬──────────────┬───────────────────────────────────────────────────────┬────────────┬────────────────┬──────────┬──────────────┬─────────────┐
  cypress:server:util:process_profiler │ (index) │       group       │ processCount │                         pids                          │ cpuPercent │ meanCpuPercent │ memRssMb │ meanMemRssMb │ maxMemRssMb │
  cypress:server:util:process_profiler ├─────────┼───────────────────┼──────────────┼───────────────────────────────────────────────────────┼────────────┼────────────────┼──────────┼──────────────┼─────────────┤
  cypress:server:util:process_profiler │    0    │     'Chrome'      │      8       │ '2412, 2416, 2417, 2419, 2441, 2420 ... 2 more items' │   63.83    │      42.7      │ 1031.61  │    905.83    │   1407.12   │
  cypress:server:util:process_profiler │    1    │     'cypress'     │      1       │                         '709'                         │    12.8    │     21.01      │  254.76  │    227.26    │   254.76    │
  cypress:server:util:process_profiler │    2    │ 'electron-shared' │      4       │                 '715, 872, 716, 885'                  │     0      │       0        │  183.05  │    179.36    │   183.05    │
  cypress:server:util:process_profiler │    3    │     'plugin'      │      1       │                         '942'                         │     0      │      2.09      │  131.48  │    259.06    │   704.79    │
  cypress:server:util:process_profiler │    4    │     'ffmpeg'      │      1       │                        '2411'                         │    2.37    │      3.95      │  64.37   │    56.25     │    68.23    │
  cypress:server:util:process_profiler │    5    │      'other'      │      2       │                     '2700, 2701'                      │     0      │       0        │   3.4    │     3.4      │    3.44     │
  cypress:server:util:process_profiler │    6    │      'TOTAL'      │      17      │                          '-'                          │     79     │     67.88      │ 1668.67  │   1584.19    │   2492.79   │
  cypress:server:util:process_profiler └─────────┴───────────────────┴──────────────┴───────────────────────────────────────────────────────┴────────────┴────────────────┴──────────┴──────────────┴─────────────┘ +11s
[percy] Snapshot taken: Workflow - Navigate to Lesson Base URL - MCAT navigates to a lesson and starts the video
      ✓ navigates to a lesson and starts the video (37919ms)
josh803316 commented 2 years ago

I had to disable video recording as it was completely slowing down my CI process (which eats into my github actions mins) and was providing 0 value to the debugging process. This is a huge blocker to forward progress and is quite frustrating when choosing the practice of using Github actions and Cypress testing for CI (with recordings).

manuelriveragax commented 2 years ago

Is there an update for this? Facing the same issue

camiloesub commented 2 years ago

Seeing the same thing, cypress 10.3.0...

cypress-app-bot commented 1 year ago

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.

webbertakken commented 1 year ago

Activity. This is still valid.

nagash77 commented 1 year ago

@webbertakken can you provide a reproducible example on a current version of Cypress?

nagash77 commented 1 year ago

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.

josh803316 commented 1 year ago

Just as an update, I was able to only get this to work by switching to self-hosted runners and using the latest Amazon Linux AMI - al2022: unofficial-amzn2022-ami-ecs-hvm-${formatdate("YYYYMMDDhhmm", timestamp())}-x86_64-ebs