How can we effectively create a table page object in Protractor that can handle various table selectors?

Recently, I have been delving into writing e2e tests in Protractor using page objects with JavaScript/Node.js. After reading numerous Stack Overflow posts and Julie's pages, as well as studying ProtractorPageObjects, I've come across an issue.

All the tables within the application follow the same structure, with the only difference being the attribute data-row-type, which can have one of 10 possible values like 'job', 'node', 'rack', etc...

I could simply pass the string to a method and switch within the method to construct the correct selector. However, based on comments from ProTractorPageObjects, I am hesitant to write the code in that manner. Is there a way to avoid passing in the string and create such a method without doing so?

In chapter 5 of ProTractorPageObjects, the columns.js file discourages using a pattern where a string is passed in to determine what is being sought.

For instance:

<div id="ee54a74e-17b8-4380-bbd8-2a5087bad7c9" class="tableRow escale-table-row-selected" data-row-type="ipAddress" data-qa-row-number="1">
            <div class="tableCell">
                <span class=""></span>                    ips-172-20-143-20-21
            </div>
            <div class="tableCell">
                <span class=""></span>                    UP
            </div>
            <div class="tableCell">
                <span class=""></span>                    Yes
            </div>

...

Another Table:

<div id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9" class="tableRow escale-table-row-selected" data-row-type="fileSystem" data-qa-row-number="0">
            <div class="tableCell">
                <span class=""></span>                    card-view<div><span class="fa fa-square success fileSystemIndicator"></span><span id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9-share" class="fa fa-square fileSystemIndicator success"></span><span id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9-accessRule" class="fa fa-square fileSystemIndicator success"></span></div>
            </div>
            <div class="tableCell">
                <span class=""></span>                    UP
            </div>
            <div class="tableCell">
                <span class=""></span>                    Yes
            </div>
 ......
javascriptseleniumprotractorend-to-endpageobjects

Answer №1

If you want to create a selector based on a string value that is passed into a method, it's totally fine. You can use this string value to match the data-row-type attribute of a div element. The data-row-type attribute is data-oriented and serves as a unique identifier for page blocks, unlike attributes like the style, which are more UI-focused and not ideal for locators.

Here's an example of how you can implement this:

function getTable (tableType) {
    return element(by.css("div[data-row-type='" + tableType + "']"));
}

And here's how you can use this function:

getTable("ipAddress");
getTable("fileSystem");

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

Node.js encountered an error: TypeError - req.end does not have a function

Encountering an error stating that req.end is not a function, even though it works elsewhere in the code. Upon researching, some sources suggest that the global req variable might have been misplaced or lost. However, I haven't used any other variabl ...

javascriptnode.jsexpresspost

Updating HTML Pages with Dynamic Content

Dealing with a massive project consisting of 50,000 pages (20,000 aspx forms, 10,000 asp forms, and 10,000 html pages) can be overwhelming. With only 2 days to complete the task of adding content after the body tag on all pages, I am seeking advice on ho ...

javascriptjqueryhtml

Transferring PHP variable to Javascript at a defined junction

My challenge involves passing a PHP variable to Javascript at a specific point in the code. The issue I am facing is that as the PHP code progresses, the variable I need undergoes changes. Although one option would be to extract the PHP variable when the p ...

phpjavascriptvariables

How can I resolve the issue of a lengthy link spanning two lines in Internet Explorer, while displaying correctly in other browsers on a Bootstrap navigation

Currently in the process of developing a responsive website with Bootstrap. The navigation buttons at the top are displaying correctly in Chrome, Safari, and Firefox, but in IE, the button labeled "Public Consultation" is wrapping onto two lines. I suspec ...

javascriptjqueryhtmlcsstwitter-bootstrap

A guide to setting an href using variable values in jQuery through manual methods

