Is there a comparable Javascript alternative to the Ruby gem "site_prism" for Page Objects design?

Is there a JavaScript framework for Protractor in NodeJS that provides a clean way to define Page Object Elements similar to site_prism? I've explored astrolabe but it doesn't quite meet the requirements.

This is an example of how Page Objects are declaratively 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

Has anyone developed or knows of a solution similar to this for Protractor? Perhaps using a custom internal framework that could be open sourced?

In comparison to astrolabe, I am looking for a more declarative syntax and collections support. For example, instead of:

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

I would prefer something like:

username: By.input('username'),

Although further details about the shortcomings of astrolabe can be discussed, my main question is whether there is a better equivalent to site_prism available for JavaScript.

Note: This question has been migrated from Software Quality Assurance & Testing due to lack of attention.

Answer №1

Here is a revised version of the code snippet:

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

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

  this.setInputName = function(name) {
    return inputName.sendKeys(name);
  };
}

Answer №2

I rely on a helpful npm package to define selectors for my page objects. In the case of using the site_prism library, my code would be structured like this:

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

const headerSection = exports.headerSection = po`.header`;
headerSection.title = po`h1.title`;
headerSection.subtitle = po`h2.subtitle`;
headerSection.navLinks = po`nav.links`;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The building process of Ember encountered an error due to a problem with the broccoli builder

I'm currently working on an Ember project and facing an issue while trying to upgrade the version from 2.8 to 3.5.0. After changing the version and some dependencies, I encountered the following error : Error stack Even after attempting to resolve i ...

Removing the element generated by Angular from the DOM

I've hit a roadblock with this issue. Here is the delete function in my mainController. $scope.delete = function($posts) { $http.delete('/api/posts/' + $posts._id) .success(function(data) { // remove element from DOM ...

Show a compact graphic in the upper-right-hand corner

Hey, I have this interesting idea but CSS isn't my strong suit. Any thoughts on how to achieve it? I'm looking to create a new class that, when applied to an item (like a div), displays a small clickable pre-defined image in the Top-Right corne ...

react validation for dropdown, react-datepicker, and hour input at intermittent intervals

I have integrated the following packages into my project :- react-datepicker library for selecting from time and to time date validation with date-fns, moment.js, additional validations using jQuery and lodash libraries/packages If you want to view my pr ...

Protractor quickly launches and closes the Chrome browser without completing the entire scenario

In order to test my application using protractor, I created a scenario. The application begins with a non-angular login page and then progresses to an angular page after logging in. Here is the javascript code snippet that was utilized: var chai = requir ...

How can I retrieve the OptionID value upon click?

How can I retrieve the value of OptionID when the Add button (.plus-link) is clicked? Each list item may contain a dropdown select menu or not. <ul> <li> <div class="menux"> <div class="text-block"> ...

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

Using numerical symbols in multiple tooltips to convert dates into timestamps in the R programming language

When using the highcharter package in R, I am attempting to plot multiple line charts simultaneously. The challenge arises when dealing with different datasets containing values ranging from millions to billions, requiring a numeric symbols formatter imple ...

Exploring the concept of inheritance in JavaScript and Angular programming

Currently, I am working on a project called "hello world" and it involves two HTML pages named "configuration.html" and "add configuration.html". Each page has its own controller defined as follows: angular.module('MissionControlApp').controller ...

Sort by characteristics of embedded array - Knockout

I'm struggling with filtering a nested array using Knockout. My goal is to filter the array by both 'tag-names' and 'name'. For example, searching for 'whal' should display all objects that contain a tag with that name ...

Automatically Switch Font Colors to Red and Green

I am looking to automate the process of changing multiple textbox colors based on the class property. <input type="text" Class="ChangeColor" /> <input type="text" Class="ChangeColor" /> <input type=& ...

After running javascript, Elements do not retain any values

I have encountered an issue with two button click events - one is in Javascript and the other in VB. The first button (Javascript) retrieves values from various controls like textboxes and dropdown lists, while the second button (VB) saves these values to ...

Querying a Mongoose nested schema

I've created the following schema: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const ProjectSchema = require('./project.js') const ClientManagerSchema = new Schema({ name : { type : String, required ...

Exploring the Benefits of Using a Try-Catch Block for Creating an Audio Element

While reviewing the Jbox plugin code, specifically focusing on the audio addition part, I encountered the following snippet of code: jBox.prototype.audio = function(options) { options || (options = {}); jBox._audio || (jBox._audio = {}); // ...

Activating Dynamic Functionality through JavaScript Input

I am currently working on a form in Apex 4.1 where I have an address lookup field that utilizes JavaScript to connect to an address database and populate separate fields with the address details (address1, address2, town, postcode). On the same page, I ha ...

Showing a text value from a Github Gist on a Hugo website

I seem to be struggling with a seemingly simple task and I can't figure out what I'm missing. Any assistance would be greatly appreciated. I am working on generating a static site using Hugo. On one of my pages, I want to implement a progress ba ...

The rule 'react-hooks/exhaustive-deps' does not have a defined definition

I received an eslint error message after inserting // eslint-disable-next-line react-hooks/exhaustive-deps into my code. 8:14 error Rule 'react-hooks/exhaustive-deps' definition not found I tried to resolve this issue by referring to this p ...

Attempting to retrieve the current time using JavaSscript

const currentTime = new Date(); const hours = now.getHours(); Console.log(hours); This block of code is returning an error message... Uncaught ReferenceError: now is not defined Please note that this snippet is written in JavaScript. I attempted to us ...

retrieve the value of a textarea element from an HTML table

Is there a way to extract data from a nested table's textarea using the row index? I attempted the following code snippet but it did not work. var note = document.getElementById($index).cells[3]; var y = document.getElementsByTagName("textarea").valu ...

Using Python to interact with Selenium to click buttons that share the same name and ID

I am in need of an application that can click on the correct button when a specific option is available. I have identified a value that will change when the other option is not present. <form name="uniforma_NE" id="uniforma_NE" .=&qu ...