Ask a Question

Getting the state of a checkbox that is not a clickable point due to CSS

SOLVED
delito
Occasional Contributor

Getting the state of a checkbox that is not a clickable point due to CSS

Hi

 

Using Chrome and TC JavaScript I am trying to get the state of a checkbox on a screen but this screen has CSS applied to the checkbox so they have become a non clickable point like so:

 

 

 

 

 

<div _ngcontent-yjq-c790="" class="form-group row"><label _ngcontent-yjq-c790="" for="sampleRefechan" class="col-sm-6 col-form-label"> Show Refechan <app-tooltip _ngcontent-yjq-c790=""><!----></app-tooltip></label><div _ngcontent-yjq-c790="" class="col-sm-6"><input _ngcontent-yjq-c790="" type="checkbox" id="sampleRefechan" name="sampleRefechan" class="form-control with-font ng-untouched ng-pristine ng-valid"><label _ngcontent-yjq-c790="" for="sampleRefechan"></label></div></div>

 

 

 

I did notice if I deselect the values for height, width and clip in styles manually it became a clickable point and I could use that, but I'm not sure how to script this ? Or is there a better way to proceed ?

 

 

Thanks

delito

 

1 ACCEPTED SOLUTION

Accepted Solutions
delito
Occasional Contributor

Re: Getting the state of a checkbox that is not a clickable point due to CSS

I managed to remove the classes from the screen for the CSS, that made the check boxes usable

 

 

 

 

 

function DisableCSSClass()
{
  let browser = Aliases.browser;
  let page = browser.pageClientApp4;
  var elements = page.FindElements('//*[@class="form-control with-font ng-untouched ng-pristine ng-valid"]').toArray();

  if (elements.length > 0)
  {
    for (var i = 0; i < elements.length; i++)
    {
      elements[i].className="form-control ng-untouched ng-pristine ng-valid";
    }
  }
  else
  {
    Log.Message("No element with this class found on the page.");
  }
}

 

View solution in original post

1 REPLY 1
delito
Occasional Contributor

Re: Getting the state of a checkbox that is not a clickable point due to CSS

I managed to remove the classes from the screen for the CSS, that made the check boxes usable

 

 

 

 

 

function DisableCSSClass()
{
  let browser = Aliases.browser;
  let page = browser.pageClientApp4;
  var elements = page.FindElements('//*[@class="form-control with-font ng-untouched ng-pristine ng-valid"]').toArray();

  if (elements.length > 0)
  {
    for (var i = 0; i < elements.length; i++)
    {
      elements[i].className="form-control ng-untouched ng-pristine ng-valid";
    }
  }
  else
  {
    Log.Message("No element with this class found on the page.");
  }
}

 

View solution in original post

cancel
Showing results for 
Search instead for 
Did you mean: