This is more of a "code review" question but it is very SQA specific so posting it here.

There are two different menus on a page: "left" and "right" both containing "save" and "cancel" buttons with the same exact markup representation. To avoid repeating selectors (we have this lint rule enabled) this was written:

var DiffPage = function () {
    this.leftMenu = ".leftDiff_control" + " ";
    this.rightMenu = ".rightDiff_control" + " ";

    this.saveBtn = ".save__button .btn-primary";
    this.cancelBtn = ".save__button .btn-default";

    this.leftSaveBtn = element(by.css(this.leftMenu + this.saveBtn));
    this.rightSaveBtn = element(by.css(this.rightMenu + this.saveBtn));
    this.leftCancelBtn = element(by.css(this.leftMenu + this.cancelBtn));
    this.rightCancelBtn = element(by.css(this.rightMenu + this.cancelBtn));

I don't particularly like string-concatenating CSS selectors here and, also, think there is still repetition but on a different level. Is there a better way to address the problem?


I think I've just got that rubber-duck debugging effect and figured out one way to make it beautiful.

We just need to move the menu into its own page object and re-use:

var MenuPage = function (locator) {
    this.container = element(by.css(locator));

    this.saveBtn = this.container.element(by.css(".save__button .btn-primary"));
    this.cancelBtn = this.container.element(by.css(".save__button .btn-default"));

Then, we could have MenuPage pages defined as child page objects of the parent diff page:

var DiffPage = function () {
    this.leftMenu = new MenuPage(".leftDiff_control");
    this.rightMenu = new MenuPage(".rightDiff_control");

And then use it in a test like:

var diffPage = new DiffPage();


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.