Testcafe Ignore Overlaying Element

Problem: Cannot find Canvas due to overlaying polyline that follows cursor position inside the canvas.

Target element: Canvas

Overlaying element: polyline

Possible solution: Ignore polyline element??


This polyline blocks the underlying element (canvas) which causes TestCafe to not see the canvas on click.

TestCafe waits until the waiting time is over and will click on the given location when done waiting. This causes the test to succeed. But there is a big delay because of this.

Adjusting the waiting time cannot be done due to other steps in the test that need the waiting time.

Unfortunately, I cannot share the project due to the medical environment.

Please help.

Kind regards



You can hide an element by using your ClientFunction in this way:

import { ClientFunction } from 'testcafe';

fixture `fixture`

test('test', async t => {
    const hideElement = ClientFunction(() => {
        document.querySelector('#tsf').style.display = 'none';
//NOTE: (document.querySelector('#tsf') as HTMLElement).style.display = 'none';

    await hideElement();

    await t.debug();