protractor: custom ExpectedConditions - on attribute change

Question

I'm trying to implement custom ExpectedConditions method, that will wait for element attribute to change.

Here is my solution:

const ECC = function() {
  /**
   * Expect element attribute to have specific value.
   *
   * @param {ElementFinder} elementFinder
   * @param {string} attrName attribute name to check
   * @param {string} attrVal attribute value to check for
   *
   * @return {boolean}
   */
  this.attributeToHave = async (elementFinder, attrName, attrVal) => {
    const EC = protractor.ExpectedConditions;
    const hasAttr = async () => {
      const actualText = elementFinder.getAttribute(attrName);
      return actualText.indexOf(attrVal) !== -1;
    };

    return await EC.and(EC.presenceOf(elementFinder), await hasAttr);
  };
};

module.exports = new ECC();

And in my onPrepare:

const {expectedConditions} = require('@utils/protractor');
global.ECC = expectedConditions;

And finally in my test suite:

 await browser.wait(await ECC.attributeToHave(dropdown, 'aria-hidden', 'false'), 3000);

But it keeps saying Failed: Wait timed out after 3006ms, What I'm doing wrong, please?

Answer 1

Please try again with below changes:

this.attributeToHave = async (elementFinder, attrName, attrVal) => {
    const EC = protractor.ExpectedConditions;
    const hasAttr = async () => {
      const actualText = await elementFinder.getAttribute(attrName); // should add await
      return actualText.indexOf(attrVal) !== -1;
    };

    return await EC.and(EC.presenceOf(elementFinder), await hasAttr()); // should call `hasAttr()` this function.
};