Page Objects Design: Is there a Javascript equivalent to Ruby gem "site_prism"

Question

I'd like to know if there is a framework in Javascript (NodeJS) for Protractor which supports a clean way to define the Page Object Elements on a Page Object as site_prism does. I've already checked astrolabe but doesn't quite fit the purpose.

This is how Page Objects are declarative defined with site_prism

class Home < SitePrism::Page
  set_url "/index.htm"
  set_url_matcher /google.com\/?/
  element :search_field, "input[name='q']"
  element :search_button, "button[name='btnK']"
  elements :footer_links, "#footer a"
  section :menu, MenuSection, "#gbx3"
end

class MenuSection < SitePrism::Section
  element :search, "a.search"
  element :images, "a.image-search"
  element :maps, "a.map-search"
end

Does anyone know or has developed a solution like above but for Protractor. Maybe someone is using a custom framework internally, are you willing to open source it?

Regarding astrolabe it lacks collections support and I'm looking for a more declarative syntax; instead of

username: { get: function() { return this.findElement(this.by.input('username')); },

I was expecting something more declarative like:

username: By.input('username'),

Could dig further on missing astrolabe features here but my question is not about astrolabe per se but as whether there is a better site_prism equivalent for JS.

Note: migrating the question from Software Quality Assurance & Testing since hasn't received enough attention there.

Hey Leo, I've not seen anything better either. I've been rolling my own: https://github.com/qualityshepherd/protractor_example but I'm also curious what others are using... What are you using currently? — Brine, Mar 23 '15 at 02:56
Hey @Brine took a look at your repo, can't find a framework there on top of Protractor, just a simple & convenient Page Objects implementation pattern, did you take a look at site_prism features? It's a pretty extensive list that starts [here](https://github.com/natritmeyer/site_prism#parameterized-urls). — Leo Gallucci, Mar 23 '15 at 08:27
And yes, I've done some effort on setting up a "A Page Object Model DSL for Protractor" but didn't complete all site_prism features and didn't open source it.. yet. Need to discuss with my colleagues what's the best approach and first make sure this effort has not being done by someone else. — Leo Gallucci, Mar 23 '15 at 08:30
Yeah, I've not added an actual framework, just solidifying a pattern. I only glanced at site_prism... I'll take a closer look soon. But I'm in the same boat... I would like something akin to Geb, which is a great framework on top of Webdriver, written in Groovy. — Brine, Mar 23 '15 at 14:40

score 0 · Answer 1 · answered Jun 12 '15 at 15:38

I use this pattern (a little cleaner):

'use strict'
exports.MyClassPage = function() {

  var textName = element(by.id("name"));
  var tabUsers = element.all(by.repeater("user in users"));

  this.setTxtName = function(name) {
    return textName.sendKeys(name);
  };
}

score 0 · Answer 2 · answered Nov 10 '19 at 07:38

I'm using this npm package for declaring page object selectors. For example the site_prism code would look like:

const po = require('@vitalets/page-object');

const menuSection = exports.menuSection = po`.menu`;
menuSection.search = po`a.search`;
menuSection.images = po`a.image-search`;
menuSection.maps = po`a.map-search`;

Page Objects Design: Is there a Javascript equivalent to Ruby gem "site_prism"

2 Answers2