Unable to check if a button is disabled in javascript

Question

I am trying to check if a button is disabled in testcafe. Below is my code:

    test('Verify  button is inactive after disabling button functionality', async (browser) => {
      await browser.wait(5000);
      const button = document.querySelector
('[data-testid=Button]');
      await browser.click(button);
      const buttonActive = ClientFunction(() => {
        const button = document.querySelector
('[data-testid=Button]');
        const buttonStatus = button.disabled;
        console.log(buttonStatus);
        return buttonStatus;
      });
    
      await browser.expect(buttonActive()).eql(false);
    });

this reports an error - TypeError: Cannot read properties of null (reading 'disabled')

I tried querying from browser console and it worked -

document.querySelector('[data-testid=Button]').disabled
false

Any idea why it is not working?

Here is the console log of the button element -

I did, and have below logged -

Function: __$$clientFunction$$] {
  with: [Function (anonymous)],
  nth: [Function (anonymous)],
  withText: [Function (anonymous)],
  withExactText: [Function (anonymous)],
  withAttribute: [Function (anonymous)],
  filter: [Function (anonymous)],
  filterVisible: [Function (anonymous)],
  filterHidden: [Function (anonymous)],
  find: [Function (anonymous)],
  parent: [Function (anonymous)],
  child: [Function (anonymous)],
  sibling: [Function (anonymous)],
  nextSibling: [Function (anonymous)],
  prevSibling: [Function (anonymous)],
  shadowRoot: [Function (anonymous)],
  getStyleProperty: [Function (anonymous)],
  getAttribute: [Function (anonymous)],
  hasAttribute: [Function (anonymous)],
  getBoundingClientRectProperty: [Function (anonymous)],
  hasClass: [Function (anonymous)],
  addCustomDOMProperties: [Function (anonymous)],
  addCustomMethods: [Function (anonymous)],
  [Symbol(functionBuilder)]: SelectorBuilder {
    callsiteNames: { instantiation: 'Selector', execution: '__$$clientFunction$$' },
    fn: '[data-testid=Audio-Button]',
    options: {
      apiFn: "Selector('[data-testid=Audio-Button]')",
      apiFnChain: [Array],
      apiFnID: 0
    },
    compiledFnCode: '(function(){\n' +
      '   var __f$=(function(){return document.querySelectorAll("[data-testid=Audio-Button]");});;\n' +
      '   return function(){\n' +
      '       var args           = __dependencies$.boundArgs || arguments;\n' +
      '       var selectorFilter = __dependencies$.selectorFilter;\n' +
      '\n' +
      '       var nodes = __f$.apply(this, args);\n' +
      '       nodes     = selectorFilter.cast(nodes);\n' +
      '\n' +
      '       if (!nodes.length && !selectorFilter.error)\n' +
      '           selectorFilter.error = __dependencies$.apiInfo.apiFnID;\n' +
      '\n' +
      '       return selectorFilter.filter(nodes, __dependencies$.filterOptions, __dependencies$.apiInfo);\n' +
      '   };\n' +
      '})();',
    replicator: {
      transforms: [Array],
      transformsMap: [Object: null prototype],
      serializer: [Object]
    },
    callsite: undefined
  }
}

I was not able to corelate my question to the proposed answer. I thunk the page is loaded, but just the method "disabled" does not work. Othe methods such as click works.. — pawanamigo, Apr 05 '22 at 03:50
You need to do some basic debugging here. Add `console.log(button)` and see if it is finding the appropriate element. If not, then you need to post the HTML so we can see why it's not finding it. You may also want to look yourself at what the `document.body.innerHTML` contains (by logging that value) and see if your desired element is even there. — jfriend00, Apr 05 '22 at 07:15
I am pretty sure that the element was found. I could get the text of the element using 'innerText'. But it is just returning undefined when I use 'disabled' on that element to find out if the button is actually enabled or disabled. — pawanamigo, Apr 05 '22 at 23:26
Well, if `button` contains the proper button element, then `button.disabled` will be `true` or `false`. There is nothing else I can do here without a reproducible case. — jfriend00, Apr 05 '22 at 23:56
If this error `TypeError: Cannot read properties of null (reading 'disabled')` occurs on this line of code `const buttonStatus = button.disabled;`, then that is because `button` is `null`. With one line of code `console.log(button)`, you can verify that. This is basic debugging you should be doing yourself to attempt to diagnose the problem and is an important part of learning to write code. — jfriend00, Apr 05 '22 at 23:57
See simple example here: https://jsfiddle.net/jfriend00/8crhg2fs/. — jfriend00, Apr 06 '22 at 00:04
I did, and have updated. I could not find any property that is null. — pawanamigo, Apr 06 '22 at 00:42
That error message doesn't mean a property is `null`. It means the `button` variable that you're trying to to do `button.disabled` to access the `.disabled` property is `null`. I don't think I can contribute any further here. — jfriend00, Apr 06 '22 at 00:54

score 1 · Answer 1 · answered Apr 07 '22 at 10:50

I think that there are some mistakes in your test code, which leads to the errors.

The following code has an error:

const button = document.querySelector('[data-testid=Button]');

This is server test code, so you do not have access to the document. The correct usage would be the following:

const button = Selector('[data-testid=Button]');

Please read the following article to get information on how TestCafe works in detail: https://testcafe.io/documentation/402631/why-testcafe#client-server-architecture

It seems that there is a a logical error in your ClientFunction and assertion. The function name is buttonActive while it returns the disabled property value.

Please take a look at the example I prepared:

<body>
    <button data-testid="Button" disabled="disabled">kekeke</button>
</body>

import { Selector, ClientFunction } from 'testcafe';

fixture `f`
    .page `index.html`;

test('Verify  button is inactive after disabling button functionality', async (browser) => {
    const button = Selector('[data-testid=Button]');
    await browser.click(button);

    const buttonDisabled = ClientFunction(() => {
        const btn = document.querySelector('[data-testid=Button]');
        const buttonStatus = btn.disabled;

        return buttonStatus;
    });

    const isDisabled = await buttonDisabled();

    await browser.expect(isDisabled).eql(true);
});

Unable to check if a button is disabled in javascript

1 Answers1