API - .click() on a div element with an onClick handler supported?

[anon97884782]

Am trying to click a div with t.click(someDivSelector).click(someOtherSelector), but the first click doesn't seem to be executed.properly. Testcafe starts wiating for the second selector to return something, but that never happens

When I open the console in Chrome while testcafe is waiting for the second selector to return something and I do this in the browser console, it all of a sudden does start working:
document.querySelector('[data-element-name=nameOfMydiv]').click()

The click on someDivSelector does an Ajax call after which extra markup is loaded in the UI, which contains something matching someOtherSelector. When testcafe does it's first click, the dynamically loaded content doesn't appear in the UI. When I click that first element with the code above through the Developer Console, the dynamic UI does appear.

So I wonder if testcafe supports clikcing divs and triggering their onclick envent handler.

I'm on Chrome, Windows 10 and TestCafe 0.11.1

[anon493717]

Sure it should work. I suppose the issue is specific for your page. Could you please provide us an url of your page and your test code to check it? Or maybe could you create a simple example that reproduces the problem?

[anon97884782]

As the page isn't public, sending a link is a bit hard. I'll try to do some debugging myself or else try to create a standalone sample reproducing the problem.

Paul

[anon97884782]

I think I have figured out the problem.

The div I'm trying to click is located in the lower-right corner of the window. The reason that the click of the element in my test isn't triggering the onclick event handler is because TestCafe displays a bar on the bottom of the window, which overlays the div I'm trying to click.

If I put in a wait that is long enough for me to open the Developer Tools in Chrome and set display: none on the div with id="root-hammerhead-shadow-ui", the click of my div starts working fine.

So is seems that TestCafe's status overlay on the bottom of the screen is interfering with the ability to test the elements that are located underneath it

Any suggestions how I can work around that (assuming a proper fix will end up in TestCafe eventually)?

TIA

Paul

[anon97884782]

Hoping I can get some pointers how to workaround this. I've tried to hide the Testcafe bar myself, but it seems like TestCafe is actively trying to not let me interact with the bar, by not allowing me to select is wit document.querySelector for example

[anon493717]

TestCafe is actively trying to not let me interact with the bar, by not allowing me to select is wit document.querySelector for example

Yes, TestCafe "hides" their ui from the page script.

The reason that the click of the element in my test isn't triggering the onclick event handler is because TestCafe displays a bar on the bottom of the window, which overlays the div I'm trying to click.

TestCafe should work in this situation. It ignores their ui and should perform click successfully. For example the following test works on my side (TestCafe clicks on the link that is under the TestCafe ui panel:

import { Selector } from 'testcafe';

fixture `Twitter`
    .page('https://twitter.com/');

test('test', async t => {
    await t.click(Selector('a').withText('About'));
});

Do you have some element that placed below your element? If yes as a workaround you can call await t.hover(elementBelowSelector) and then perform await t.click(yourDivSelector).
Is you element placed in an iframe or not?

[anon97884782]

Hi,

Tnx for your response.

No, my element is not in an iframe.

Not so sure about whether your example is representative of the problem I'm facing, as the 'About' link from Twitter isn't located below the TestCafe bar (for me at least), but I've first created a simplified sample myself and can't reproduce the problem in there.

So I went on to extract the HTML from the page in which it is reproducible into something stand-alone which I can share. And I managed to do so and the problem is reproducible in there, see the test script below.

It looks like something is wrong with the coordinates and the click is done outside the div
import { Selector } from 'testcafe';

fixture `Sample`
.page `https://rawgit.com/p-bakker/cb1113e61bf721551df08917cada1775/raw/3971d3ce01f5822b0675cebcaffb9b2822285335/test.html`;

test('div', async t => {
	const div = Selector('[data-sv-element-name="test"]')
		
	await t
		.click(div)
		.expect(div.find('span').textContent).contains('It worked');
	}
)

[anon493717]

Thanks for the example. I've reproduced the problem and created an issue in our repository. Subscribe to it to be notified when it's fixed.

[anon97884782]

k, great.

Any suggestions for a temporary workaround?

Paul

[anon493717]

Try to add hover action before click. It works on my side with your example

import { Selector } from 'testcafe';

fixture `Sample`
.page `https://rawgit.com/p-bakker/cb1113e61bf721551df08917cada1775/raw/3971d3ce01f5822b0675cebcaffb9b2822285335/test.html`;

test('div', async t => {
	const div = Selector('[data-sv-element-name="test"]')
		
	await t
	    .hover(div)
	    .click(div)
            .expect(div.find('span').textContent).contains('it worked')
            .wait(2000); // just to see the page state
	}
)

[anon97884782]

The .hover(div) approach doesn't work for me unfortunately

I've worked around it now by altering the design locally, by moving the button, which is fine for now working locally, but of course I cannot do that once we set this up into our software factory.

Any idea when the fix could be available for testing?

Paul

[anon493717]

The issue is under investigation already, we'll provide a fix as soon as possible

[anon60252403]

Hello.

Is there any info about this issue?

Thanks!

Renato

[MarinaRukavitsyna]

@csrenato
We have fixed the issue in the context of the following thread:

Onclick event handler is not executed when TestCafe clicks on the div