How to add delay/condition between, the runner UI hiding, and screenshot being taken

[ACoolmanTelicent]

Background

Runner UI

The Cypress app includes Runner UI

• Test Status Menu
• URL Preview
• Viewport Sizing
• Command log
• Plus some white-space around the app preview

Screenshot flow

1. When a screenshot is taken¹ - the Runner UI is hidden.
2. Then as soon as the Page DOM re-layout is complete, the screenshot is taken.

¹ Except with capture: 'runner' which is not ideal as it includes the Runner UI

Problem

Elements like canvas, can often redraw based off resize/relayout.

In my app the canvas is has not yet redrawn its pixels when the screenshot happens.

Question

How can I add a delay (or a condition) between the Runner UI hiding, and the screenshot.

Prior attempts / Alternatives

Ive only been able to add delays/conditons BEFORE the Runner UI hides, which does not help.

e.g. this screenshot config didn't work for me

  onBeforeScreenshot() {
    return new Cypress.Promise((resolve, reject) => {
      setTimeout(() => {
        resolve();
      }, 500); // Delay of 500ms
    });
  }

¹⁺ I can take a screenshot configured with capture: 'runner',, as this leaves the Runner UI onscreen, thus saving a resize/relayout, thus keeping my canvas pixels "populated". But this is not my ideal solution.

As a hail mary, I tried to blackout the Render UI, but (as expected) it didn't work

{  blackout: [
	'[data-cy="specs-list-panel"]',
	'[data-cy="reporter-panel"]',
	'[data-cy="auto-panel"] > div:first-child'
] }