how to assign selector to an object class in Cypress

by

I’m trying to assign the selector to one of my object classes by using cypress. but it doesn’t work for me. here is the error I got

stocksTradePage.getStocksSearch(…).getInputField is not a function

here are my classes.

stocksShare.js

const locators = {
  inputField: 'input',
};

class StocksSearch {
  getInputField() {
    return cy.get(locators.inputField);
  }
}

module.exports = StocksSearch;

stocksTradePage.js

import StocksSearch from './stocksSearch'

const locators = {
  strocksSearch: '[data-cy=stock-search-field]',
};

let stocksSearch = new StocksSearch();

class StocksTradePage {
  getStocksSearch() {
    stocksSearch = cy.get(locators.strocksSearch);
    return stocksSearch;
  }
}

module.exports = StocksTradePage;

testStocksPage

import StocksTradePage from '../../support/trade/stroksTradePage'

const stocksTradePage = new StocksTradePage();

describe('global nav test', () => {
  it('test input field', () => {
    cy.visit('http://localhost:3000/trade');
    stocksTradePage.getStocksSearch().getInputField().type('aaaa');
  });
});

18 thoughts on “how to assign selector to an object class in Cypress”

Leave a Comment