Taiko: Checkbox functionality not working as expected

[vijayasreer]

Expected behavior

checkBox().check() should check and show acknowledgement
Subsequent event to enable to button should work, if checkbox is checked.

Actual behavior

checkBox().check() shows isChecked as true but there is no acknowledgement
Subsequent event to enable to button does not work, if checkbox is checked

Steps to reproduce

Checkbox with id and class locators is not working as expected.

I can see checkbox with class exists and and isChecked shows correct status, but there is no acknowledgement after .check and .uncheck on checkBox. So, I think checkBox is not checked properly as there is a related event to enable a button, if checkBox is checked.

Manually testing this works on all browsers.

const { checkBox, openBrowser, goto, inputField, focus, $, into, write, click, press, closeBrowser } = require('taiko');
(async () => {
    try {
        await openBrowser();
        await goto('http://xxxx.co.uk:3000/login');
        await focus(inputField({'id': 'username'}));
        await write('[email protected]', 'username:');
        await click('Continue');
        await write('[email protected]',into($('#confirmEmail')));
        await write("Password123", into($('#password')));
        await write("Password123", into($('#confirmPassword')));
        await write("London", into($('#firstName')));
        await write("United", into($('#lastName')));
        await checkBox({'class': "ln-c-form-option__input"}).exists();
✔ Exists
        await focus(checkBox({'class': "ln-c-form-option__input"}));
✔ Focussed on the checkbox[class="ln-c-form-option__input"]
        await press("Enter");
        await checkBox({'class': "ln-c-form-option__input"}).check();
        / This step doesn't give me any acknowledgment. /
        await checkBox({'id': "termsAndConditions-true"}).check();
/ This step doesn't give me any acknowledgment. */
            } catch (e) {
        console.error(e);
    } finally {
        await closeBrowser();
    }
})();

Versions

taiko --version
Version: 0.6.0 (Chromium: 73.0.3665.0)

node --version
v11.4.0

[NivedhaSenthil]

Does .check() checks the checkBox for your case, can you see it in headful mode ?
Looks like the issue is same as #496

[vijayasreer]

As you can see from screenshot, checkbox is showing as checked and confirmed as true by isChecked.
However, .check() does not confirm the execution (in green as done with other commands).

Workflow is that Register button is enabled, if T&C is checked.

Will appreciate, if there is a workaround please. Stuck with this basic functionality not working using taiko.

[vijayasreer]

In addition, awaiting fix for #496 associated with comboBox to registration form for Title, a mandatory dropdown.

[NivedhaSenthil]

We will be fixing the issue with checkbox, meanwhile as a wordaround you can try click(checkBox({'id':'termsAndConditions-true'}))

[NivedhaSenthil]

Fix available in 0ae7ff5.

@vijayasreer Please check if it works fine with master for you now, will be releasing Taiko soon.

[vijayasreer]

Thanks for the prompt response. Tried the code from master, now I can see the event from check() on checkBox.

• Event is triggered as seen in green, but there is a possible memory leak as per screenshot. Register button is still not enabled after check() on the checkbox.
• Workaround to use click(checkBox({'id':'termsAndConditions-true'})) did not work with error "checkBox is covered by other element, run .trace for more info".
  
  

[Debashis9012]

@vijayasreer the main issue was after successfully performing the check() operation it was not giving the acknowledgement. After the fix i have tested it and i observed its providing the acknowledgement.

> checkBox({id:'vehicle3'}).check()
` ✔ Checkbox[@id = concat('vehicle3', "")]is checked`
> click(checkBox({'id':"vehicle1"}))
` ✔ Clicked checkbox[@id = concat('vehicle1', "")]`

We need few information from your side which will be helpful for us:

1. Are you frequently facing Possible EventEmitter memory leak detected issue?
2. could you please run the below code against the attached html snippet and let us know the output.
   (We want to check whether you are facing Possible EventEmitter memory leak detected issue )

Note: please use taiko commit: 0ae7ff5
taiko code:

       1. openBrowser();
       2. goto("file:///Users/abc/work/checkBoxEx.html");
       3. checkBox({id:'vehicle2'}).check();
       4. checkBox({id:'vehicle2'}).uncheck();
       5. click(checkBox({'id':"vehicle1"}));
       6. click(checkBox({'id':"vehicle3"}));
       7. checkBox({id:'vehicle1'}).check();

Html snippet

<!DOCTYPE html>
<html>
<body>
<h1>Show checkboxes:</h1>
<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" value="Bike"> Ninja<br>
  <input type="checkbox" id="vehicle2" value="Car"> Veron<br>
  <input type="checkbox" id="vehicle3" value="Cruise" checked> I have a cruise<br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

[vijayasreer]

@Debashis9012 Apologies for late response.Thanks for your help and support.
Fix is working for HTML type checkbox.
But this fix couldn't work on react type of checkbox.
how does taiko deals with hidden element?
The issue is that,
We have native checkbox element that is visually hidden and top of that we got custom styled checkbox (Fake)styles to a div that will replace the native checkbox. We use this feature to set the background color of our StyledCheckbox.

So taiko is able to click fake checkbox, but it is unable to click actual box which is hidden.Any help will be appreciated.

[zabil]

Instead of clicking on the checkbox based on it's html structure and xpath/css selectors have you tried just clicking on terms and conditions?

click("I agree to the terms and conditions")

This is how users would be using it. Plus it makes the tests less flaky when the react components change.

[Debashis9012]

@vijayasreer as @zabil suggested please try and let us know the outcome. Currently to deal with the hidden elements we do have an open card https://github.com/getgauge/taiko/issues/317 and we are looking into this

[NivedhaSenthil]

And also the memory leak issue is different from the actual issue, will be great if you can create a new issue for that with some steps to replicate. Guess that is happening when using REPL for a long time, taiko should be cleaning up when reconnecting to a new session.

[Debashis9012]

523 MaxListenersExceededWarning: Possible EventEmitter memory leak detected

[IFormiga]

This worked for me: await click(checkBox({'id':'termsandconditions'}));