CODEWITHSUNDEEP
testingautomationautomated-testse2e-testingtestcafe
Prasu
Prasu

Reputation: 1

Unable to check hidden custom checkbox

I have tried many options, but not successful so far to click on checkbox that are custom checkboxes with :before tag and are hidden. Can someone show me the way to resolve this issue. I tried X-Path and other selector, it finds and clicks on those checkboxes but those checkboxes don't get checked for some reason.

<fieldset class="checkbox">
                <legend>Services</legend>

                <ul class="multiColumnList">
                    <li><label for="AccountUsers_0__ViewOrders"><input data-val="true" data-val-required="The View Orders field is required." id="AccountUsers_0__ViewOrders" name="AccountUsers[0].ViewOrders" type="checkbox" value="true" class="hidden-field"><span class="custom checkbox"></span><input name="AccountUsers[0].ViewOrders" type="hidden" value="false">View Orders</label></li>

Here is the screenshot of HTML

Upvotes: 0

Views: 264

Answers (2)

Alexey Popov
Alexey Popov

Reputation: 1047

Try to click on the checkbox in the following way:

const checkboxSelector = Selector('#AccountUsers_0__ViewOrders');
const labelSelector = Selector('[for="AccountUsers_0__ViewOrders"]')

await t.click(labelSelector);
await t.expect(checkboxSelector.checked).ok();

If this does not help, let me know. I will find a suitable solution for you.

Upvotes: 2

Surya Prakash
Surya Prakash

Reputation: 316

   async Check() {
    const checkboxSelector = Selector(`[id="AccountUsers_0__ViewOrders"]`)
                             .with({visibilityCheck: true});
    if(!checkboxSelector.checked){
      await t.click(checkboxSelector);  
    }
    
    await t.expect(checkboxSelector.checked).eql(true, 'Should be checked')
  }

  async UnCheck() {
    const checkboxSelector = Selector(`[id="AccountUsers_0__ViewOrders"]`)
                             .with({visibilityCheck: true});
    if(checkboxSelector.checked){
      await t.click(checkboxSelector);
    }

    await t.expect(checkboxSelector.checked).eql(false, 'Should be unchecked')
  }

Please try this code and let me know

Upvotes: 1

Related Questions