I have a datepicker set up where each day, month, and year is stored in a variable. I then display this information in the desired format. Below is the jQuery code: jQuery(document).ready( function($){ alert('alert function'); var txtFr ...

javascriptjquery

The dropdown menu in AngularJS is unable to retrieve the selected index

Presently, I have a dropdown menu: <select class="form-control" name="timeSlot" ng-model="user.dateTimeSlot" ng-change="dateTimeChanged(user.dateTimeSlot)" ng-blur="blur29=true" required style="float: none; margin: 0 auto;"> ...

javascriptjqueryangularjs

How can I determine in JavaScript if the Backspace key is being long pressed on iOS or Android devices?

In the process of developing a web application using Vue.js, I encountered an issue with detecting long presses of the Backspace key on desktop keyboards (Windows PCs specifically). On desktop, the event triggers multiple times as long as the Backspace key ...

javascriptvue.js

convert the datatype of JSON values in JavaScript

I am facing an issue with my JSON object which contains timestamp values in string format. Here is a snippet of the data: var json = [{ "Time": "2017-08-17 16:35:28.000", "Value": "3.85" }, { "Time": ...

javascriptjsonhighcharts

Changing the event when a class is active in Vue3

Question I am looking for a way to trigger an event when the 'active' class is added to an element. How can I achieve this? I believe this could potentially be accomplished using a watcher method, but I am unsure how to watch for the applicatio ...

javascripthtmlvue.jsvuejs3

Unable to transform object into a primitive value using imported JSON data

I am currently working on creating a Vuetify component dynamically within a Nuxt project, as discussed in this Stack Overflow thread (Using different text values with Vuetify component). To achieve this, I am importing and iterating through JSON data store ...

javascriptjsonvue.jsvuetify.jsnuxt.js

Encountering NoSuchElementException error in Selenium WebDriver despite element's presence

I am having trouble clicking on a drop down box in my application. The Xpath I am using is: //*[@id='sel2O5_chzn']/a. However, when I attempt to click on it, I encounter a NoSuchElementException even though the element is present in the applicati ...

javaseleniumwebdriver

Tips on employing the sendkeys function in selenium webdriverjs through promise chaining

Here is the coding snippet: driver.get(url).then(function(){ txtFnn = driver.findElement(webdriver.By.xpath(xpath)); return txtFnn; }).then(function(){ txtFnn.sendkeys("12345678"); }) Issue: An error occurred: Typ ...

javascriptseleniumpromisewebdriverjs

How can I align Javascript output vertically in the middle?

I am currently facing an issue with a JavaScript clock displaying in a narrow frame: <!DOCTYPE html> <HTML> <HEAD> <TITLE>Untitled</TITLE> <SCRIPT> function checkTime(i) { if (i < 10) { ...

javascripthtmlcssvertical-alignment

Execute a JavaScript code prior to sending a response directly from the ASP.NET code behind

On my .aspx page, I have the following code which prevents the page from responding without confirmation: <script type="text/javascript"> window.onbeforeunload = confirmExit; function confirmExit() { return 'Are you sure you wan ...

javascriptasp.netresponse.redirect

Iterate over a collection of HTML elements to assign a specific class to one element and a different class to the remaining elements

Forgive me if this is a silly question, but I have a function named selectFace(face); The idea is that when an item is clicked, it should add one class to that item and another class to all the other items. This is what I currently have: HTML <div c ...

javascriptangulartypescript

How can I securely store passwords for web scraping with Puppeteer to ensure maximum safety?

Looking for advice on scraping a website that requires login. The current code saves username and password in a config JSON file, which poses a security risk if the file is accessed by unauthorized individuals. Is there a more secure method, such as encr ...

javascriptnode.jsencryptionpuppeteer

What is the best way to route a localpath to a different page including parameters in Nuxt Js?

Hello, I am facing an issue where I need to pass parameters in the URL to another page in NuxtJs props: { idPending: { type: Number, required: true } }, methods: { fetchpage() { const orderId = this.idPending; this.$rou ...

javascriptvue.jsnuxt.js

What is the best way to directly send a message from a panel to a page-mod's content script?

When working with a code snippet in a Firefox addon like the one below: var pagemod = PageMod({ include: ['*'], contentScriptFile: [data.url('content.js')] }); panel = require("sdk/panel").Panel({ width: 322, height: 427, ...

javascriptfirefox-addon-sdk

What is the best way to split an input field into distinct fields for display on the screen?

Take a look at this image: https://i.stack.imgur.com/LoVqe.png I am interested in creating a design similar to the one shown in the image, where a 4 digit one-time password (OTP) is entered by the user. Currently, I have achieved this by using 4 separate ...

javascripthtmlcsstwitter-bootstrap

How to properly display date format in Node.js when using EJS templates with MySQL

When retrieving dates from the database, I am looking to break them down into two separate numbers. 7:00-8:00 //array[0]=7:00 and array[1]=8:00 9:00-9:30 14:30-15:00 Below is my code, but it is returning NaN NaN: <% time_slots.forEach((timeslot ...

javascriptnode.jsexpressejs