Screenshot of entire element with element which is scrollable

Question

I want to perform a visual regression test on an element which is inside a div element with overflow:auto. This means it is scrollable and does usually not fit the screen. If an element screenshot is taken, there is no option like fullPage: true for takeElementScreenshot() in testcafe. Also if I take a fullpage screenshot the #sidebar-quicklinks is cropped as well. A simple example would be:

test.page("https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts")(
  "2 Check Studienabschluss FE",
  async (t) => {
    await t.takeScreenshot({
      path: "pre_post/2.png",
      fullPage: true,
    });

    await t.takeElementScreenshot("#sidebar-quicklinks", "pre_post/3.png", {
      includeMargins: true,
    });
  }
);

How can I take a full screenshot of teh element #sidebar-quicklinks in testcafe? I was thinking about changing the resoltion of the window with resizeWindow() but this might break video capture if I am not mistaken.

Thanks for your help.

Answer 1

The takeElementScreenshot method cannot capture the full element if it extends beyond the viewport. However, you can capture a full-page screenshot without cropping #sidebar-quicklinks. To achieve this, you need to modify the styles of .sidebar-container and #sidebar-quicklinks via ClientFunction, and then take a full-page screenshot:

import {ClientFunction } from 'testcafe';

const changeStyles = ClientFunction(() => {
  document.querySelector('#sidebar-quicklinks').setAttribute('style','overflow: unset');
  document.querySelector('.sidebar-container').setAttribute('style','max-height: unset');
})

test.page("[https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts")(](https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts%22)()
  "2 Check Studienabschluss FE",
  async (t) => {
    await t.takeScreenshot({
      path: "pre_post/2.png",
      fullPage: true,
    });
  }
);