Testcafe - Unable to click on a button

Question

I am trying to click on a button but for some weird reason, I am not able to. Here is the code.

import { ClientFunction } from 'testcafe';
import { Selector } from 'testcafe';

fixture `Fixture`    
    .page `https://viewshape.com/shapes/12b5ntdyuf7`

test(`test`, async t => {    

    await t.maximizeWindow();
    await t.wait(3000);

    const fullScreen = Selector('.sp-controls-btn.js-sp-fullscreen-button').filterVisible();   

    //await t.debug();

    await t
        .expect(fullScreen.with({visibilityCheck: true}).exists)
        .ok({timeout: 30000})
        .hover(fullScreen)
        .click(fullScreen);
    await t.wait(4000);

});

But if I go through debug mode using .debug() and then use Next-Action option in the debugger, the .click() works.

I am not able to understand what is going on here. Why is it .click() is working in .debug() but not in normal flow.

You should probably wait until the selector for fullScreen is visible. something like await t.expect(fullScreen.exists).ok("The selector did not load in time"). If that doesnt work try appending .filterVisible() at the end of the full screen selector. Something like Selector('.sp-controls-btn.js-sp-fullscreen-button').filterVisible() . Read up more here: https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/filtervisible.html — Roosevelt H, May 18 '20 at 23:14
@RooseveltH thank you for responding. I tried both ways but I am afraid, it is still not working. I have updated the code in my original post. — srinathbharadwaj, May 18 '20 at 23:48
Can you maximize the window first before looking for the selector. That could be the problem. — Roosevelt H, May 18 '20 at 23:51
As far as I can tell, I can see the mouse pointer is moving on top of the button but for some reason, the click event is not getting registered. It seems the button element is visible because if it was not visible then there would be some error. In my case, there are no errors but at the same time, click does not happen. — srinathbharadwaj, May 19 '20 at 00:05
wait hold up. After you click the full screen what are you trying to do? the code works and passes as far as I can tell. — Roosevelt H, May 19 '20 at 00:11
@RooseveltH There are no errors but at the same time, when I click on fullscreen button, I do not see it getting clicked. Ideally, the screen should change to full screen mode. This is a simple test and all I am trying is, whether I can click on the full screen button. I have recorded the screen events to to allow you to see what I see - https://github.com/srinathbharadwaj/testcafeissue/blob/master/canvas.gif Hope this helps! — srinathbharadwaj, May 19 '20 at 23:40
And just to show how it is behaving with await t.debug(), here is the screen events recording - https://github.com/srinathbharadwaj/testcafeissue/blob/master/canvasWithDebug.gif — srinathbharadwaj, May 19 '20 at 23:49
I found the reason why it is not working but no solution yet. I tried running click() on the button from console but it failed with error as shown. Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. I understood this is done with security in mind but I still do not know a way to workaround this for test automation purpose. — srinathbharadwaj, May 20 '20 at 05:12
hey @srinathbharadwaj yeah probably nike made it difficult for bots to run on its website. I am not sure how to work around this. Sorry mate. — Roosevelt H, May 20 '20 at 16:08

score 4 · Accepted Answer · answered May 21 '20 at 16:41

When the Testcafe click action is executed on a DOM element, it calls the element.click() method. Mentioned 'Failed to execute 'requestFullscreen' on 'Element' error means that click event handler calls the requestFullscreen method, which must be called inside a user interaction only. This is a browser's security restriction and there is no way to overcome it.

Testcafe - Unable to click on a button

1 Answers1