Testcafe freezes on basic test with Ionic ActionSheet

[viking2917]

Are you requesting a feature or reporting a bug?

Bug

What is the current behavior?

After selecting a button that activates an Ionic Actionsheet (the standard blocking menu for Ionic), Testcafe freezes, in both debug mode and normal mode

What is the expected behavior?

Test should run to completion.

How would you reproduce the current behavior (if this is a bug)?

install a basic ionic app template, e.g. "ionic start actionSheetTest blank --type ionic1".
The replace the www directory with the attached zip files. This is essentially the standard Ionic demo for action sheets, from: https://codepen.io/ionic/pen/jLylA. (nightly tests).

Provide the test code and the tested page URL (if applicable)

See attached zip files for complete code set. The test code is below. When run, the action sheet will appear (the test code activates it), but the cancel button item is never reached, and the Chrome window running test cafe freezes, in the state shown in the attached screenshots.

www.zip

tests.zip

Tested page URL:

Test code

import { Role, Selector } from 'testcafe';

const button = Selector('button');
const actionButton = button.withText('Show Actionsheet');
const cancelButton = button.withText('Cancel');

fixture `Getting Started`
    .page `http://localhost:8105/`;

test('Tabs test', async t => {
    await t

	.click(actionButton)
	.wait(1000)
	.click(cancelButton)

	.wait(3000)
});

Specify your

• operating system: 0.13.3
• testcafe version: 0.19.1
• node.js version: v8.9.4

[AlexKamaev]

I was able to reproduce the issue in debug mode, but in normal mode, test passed well. I've checked in Chrome under Windows and OSX. If you can reproduce it without the debug mode, would you please provide a screencast?
I've also found that Ionic adds the action-sheet-open css class to the body element. See the implementation of this class in the following code:

.action-sheet-open {
    pointer-events: none;
}

This class prevents clicks on any element except an ionic panel with actions (Share, Move, Delete, Cancel). So, it seems that testcafe hangs in debug mode.

To overcome the issue you can use the temporary workaround. Override pointer-events property for the body element in the test code using Custom Methods:

const button = Selector('button');
const actionButton = button.withText('Show Actionsheet');
const cancelButton = button.withText('Cancel');
const bodySelector = Selector('body').addCustomMethods({
    allowClick: (body) => {
        body.style.pointerEvents = 'auto';
    }
});

fixture `Getting Started`
    .page `http://localhost:8100/`;

test('Tabs test', async t => {
	await bodySelector.allowClick();
    await t
        .click(actionButton)
	.wait(1000)
	.click(cancelButton)
	.wait(3000)
});

If the issue persists, feel free to contact us.

[viking2917]

Thank you @AlexKamaev. I can confirm that Testcafe does NOT hang when run outside of debug mode, and that your suggestion does enable debug mode to work as desired, very helpful. I was in debug mode because I was trying to solve another problem with Action Sheets but I figured that out I believe.

[viking2917]

@AlexKamaev I have noticed a related issue (i think the original reason I was in debug mode). It appears that clicking on an Action Sheet item causes the button's buttonClicked method to be called twice. Running outside Test cafe it is only executed once. to reproduce:

1. modify the attached app.js to be:

angular.module('ionicApp', ['ionic'])

    .controller('AppCtrl', function($scope, $ionicActionSheet) {
	
	$scope.showActionsheet = function() {
	    
	    $ionicActionSheet.show({
		titleText: 'ActionSheet Example',
		buttons: [
		    { text: '<i class="icon ion-share"></i>Share' },
		    { text: '<i class="icon ion-arrow-move"></i>Move' },
		],
		destructiveText: 'Delete',
		cancelText: 'Cancel',
		cancel: function() {
		    console.log('CANCELLED');
		},
		buttonClicked: function(index) {
		    $scope.registerButtonClick(index);
		    return true;
		},
		destructiveButtonClicked: function() {
		    console.log('DESTRUCT');
		    return true;
		}
	    });
	};

	$scope.registerButtonClick = function (index) {
            console.log('BUTTON CLICKED', index);
	    
	}
    });

2. modify the test to be:

import { Role, Selector } from 'testcafe';

const button = Selector('button');
const actionButton = button.withText('Show Actionsheet');
const cancelButton = button.withText('Cancel');
const moveButton = button.withText('Move');
const shareButton = button.withText('Share');
const bodySelector = Selector('body').addCustomMethods({
    allowClick: (body) => {
        body.style.pointerEvents = 'auto';
    }
});

fixture `Getting Started`
    .page `http://localhost:8101/`;


test('Tabs test', async t => {
	await bodySelector.allowClick();
    await t
        .click(actionButton)
	.hover(shareButton)
	.hover(moveButton)
	.click(moveButton)
	.hover(cancelButton)
	.click(cancelButton)
	.wait(3000)
});

Then the observed output shows the print statement twice ("BUTTON CLICKED 1") after click(moveButton) is called. Outside of testcafe it is shown only once. I do not know if this is related to the pointer event issue you raise above. Let me know if I should create a separate issue for this?

[AlexKamaev]

Hi, I see the problem. It appears to be connected with the #2232 issue and will be fixed in its context.

[viking2917]

I can confirm this works now, after re-installing testcafe. Thank you! (CORRECTION: The freeze is OK, but the button is still being virtually clicked twice.)

[viking2917]

@AlexKamaev Update: I mistakenly thought this was corrected. But when I run the above, I still see the BUTTON CLICKED 1 message twice, indicating the menu has been clicked twice, so the fix for #2232 doesn't seem to have solved it...

[AlexKamaev]

@viking2917 We'll investigate it in context of #2232

[viking2917]

update @AlexKamaev @Farfurix Sorry I am an idiot. I had a local installation of testcafe 0.19.1 covering a global installation of 0.19.2. When I removed that and made sure to have 0.19.2 everything works. Thanks and sorry for confusion!

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.