Implement the Page Object Pattern with promise in Protractor for efficient automation testing

I am working with two classes named:

LayerWrapper
Layer

These classes are utilized as page objects.

I am looking to revamp the following method:

export class LayerPanel {
    public static layers = element.all(by.automationId('layer'));

    public static findLayerByName(layerName: string): Promise<boolean> {
        return this.layers.filter((elem) => {
            return elem.getText().then(text => {
                return text === layerName;
            });
        }).first().then(this.OK, this.Failed);
     }

    private static OK() {
        return new Promise<true>();
    }

    private static Failed {
        console.log('not found');
    }
}

I aim to refactor it in a way that it returns a Layer page object:

public static findLayerByName(layerName: string): Promise<Layer> {
    return this.layers.filter((elem) => {
        return elem.getText().then(text => {
            return text === layerName;
        });
    }).first().then(this.OK, this.Failed);
}

private static OK() {
    return new Promise<Layer>();
}

It seems like a viable solution, but I wonder if there is a better approach for accomplishing this task?

Answer №1

Implementing an object function is a recommended approach to declare all page functions and methods within it. By executing module.exports=new PageName(), you can easily send a page(Layer) object. Below demonstrates the code implementation:

var LayerPanel = function(){

  this.layers = element.all(by.automationId('layer'));

  this.findLayerByName = function(layerName){
               return this.layers.filter((elem) => {
                  return elem.getText().then(text => {
                          return text === layerName;
                     });
   }).first();
 };

 this.OK = function(){
    return new Promise<true>();
   }

 this.Failed = function() {
  console.log('not found');
   }    
};

module.exports = new LayerPanel();

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

"Using jQuery to prevent propagation from interfering with an ajax GET request

I'm facing an issue with a table that has clickable rows and ajax links in the rightmost column. Whenever I click on the link within a row, the row's click event is triggered as well. To prevent the event propagation, I tried using stopPropagati ...

What is the solution for fixing the "type object does not contain property" error in Angular?

Within my application, there is a parent component that houses a list of objects representing various fruits. When a user clicks on a fruit, its data is passed to the child component for display as detailed information. <app-details ...

What is the best way to change an HTML class using PHP?

I'm currently facing a challenge with my "Newsletter Subscription Form". I rely on MailChimp for sending out newsletters and have successfully set up a custom PHP file to redirect visitors after they enter their email. Here's the step-by-step pr ...

HTML5 input placeholder adapts its size and position dynamically as data is being

During my interaction with the input fields on my bank's website, I noticed that the placeholder text undergoes a unique transformation. It shrinks in size and moves to the upper-left corner of the input field while I am entering information. Unlike t ...

Unlocking the potential of Vue within shadow dom environments

I am facing an issue with a shadow DOM that includes the root element and a Vue component. <template> <div class="container"> <div id="app"></div> </div> <script src="http://my-site.com/app/js/vue-compo ...

Using NextJS to pass a parameter to an onClick function

I've been using the react-simple-star-rating package in this sample code. However, I'm facing an issue: Within my trains parameter, there is a variable id that I would like to pass to the handleRating function using onClick, but I can't see ...

What is the best way to refresh NGRX data?

There are two models in a one-to-many relationship: export interface GroupModel { id: number; name: string; userIds?: number[]; } export interface UserModel { id: number; name: string; groupId?: number; } An issue arises when updating either m ...

Calling a function within another function is not allowed in Typescript

Essentially, I have an Angular Web Page that uploads a file to the server via a POST request, which is then received by my NodeJS app. The issue arises when attempting to retrieve the file path in subirArchivo() and pass it to a function called InsertaPer ...

Guide to deploying a React application that utilizes Node/Express for server calls in conjunction with IIS

My React application is designed to make calls to a server.js file that includes requests for data from a database using queries (specifically MSSQL). The server.js file looks like this: var express = require('express'); var app = express(); var ...

Is it possible to replicate a type in TypeScript using echo?

Is there any equivalent in TypeScript to the following code snippet? type TypeA = { x: number }; printType(TypeA); I have found a method that consistently enables TypeScript to provide a type description. const y = { x: 1, z: 'hello', }; ...

The Node Express.js app is functioning properly when run locally, but displays the error "Cannot GET /" when running in a Docker container

My Node application has an Express.js server defined like this: const express = require('express') const SignRequest = require('./SignRequest/lambda/index.js') const VerifyResponse = require('./VerifyResponse/lambda/index.js') ...

Generating a constantly evolving 3D model and keeping it current within a web browser

My website already has a large user base, and I am looking to create a 3D visual representation of data on one of the pages. This model needs to be easily updatable based on each user's database information (imagine a square board with a ball whose po ...

What is the best way to refresh or render a list in a React application?

While attempting to update the calendar days by using useState, I encountered a "too many re-renders" error. Even though the list was updated correctly, the component did not render on the screen as expected. I am struggling with figuring out how to update ...

The quiet harmony of FeathersJS and Socket.io as they attentively listen to events is

I've been working hard to get everything set up and running smoothly, but it seems like I'm stuck on the last piece of the puzzle. Despite following the documentation closely, I can't seem to figure out what I'm missing. Here is the @an ...

After adding a new class, NextJS fails to style the div appropriately

Currently, I am working on the front-end using the NextJS framework. When a user clicks a specific button, a class is supposed to be added to a particular div which will then change the style of the div based on unique styles defined in my CSS file. The o ...

Utilize JavaScript to parse and retrieve specific data from an SVG file in XML format

I am attempting to retrieve an svg file using jquery or javascript. Here is an example of the svg code: <svg width="111" height="123" xmlns="http://www.w3.org/2000/svg"> <g> <title>Layer 1</title> <rect fill="#ffffff" strok ...

Experimenting with code within a window event listener function

I have a component in my AngularJS application that is functioning correctly. However, when it comes to test coverage, everything after the 'window.addEventListener('message',' part is not being covered. Should I create a mock object f ...

When trying to gather multiple parameters using @Param in a NestJS controller, the retrieved values turn out

Can someone help me understand why I am struggling to retrieve parameters using the @Param() decorators in my NestJS controller? These decorators are defined in both the @Controller() decorator argument and the @Get() argument. I am relatively new to Nest ...

Express POST request body is required

I am starting to learn nodejs and express, and while reviewing some code I found this interesting snippet. Can someone please explain what it means and how I can send a POST request to it using cURL? There are no specified data fields. app.post('/&apo ...

Tips on refreshing a div using jQuery while maintaining the functionality of addEventListener

Hi, I am facing an issue with updating the "div" element. The refresh works fine, but after refreshing when I try to click on the updated "div", the addEventListener in my JavaScript code does not seem to work anymore. Can someone please explain why this i ...