Search code examples
typescripttestcafevisual-testing

Testcafe: hide part of DOM elements during screenshots

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 enter image description here

to this image enter image description here

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

Solution

  • 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.