CODEWITHSUNDEEP
javascriptautomationautomated-teststestcafe
pawanamigo
pawanamigo

Reputation: 35

Unable to check if a button is disabled in javascript

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
  }
}

Upvotes: 0

Views: 939

Answers (1)

Alex Kamaev
Alex Kamaev

Reputation: 6318

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

  1. 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

  1. 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);
});

Upvotes: 1

Related Questions