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

navigating through an array with a loop (for)

I created a basic phone book program where users can input a name and it will search an array of objects for the corresponding phone number. If the name is found, it will display the name and phone number. However, I am facing an issue where even though ...

javascriptarraysloops

Issue encountered - Attempting to provide an object as input parameter to puppeteer function was unsuccessful

Encountering an error when attempting to pass a simple object into an asynchronous function that utilizes puppeteer. The specific error message is: (node:4000) UnhandledPromiseRejectionWarning: Error: Evaluation failed: ReferenceError: userInfo is not def ...

javascriptnode.jserror-handlingasync-awaitpuppeteer

Leveraging conditional statements for dynamically computed Vue properties

In the Vue site I'm working on, there is a functional button that changes its state when clicked (from "pause" to "resume" and also changes colors). The button functionality itself works perfectly, but I am facing an issue in aligning it with another ...

javascriptvue.js

Expect a reply within the loop

One of my endpoints takes some time to generate data, and I have another endpoint to retrieve that generated data. I make the initial call using await, extract the ID from the response, and then keep calling the second endpoint until the status is not "Suc ...

javascriptreactjstypescriptasync-awaitaxios

Every change to the data in Nuxt.js triggers a form submission

This is my form: <template> <div class="flex flex-col mt-[5rem] gap-4 p-4 items-center max-w-4xl mx-auto"> <form id="inquiry" class="flex flex-col gap-4 w-full" @submit.prevent="submitHand ...

javascriptvue.jsnuxt.jsnuxt3.js

Exploring the magic of locating elements within a WebElement using Selenium WebDriver and xpath

Today, I encountered a challenge while working with multiple forms on a single page. During testing, I successfully identified the second form using the following code: WebElement form = getDriver().findElement(By.id("form2")); After locating the form, I ...

seleniumxpath

Design an element that stretches across two navigation bars

Currently, I have implemented two Navbars on my website as shown in the image below: https://i.stack.imgur.com/4QmyW.png I am now looking to include a banner that clearly indicates that this site is a test site. In addition, I would like to incorporate a ...

javascriptreactjstypescriptreact-bootstrap

Searching the JSON file by its value using Waterline

I am struggling with locating model instances based on the nested address attribute in one of my models. attributes: { address: { type: 'json' } } I have attempted various queries to find model instances located in the same city: Model ...

javascriptjsonsails.jswaterline

React doesn't have file upload configured to update the state

I am working on integrating a file upload button that sends data to an API. To ensure only the button triggers the upload dialog and not the input field, I have set it up this way. Issue: The File is not being saved to state, preventing me from using a ...

javascriptreactjstypescriptfile-upload

Attempting to utilize ng-click on an element that has been added using element.append() in the postlink phase?

I have been working on customizing a particular angular library to incorporate some new features. https://github.com/southdesign/angular-coverflow/blob/master/coverflow.js As part of this process, I am looking to attach click events to the elements being g ...

javascriptangularjs

Comparison of Chrome's compatibility with Bootstrap and Edge

Firefox Safari I am facing an issue that seems obvious, but I am unable to pinpoint the exact cause. It just doesn't seem right for no apparent reason. is the website in question. I have tried various troubleshooting methods such as inspecting th ...

javascripthtmlcssfrontendbootstrap-5

What could be causing the show button to change its style every time I click it?

I'm a beginner in the world of JavaScript. I have been working on customizing the "show more" button and encountered an issue. I managed to add text and a down arrow below the button, but when I click it, another button labeled "I don't know how ...

javascriptcssbootstrap-5

Encountering the issue "net.serenitybdd.core.exceptions.SerenityManagedException: No session ID" when attempting to run the scripts

I was having success with my script until last week, however this week I suddenly received the following error. Can anyone provide guidance? net.serenitybdd.core.exceptions.SerenityManagedException: A runtime error occurred : No active session with ID b3 ...

javalinuxseleniumselenium-webdriverserenity-bdd

Vue: Choosing an option during the execution of setInterval

I'm facing an issue where I can't select an option while a setInterval function is running on the page. The main problem is that an option cannot be selected at the same time as the setInterval timer fires. let updateDelay = 100; var vueObj = ...

javascriptvue.jsvuejs2

Correctly executed $.Ajax and $.Post requests consistently yield errors when sent from C#

I'm struggling to create a cross-domain web API method in C# that will return valid jsonp to Javascript. Despite returning valid JSON data, I keep encountering failure messages when trying to debug with F12 dev tools or Firebug. Here is my current co ...

javascriptc#jqueryajaxjson

What is the best way to display JQuery mobile tap event information in real-time?

I am experiencing an issue in my code where the tap event is being triggered, but the array[i] value is printed as null. Whenever I click on any index, it always prints an empty string (" "). Why does it display null instead of the clicked value? I am see ...

javascriptjqueryhtmljquery-mobile

Viewing the XML response generated by a JavaScript file (SOAP Request) on the IIS server

My current setup involves utilizing a calendar system with an API accessible via SOAP requests on an IIS server. Initially, my approach was to create an HTML page and use JavaScript to display the SOAP request response. However, the response did not retur ...

javascriptphphtmlxmlsoap

Organizing a NodeJS module - properties and functions

I've been struggling to structure my NodeJS application with modules, and after hours of searching, I haven't found a definitive answer. Let's say I want to create a "user" module for creating new users in my code: var newUser = new User(); ...

javascriptnode.jsclosurescommonjs

Typescript declaration specifies the return type of function properties

I am currently working on fixing the Typescript declaration for youtube-dl-exec. This library has a default export that is a function with properties. Essentially, the default export returns a promise, but alternatively, you can use the exec() method which ...

javascripttypescripttypescript-declarations

Implementing multiple perspectives on a single webpage by keeping track of the browsing history with AngularJS and leveraging the

Within my AngularJS application, I have an about page that contains various sub-sections, all within the same template. My goal is to have each section accessible through its own unique URL that will automatically scroll down to the corresponding section i ...

javascriptangularjsangular-ui-router