example of custom locator

[samvloeberghs]

[DennisJaamann]

• Add custom locator

protractor.By.addLocator('e2eId', function (toState, opt_parentElement) {
        var using = opt_parentElement || document;
        var possibleAnchors = using.querySelectorAll('*[ta-e2e-id="' + toState +'"]');
        var result = null;
       if (possibleAnchors.length === 1) {
            result = possibleAnchors[0];
        } else {
            result = possibleAnchors;
        }

        return result;
    });

• Register in protractor.conf
• Update htmls to have e2e-id

[samvloeberghs]

small suggestion:

protractor.By.addLocator('e2eId', (toState, opt_parentElement) => {
       const using = opt_parentElement || document;
       const possibleAnchors = using.querySelectorAll('*[ta-e2e-id="' + toState +'"]');
       let result = null;
       if (possibleAnchors.length === 1) {
            result = possibleAnchors[0];
        } else  if (possibleAnchors.length > 1) {
            result = possibleAnchors;
        }

        return result;
    });

mind the else if statement

[sbley]

How do you register the locator in protractor.conf.js?

[samvloeberghs]

@sbley sorry this project is inactive and you probably already googled the answer. https://www.protractortest.org/#/api?view=ProtractorBy.prototype.addLocator

[sbley]

@samvloeberghs Thanks for the pointer. I have seen that before but tbh it leaves my question unanswered. I can't figure out where in protractor.conf.js I am supposed to put by.addLocator(..) to register it.

[samvloeberghs]

@sbley basically anywhere where you have access to by before you use the locator. For example in the onPrepare callback. See example here:

https://github.com/angular/protractor/blob/master/spec/withLoginConf.js

There might be better places, but that should work.

[sbley]

Thank you Sam, I will give it a try 👍

[sbley]

@samvloeberghs Do you also know a way to add the type definitions of the locator to TypeScript?

[sbley]

I can now answer this myself: Add it to the includes part of your tsconfig.e2e.json:

{
  "compilerOptions": { },
  "includes": ["./my-custom-locator.ts"]
}