How to assert checkbox is marked using JavaScript

Question

I’ve problem to assert that checkbox is checked. I’m using automation web testing framework which recording my clicks and generate JavaScript code. The problem is even if the checkbox is unmarked, test is passed. This is the HTML code before box to be marked:

<span class="control-indicator"></span>

This is the HTML code after box is marked:

<span class="control-indicator">…</span>

Only three dots difference. This is the generated code:

"13.Assert": function() {
    eq($(".control-indicator").eq(0).attr("class"), "control-indicator");
}

I’ve tried:

"13.Assert": function() {
    eq($(".control-indicator").eq(0).attr("class"), "control-indicator").checked;
}

"13.Assert": function() {
    eq($(".control-indicator").eq(0).attr("class"), "control- indicator".checked);
}

"13.Assert": function() {
    eq($(".control-indicator").eq(0).attr("class"), "control-indicator".isSelected);
}

But they didn't work. Could you help me with ideas how to write this assert?

Answer 1

Without more information I can't be certain, but the HTML you've given suggests that instead of an actual HTML field, there's fancy javascript and CSS being used to give the appearance of a checkbox.

You've said that when the checkbox is unmarked, the HTML code is

<span class="control-indicator"></span>

And when marked the HTML code is

<span class="control-indicator">…</span>

This means the only difference you're going to be able to use is the inner text of the <span> element.

I'd suggest that you manually use browser tools to inspect the element when checked and unchecked to confirm that the recording method you've used is correctly identifying the element. Once you've done that, you can use your tool's method to get inner text (probably element.text() but without knowing the tool I couldn't be sure) and assert against that - something like element.text() == '…' should work for you.

Answer 2

I can't add this as a comment, because I don't have enough reputation. So, try this:

async t => { await t .click(checkbox) .expect(checkbox.checked).ok(); })

The Xpath which you are using is too long. Try to avoid this complicated locator. Change the approach, and try to locate the element via different approaches, like css, id, etc.