ES6 class properties with undefined constant in Javascript

Currently, I am developing automated end-to-end tests using Protractor with Selenium. I have a class where I intend to store a property to improve the organization of my tests.

Below is the specific class:

export class Tab {
    constructor(job) {
      this._criterionList = [];
      this._job = job;
      this._JOBBASEPATH = element(by.css_sr('iris-app::sr #jobs'))
        .all(by.css_sr('::sr iris-job')).get(this.getIndex());

      this._ACTIONMENUBASEPATH = this._JOBBASEPATH
        .element(by.css_sr('::sr #header'))
        .element(by.css_sr('::sr iris-floating-menu'));

      this._JOBFOOTERBASEPATH = this._JOBBASEPATH
        .element(by.css_sr('::sr job-footer'));

      this._RESULTBASEPATH = this._JOBBASEPATH
      .element(by.css_sr('::sr #result'));
    }
}

However, an issue arises when invoking one of the methods within this same class:

//Method in Tab class, _JOBBASEPATH is undefined
getQueryConditionButton(){
  return this._JOBBASEPATH.element(by.css_sr('::sr #header')).element(by.css_sr('::sr #condition'));
}
// _JOBBASEPATH is undefined
tab.getQueryConditionButton().click();

Upon debugging, I receive the error message "No element found using locator: by.css_sr("::sr #header")", I attempted initiating this._JOBBASEPATH.click() and discovered that _JOBBASEPATH is undefined.

I came up with workarounds like implementing getters/setters or duplicated methods to achieve the same functionality but I am determined to comprehend the reason behind this issue, especially considering that it works flawlessly in other classes such as the following:

export class DetailField {
    constructor(tab) {
        this._tab = tab;
        this._displayFieldList = [];
        this._basePath = element(by.css_sr('iris-app::sr #jobs'))
         .all(by.css_sr('::sr iris-job')).get(this._tab.getIndex())
         .element(by.css_sr('::sr #customizer'))
         .element(by.css_sr('::sr #detailField'));
    }
}

//Method in DetailField class functioning perfectly
getLoadButton(){
    return this._basePath.element(by.css_sr('::sr #loadButton'));
}
//works
getLoadButton().click();

Important Note: the call getIndex() returns the same value for both classes: 0 Thank you in advance!

Answer №1

Consider changing this.getIndex() to 0:

this._JOBBASEPATH = element(by.css_sr('iris-app::sr #jobs'))
       .all(by.css_sr('::sr iris-job'))
       .get(0);

If the code above works, it means the problem lies with this.getIndex().

If it does not work, the issue may be with element(...).all(...), as it may not be finding any elements, causing get(0) to return undefined.

Manually check the locator to ensure it can find the element. If it can, consider adding some sleep time to wait for the page to fully load.

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

Rendering images in Next.js version 10

Just recently, Next.js version 10 was launched featuring the latest Image element, making it a great asset for websites that heavily rely on images! When I receive an HTML response from the server, it looks something like this: HTML = "<div> &l ...

Navigate through child windows [Utilizing the while.HasNext() method]

