By the way, you can also find this code on github here.
You ca see that in this code there is a whole lot of "element(by." code, and then making any changing to your scss files may mean one or more epic find/replace's need to be done. It's just straight up duplication really, and changing this code to use POM allows you to refactor it away.
In the page object model pattern, you still have a .spec.js file that is a describe full of it's with some beforeEach's just like any other test, but here you now have an addition .po.js file that sets common DOM selection to variable of one a single "page object". Since Protractor runs on node.js we can make use of require to pull in this page object to our .spec.js class in the beforeEach function. Here's how it might look:
Withe POM setup changes to the css require only one change (per style changed) in the .po.js file and no changes to the spec file. It also "lightens up" the spec file by taking out the DOM selection code with all its annoying parentheses. Learn to love the page object model for Protractor testing. It'll serve you well!
The posts on this site are written and maintained by Jim Lynch. About Jim...