Protractor custom locator: by.marker
Protractor makes it very easy to locate a specific element in your webapp for testing by writing CSS selectors. However, by using this overmuch, you’re locking your integration tests to the current structure of your app, making the tests fragile. Here’s a more robust alternative.
I’ve written an extensive Protractor suite for one of my projects and ran into
this problem. At first I sought to solve this by using only classnames with a
given prefix to locate elements in Protractor (
e2e-something in this case).
Later on I started using an attribute rather than a class, which seemed neater
to me since this information has nothing to do with CSS or scripting:
<button e2e="my-submit-button">. When I settled on this convention, I also
wrote a custom Protractor matcher so that I can locate elements in my Protractor
tests simply as
element(by.marker("my-submit-button")). Here it is, written in
TypeScript (to port to JS just remove the typing information). I’ve also added
a TS declaration for the use of this locator so you don’t get an error when you