I am looking to transition from the parent window to the child window in Selenium without relying on an enhanced for loop. Currently, my code for switching between the parent and child windows is as follows: for(String handles : windows1) { w.switchTo ...

Checking email existence through remote jQuery validation

Utilizing the jQuery validator plugin, I am implementing an ajax function with a remote method to validate whether an email already exists in my database. However, I am encountering an error when making the ajax call within my validation function. "email ...

Selenium is having trouble selecting the drop down option because it is not visible

UPDATE: Changing the DEBUG setting in my Django configuration doesn't impact Selenium's ability to interact with elements. The issue persists regardless of the DEBUG value. I'm facing an issue when trying to choose an option from a dropdown ...

What is the best way to pass a variable value from a JavaScript function to a Python function within a Django framework

My goal is to use HTML and JavaScript to scan a QR code in nurse_home.html. I have successfully scanned and viewed the content of the QR code on the website, but I am facing an issue with POSTing the QR code output represented by <output type='POST ...

Showcase the link to the npm package within the Packages category on the GitHub repository

Exciting news - I just finished creating and releasing my very first npm package. https://i.sstatic.net/GL1Q6.png I'm eager to connect this package to my GitHub repository. When I look under packages, it says Publish your first package. However, I&a ...

Efficiently Encoding Still Image Data for NextJS

Currently, I am experimenting with a completely static method in my new Next.js v12 project. I am creating 5-6 data files to use with getStaticProps. Here is an example of one of the data file structures (they are all similar): import SqAshland1 from &apos ...

Creating a virtual reference in Mongoose that connects two ObjectIds

Is it possible to establish a virtual reference using a local ObjectId to a foreign ObjectId, or can it only be done with a local _id? I'm troubleshooting to determine if there's an issue causing this not to work as expected. const Post = new mo ...

Exploring JSON without taking into account letter case

Looking to conduct a case-insensitive search in a JSON file? Here's the JSON data you can work with: { "Data" : [ {"Name": "Widget", "Price": "25.00", "Quantity": "5" }, {"Name": "Thing", "Price": "15.00", "Quantity": "5" }, {"Nam ...

I'm facing an issue while attempting to fetch an API. I'm not certain what is lacking in my code, but the console is showing an error on

While troubleshooting my code, the console pointed out an error in line 15 of my javascript. However, I am having trouble identifying what exactly is causing the issue. The button I designed in HTML does not seem to be fetching the API facts as intended, ...

Is there a way to assign a null value to an empty material UI text field when submitting the form, rather than an empty string?

One issue I am facing is that the default value of the text field is zero, but when I submit the form, the value of the text field becomes an empty string instead. This is not the intended behavior as I want the value to remain zero in the end. How can I r ...

Guidelines for gauging browser efficiency within an application

Recently, I have been working on a Javascript function that automatically scrolls the page when the user drags an element close to the window's edge. The function is shown below in its simplified form: var scroll = function() { var scrollTop = $m ...

Submitting a PDF document to the server with PHP Laravel through AJAX

Struggling to send a PDF file via AJAX to my server for handling by a PHP script in a Laravel project. The file doesn't seem to be making it to the server. Despite receiving a 200 response in the network, the server is returning 'file not presen ...

Using JavaScript, post an image to imgur (API version 3) from a canvas

Currently, I am working on an amusing Chrome experiment called the Mustache Mirror! If you're interested, you can check it out here. I am aiming to incorporate the Imgur API V3 for uploading an image from the canvas to Imgur and displaying the link. U ...

Can you show me a way to use jQuery to delete several href links using their IDs at once?

Currently facing a challenge with removing multiple href links that share the same ID. Here is a snippet of my code: $('.delblk').click(function(e) { e.preventDefault(); var id = $(this).attr('id').substr(7); ...

Tips for updating JS and CSS links for static site deployment

As I develop my static site using HTML files served from a simple web server, I want to use local, non-minified versions of Javascript code and CSS files. However, when it comes time to deploy the site, I would like to refer to minified versions of these s ...

A loop in JavaScript/TypeScript that runs precisely once every minute

Here is a snippet of my code: async run(minutesToRun: number): Promise<void> { await authenticate(); await this.stock.fillArray(); await subscribeToInstrument(this, this.orderBookId); await subscribeToOrderbook(this, this.orderBookId ...

What is the best way to switch the site header in JavaScript or jQuery?

I have created a Bootstrap menu design and I am looking to add a sliding functionality to it. My goal is to hide the menu when scrolling down and display it when scrolling up (slide-down / slide-up). For implementing this feature, I plan to utilize jQuery ...

JavaScript error: Property 'includes' of undefined cannot be accessed

To verify the existence of data.objectId in the array msgArr, I am utilizing the following code snippet: var exists = msgArr.some(item => item.objectId === data.objectId); if(!exists){ msgArr.push({"objectId":data.objectId,"latLont":data.latLont," ...

Troubleshooting problems with connecting Express JS and MongoDB

I've written a simple code to connect express js to mongodb, and I've installed both packages. However, I'm encountering an error. Can someone help me troubleshoot this? const express = require("express"); const app = express(); app.listen( ...