2

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?

  • What is the framework which is used? Did you read the documentation of this tool? – Zhivko.Kostadinov Jan 7 at 12:26
  • The tool is testcafe. The assert documentation is a little bit poor. – locke Jan 7 at 13:05
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.

  • The tool I use is testcafe. This is the XPath of the checkbox: //*[@id="page-wrapper"]/div[3]/div/div/div/div/div/div/div/form/div/div[3]/div[1]/div[3]/div/div[1]/pc-checkbox/label/span[2] – locke Jan 7 at 13:06
  • 2
    @locke - it would be better if you edited your question to add enough of the page HTML that we can see if there's a better way to work that just with the spans. An absolute XPath like you've posted here is relatively useless because one change to the layout will break it. – Kate Paulk Jan 7 at 19:17
  • This is the relative xpath: Xpath first element: (//SPAN[@class='control-indicator'])[1] Xpath first element: (//SPAN[@class='control-indicator'])[1] Relative xpath: //SPAN[@class='ng-binding'][text()='Enable']/..//SPAN[@class='control-indicator'] Tag name: span Tag content: <span class="control-indicator" style="border: 5px groove rgb(255, 0, 0);"></span> – locke Jan 9 at 7:44
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.