I am new to Cypress and I am building automation framework to test the Emirates.com website.

Currently when attempting to verify the number of passengers(Adults) selected, I am encountering JQuery is not a function or remote JQuery is not a function.

Need guidance on how i can resolve this.

Also, if you can suggest a good approach how I can design my framework to test this i.e. what test cases I should cover or the framework layout, would be highly appreciated. 🙂

Error Message:

invoke.text()23 (uncaught exception)TypeError: Cannot read properties of undefined (reading ‘slice’)

Error Code:

      cy.wait(5000);

    //   cy.get(numberOfAdultsDisplaySelector).should('be.visible').invoke('text').then((text) => {
    //     console.log(text);
    // });

    // const $li = Cypress.$(numberOfAdultsDisplaySelector)

    //   cy.wrap($li)
    //     .should('be.visible')
    //     .invoke('text')
    //     .then((text) => {
    //       console.log(text);
    //     })

Test code:

/// <reference types="cypress" /> 
 
import Homepage from './pageObjects/Homepage.cy.js';

describe('Homepage Functionality', () => {

  const homepage = new Homepage();

  beforeEach(() => {
    cy.log('Opening Emirates URL');
    homepage.visit();
    homepage.verifyTitle(homepage.EXPECTED_TITLE);
    handlePrivacyPopup();
    cy.wait(3000);
  });

  // Privacy pop-up window
  function handlePrivacyPopup() {
    cy.window().then(win => {
      cy.get(win.document).find('button#onetrust-accept-btn-handler')
        .click();
    });
  }
  
  it('Verify customer can book a flight', () => {

    //Select departure & arrival airport
    const selectAirport = (fieldName, airportCode) => {
      cy.get('[class^="field__text"]').contains(fieldName).should('be.visible');
      cy.get(`input[name="${fieldName}"]`).first().type(airportCode); 
      cy.get('[class^="location__airport__acronym to-highlight"]').first().contains(airportCode).click();
    };

    selectAirport('Departure airport', homepage.DEPARTURE_AIRPORT);
    selectAirport('Arrival airport', homepage.ARRIVAL_AIRPORT);

    //Select departure date
    const {DEPARTURE_YEAR, DEPARTURE_MONTH, DEPARTURE_DATE} = homepage;
      cy.get('.ek-datepicker__table').should('be.visible');
      cy.get(`td[data-year="${DEPARTURE_YEAR}"][data-month="${DEPARTURE_MONTH}"][data-date="${DEPARTURE_DATE}"] button`)
        .should('be.visible').first().click();


    //Select return date
    const {RETURN_YEAR, RETURN_MONTH, RETURN_DATE} = homepage;
      cy.get('.ek-datepicker__table').should('be.visible');
      cy.get('.ek-datepicker__table').eq(1).within(() => {
      cy.get(`td[data-year="${RETURN_YEAR}"][data-month="${RETURN_MONTH}"][data-date="${RETURN_DATE}"] button`)
        .should('be.visible')
        .click();
      });
    
    cy.wait(4000);
    
    //Select pasengers 
    cy.get('div.dropdown').should('be.visible')
    cy.get('h3.passenger-heading').should('have.text', 'Passengers')

    const numberOfAdults = homepage.PASSENGERS_ADULTS,
          adultIncrementButtonSelector = 'div.increment-field[data-channel="passenger"][data-type="adults"] button.js-increment-increase',
          numberOfAdultsDisplaySelector ='div.increment-field__text-container .increment-field__value.js-increment-value';
    for (let i = 0; i < numberOfAdults; i++) {
      cy.get(adultIncrementButtonSelector).click()

      }

      cy.wait(5000);

    //   cy.get(numberOfAdultsDisplaySelector).should('be.visible').invoke('text').then((text) => {
    //     console.log(text);
    // });

    // const $li = Cypress.$(numberOfAdultsDisplaySelector)

    //   cy.wrap($li)
    //     .should('be.visible')
    //     .invoke('text')
    //     .then((text) => {
    //       console.log(text);
    //     })
    
        cy.get(numberOfAdultsDisplaySelector).should('be.visible').invoke('text').then((text) => {
          cy.wait(4000)
          console.log('>>>>>>>>>>>>>>',text);
      });
    
      
     // cy.get(numberOfAdultsDisplaySelector).should('have.text', String(numberOfAdults));
    //cy.get(numberOfAdultsDisplaySelector).should('have.text', String(numberOfAdults -1));
   // cy.get(numberOfAdultsDisplaySelector).invoke('text').should('eq', String(6));

  });

});

POM:

class Homepage {

    EXPECTED_TITLE = 'Emirates' 
    DEPARTURE_AIRPORT = 'DXB'
    ARRIVAL_AIRPORT = 'LHR'
    EXPECTED_DEPARTURE_AIRPORT = 'Departure airport'
    EXPECTED_ARRIVAL_AIRPORT = 'Arrival airport'
    DEPARTURE_DATE = '30'
    DEPARTURE_MONTH = '5' //Month start from 0
    DEPARTURE_YEAR = '2024'
    RETURN_DATE = '7'
    RETURN_MONTH = '6'
    RETURN_YEAR = '2024'
    PASSENGERS_ADULTS = '5' // Default value 1 
    
    
    visit() {
        cy.visit('/');
        return this;
    }
    
    verifyTitle(expectedTitle) {
        cy.title().should('include', this.EXPECTED_TITLE);
    }
    
    searchForFlights(departure, arrival)
    {
        cy.wait(5000)
        cy.get('button#onetrust-accept-btn-handler:nth-of-type).click').click();
        cy.get('input[name="Departure airport"]).click').contains(this.EXPECTED_DEPARTURE_AIRPORT).should('be.visible').wait(2000)
    
        return this
    }



    

}


export default Homepage