Tips for fixing a type error in javascript/cypress

While learning cypress and javascript, I encountered this type error:

 TypeError: _testElements.default.selectionRow is not a function

I have thoroughly reviewed the documentation for cypress but cannot seem to find any errors in my code. I'm hoping that someone experienced with javascript and cypress can shed some light on why this error message is appearing.

Code:

Firstly, here's the class where the element is obtained:

class testElements {

    selectionRow() {
        return cy.get('.selectionRow')
     }

    typeButton() {
        return cy.get('.typeButton')
     }
  
}

export default testElements

And here's the portion of the code that is causing the error:

import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";
import testElements from '../elements/testElements';

When ("User selects a row", () => {
  testElements.selectionRow()
  .within(() => {
    testElements.typeButton().not(".disabled");
  })
})

Answer №1

It is recommended that you start by creating an instance of the class in order to utilize its methods:

const elementTest = new testElements();
elementTest.selectionRow()

Additionally, I recommend following the convention of using uppercase names for classes, such as TestElements.

If you prefer not to instantiate the class, you can take advantage of static methods

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

There is an abundance of brief PHP documents

After conducting some initial research, I have realized that I need more information on the topic at hand. My interactive website relies on ajax calls to retrieve data from the server. Authenticated users engage with this data through various actions, whic ...

Utilizing Jquery functions within the AngularJS framework

Utilizing Uikit along with its pagination feature, I am attempting to implement this function for changing the page: $('[data-uk-pagination]').on('uk-select-page', function(e, pageIndex){ console.log("page " + pageIndex); ...

Challenges arise in compiling JS with webpack due to spread syntax complications within an npm package

In my code, I have a class called AnalyticsService with methods for logging analytics events to Google Analytics and Kentico. When trying to reuse this code in different projects by importing it from an npm package, I encountered a compile error related to ...

Wildcard routes for publicly accessible files

I have a collection of "widgets" with both client and server-side .coffee files (client representing Backbone.js model/view and server corresponding to ExpressJS routes), all organized within the main project directory: my-node-expressjs3-project/ src/ ...

Issue with displaying dates correctly when retrieving data from an external CSV using Highcharts (Highstock)

I have been struggling for several days to integrate Highstock with an external CSV file. Initially, the problem was that the imported data was sorted in "descending" order while Highcharts required it to be sorted in "ascending" order. After discovering a ...

Leveraging the power of Google Closure Templates alongside the versatility of

We are embarking on developing an application using JavaScript and HTML5 that will utilize a rest API to access server resources, leveraging the power and convenience of jQuery which our development team is already proficient in. Our goal is to make this a ...

Discover the process of connecting a REST controller with AngularJS and Spring

I have a list of file paths stored in an array within the scope variable of an AngularJS Controller. My goal is to properly map these file paths to a Java REST controller for further processing. When I pass it as "/ABC/Scope-Variable," it successfully ma ...

Exploring the use of $ in the outcome of a json for jQuery autocomplete functionality

Trying to implement auto complete functionality. Here is the URL I need to read JSON from: http://openscan.addi.dk/2.0/?action=openScan&field=phrase.title&lower=hest&limit=10&outputType=json After receiving the result, I'm attempting ...

Modify the colors of the chartist fill and stroke using JavaScript

Struggling to dynamically set colors in a chartist graph using JavaScript. How can custom colors be applied through JS? The attempted method below is not successfully changing the color for the showArea in the chartist graph. <!doctype html> <htm ...

Utilizing the Jquery datetimepicker (xdsoft) to dynamically limit the date range between two inline datepickers

Check out the Jquery datepicker plugin available here: We previously had a setup where we could dynamically restrict the date range with two datepickers when text inputs are clicked on. However, the client now wants the calendars to be displayed inline, c ...

Possible solutions for AngularJS using ng- tags

I absolutely love incorporating AngularJs into my Multiple Pages Laravel Application. However, using the Laravel Blade Template Engine has made me reconsider adding Angular Tags to clutter my blade templates. For instance <div ng-controller="TodoCont ...

Tips for guiding users to a different page based on whether a linkid is associated with a specific Cat

I created this script, but I am facing an issue with the redirect. Can someone please assist me as soon as possible? <?php include('config.php'); $number = intval($_POST['catid']); $query = mysql_query("SELECT * FROM sound ...

Tips on displaying a particular JSON attribute?

After starting with a JSON string, attempting to convert it into a JSON object and then trying to print a specific field (such as firstName), I am getting undefined. What could be the issue here? Thank you for your help! var string = '{"firstName ...

Exploring the Express problem with AWS SNS web service subscriptions using a Sinatra case study

I'm currently working on developing an auto-subscription API that sends back a token via POST. While I have successfully implemented this in Sinatra (rendering the POSTed JSON from AWS), I'm facing challenges with Express. I believe it's jus ...

Retrieving a variable within a try-catch statement

I am trying to implement a function: function collect_user_balance() { userBalance = 0; try { var args = { param: 'name'; }; mymodule_get_service({ data: JSON.stringify(args), s ...

AngularJS module dependencies configuration functions smoothly during initialization

The structure of my modules looks like this: angular.module('mainModule',["cityModule", "countryModule"]); angular.module('mapModule',[]); angular.module('cityModule',["mapModule"]); angular.module('countryModule',[ ...

Retrieving the current value of the selected option using JQuery

I am working on a feature where I have different quantities in selects after each button click. <button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button1</button> <select id="quantity1" class="ml- ...

Issues with Kendo Grid showing incomplete data and columns

Having trouble populating a kendo grid with column titles, as some columns appear empty despite having data when checked in the console log. $(function () { $("#uploadBtn").click(function () { var url = window.rootUrl + 'Upload/UploadM ...

The console is throwing an error: ReferenceError: The variable $ has not been defined

I am having issues when trying to dynamically add a div upon selecting a checkbox in a Django template. The error message Uncaught ReferenceError: $ is not defined keeps appearing in the console. Here is the template code: {% extends 'base_layout.htm ...

Waiting for a function to finish within a nested function in JavaScript

I'm facing a simple issue that I'm struggling to solve. I have two functions and an object in JavaScript (Node.js) structured like this: var auxmap = new Map(); function one() { for(var i...) { //initialize the map and do something tw ...