Testcafe: hide part of DOM elements during screenshots

Question

I am doing some visual testings using Testcafe (Typescript) I would like to hide some DOM elements during the screenshots creation

import { Selector } from 'testcafe';

fixture`Getting Started`
    .page`https://mypage.com`;

test('My first test', async t => {
    // select certains elements before
    await t.takeScreenshot()
});

A visual exemple would be To go from this image

to this image

Any suggestion on how to do this apart from "reinventing the wheel" hard coding some pixel selection code ? Thanks

Answer 1

You can use ClientFunction and hide the element manually with JS.

test('Hide element', async t => {
    const hideElement = ClientFunction(() => {
        document.querySelector('#id').style.visibility = 'hidden';
    });
  
    await hideElement();
  
    await t.expect(Selector('#id').visible).notOk();
});

Also, you can use clientScripts hook for fixture or clientScripts hook for test in the same way.