Personalized Jasmine matchers for a Protractor/WebDriverJS component

Question

Personalized Jasmine matchers for a Protractor/WebDriverJS component

Greetings fellow developers,

I'm looking to create a custom matcher for Protractor/WebDriverJS element. Can anyone assist in improving my current code?

Here is what I aim to include in the specs files:

var button = element(by.tagName('button'))
expect(button).toBeEnabled();

Here's my customized Jasmine matcher:

'use strict';

function improvedMatcher(util, customEqualityTesters) {
  return {
    compare : function (actual, expected) {
      var result = {};

      expect(actual.isEnabled()).toBeTruthy()

      result.pass = true;

      if (result.pass) {
        result.message = 'Expected element to be disabled';
      }
      else {
        result.message = 'Expected element to be enabled';
      }

      return result;
    }
  };
}

module.exports = improvedMatcher;

Is there a more efficient way to write this? Currently, if there is an error, I receive the message: Expected false to be true. However, I would prefer to see "Expected element to be enabled."

Appreciate your assistance.

javascript angularjs selenium jasmine protractor

Answer 1

Answer №1

From my understanding, Jasmine custom matchers are essentially objects that contain matchers as keys within them. Therefore, when calling a custom matcher, you must use the object key associated with it. In your code, you have hard-coded the value result.pass = true;, which prevents the else block from executing in case of a failure. As a result, the statement 'Expected element to be enabled.' will never be displayed. To rectify this issue, consider the following revised implementation:

'use strict';

var customMatchers = {
    toBeEnabled: function (util, customEqualityTesters) {
        return {
            compare : function (actual, expected) {
            var result = {};

            result.pass = actual.isEnabled();

            if (result.pass) {
                result.message = 'Expected element to be enabled';
            }
            else {
                result.message = 'Expected element to be disabled';
            }

              return result;
            }
        };
    }
}

Here is an example of how you can utilize this custom matcher:

var button = element(by.tagName('button'))
expect(button).toBeEnabled();

I hope this explanation proves helpful.

Answer 2

From my understanding, Jasmine custom matchers are essentially objects that contain matchers as keys within them. Therefore, when calling a custom matcher, you must use the object key associated with it. In your code, you have hard-coded the value result.pass = true;, which prevents the else block from executing in case of a failure. As a result, the statement 'Expected element to be enabled.' will never be displayed. To rectify this issue, consider the following revised implementation:

'use strict';

var customMatchers = {
    toBeEnabled: function (util, customEqualityTesters) {
        return {
            compare : function (actual, expected) {
            var result = {};

            result.pass = actual.isEnabled();

            if (result.pass) {
                result.message = 'Expected element to be enabled';
            }
            else {
                result.message = 'Expected element to be disabled';
            }

              return result;
            }
        };
    }
}

Here is an example of how you can utilize this custom matcher:

var button = element(by.tagName('button'))
expect(button).toBeEnabled();

I hope this explanation proves helpful.

Personalized Jasmine matchers for a Protractor/WebDriverJS component

Answer №1

Similar questions

The animation speed of the jQuery hashchange event is set to zero, causing the animation

Encountering an issue when trying to download a PDF from an Angular 6 frontend using a Spring Boot API - receiving an error related to

Building a single-page app optimized for mobile viewing with Foundation framework

What causes the Error: ENOENT open error to occur when attempting to render a doT.js view?

Invoking Ajax Within Every Loop

Creating fresh texts by pairing the values in constants with variables

Techniques for utilizing ng-class to merge class attributes

Tips on identifying HTML email input validation using JavaScript?

"Why does the useEffect in Next.js fire each time I navigate to a new route

Tips for generating various series using dx-Chartjs

Adding dots between page numbers when using ReactJS/Javascript Pagination can be achieved by implementing a specific method

Obtaining the value of a checkbox with React

What is the process for retrieving values from tags, such as text, contained within another tag? Specifically, how can you access the value of an h1 tag that is inside a p tag?

Snapshots in AngularJS SEO with PhantomJS can be created either before or during the crawling process

Node.js and TestCafe encountered a critical error: Inefficient mark-compacts were performed near the heap limit, resulting in an allocation failure. The JavaScript heap ran

The baffling quirks of variables within a Jquery loop

Inject the content loaded from the server into a div element, and insert that div at the

Looking to bring in a non-ES6 library into VueJS without using export statements

Include chosen select option in Jquery form submission

Direct your attention to the div element using ng-click