qe-fe-automation/cypress/e2e/admin/lib/users/traveler_report.ts

FE test automation framework using cypress

import { AdminPayment } from '../settings/payment-method';
const travelerReportPageSelectors = {
  dateRangeCalendar: '[data-qa-id="TRAVELER_REPORT_DATE_RANGE_BUTTON"]',
  fromYearSelection: 'button.current',
  yearSelection: '.years [role="gridcell"]',
  monthSelection: '.months [role="gridcell"]',
  dateSelection: '[aria-label="calendar"]',
  dateSelectionAttribute: 'span.ng-star-inserted',
  confirmDateSelection: '.ta-svg-image',
  continent: '[formcontrolname="continentCodes"]',
  continentList: '#mat-select-0-panel [role="option"]',
  location: '[formcontrolname="placeName"] input',
  locationDropDown: '#mat-autocomplete-0 mat-option',
  getTravelersList: '[data-qa-id="TRAVELER_REPORT_BUTTON_SHOW_LIST_OF_TRAVELERS"]',
  locationResultsTableData:
    '[data-qa-id="TRAVELER_REPORT_LOCATION_REPORT_TABLE"] tbody tr',
  flightResultsTableData: '[data-qa-id="TRAVELER_REPORT_FLIGHTS_REPORT_TABLE"] tbody tr',
  hotelResultsTableData: '[data-qa-id="TRAVELER_REPORT_HOTELS_REPORT_TABLE"] tbody tr',
  tabListOption: '.mat-tab-label-content',
  airLineCode: '[class^="row align-items-center form-group no-gutters"] input',
  flightNumber: '[formarrayname="flightNumbers"] input',
  dropDownOption: '[role="option"] .mat-option-text',
  departureType: '[formgroupname = extraDepartureLocationFilter] mat-select',
  departureLocation: '[data-qa-id="TRAVELER_REPORT_LOCATION_INPUT_DEPARTURES"]',
  destinationType: '[formgroupname = extraDestinationLocationFilter] mat-select',
  destinationLocation: '[data-qa-id="TRAVELER_REPORT_LOCATION_INPUT_DESTINATION"]',
  hotelName: '[formarrayname="hotelNames"] input'
};

type tabList = 'Location' | 'Flights' | 'Hotels';
type location = 'Airport' | 'Location' | 'Continent' | 'Exclude';

export class TravelerReportPage {
  static visitTravelerReportPage() {
    cy.allure().logStep('Visit traveler report page');
    cy.intercept('POST', /admin\/metrics\/timer/).as('waitForTravelerReport');
    cy.visit('app/admin2/en/activeTravelers/travelerReport');
    cy.url().should('include', '/travelerReport');
    cy.wait('@waitForTravelerReport');
    AdminPayment.closeHelpPopup();
  }

  static selectDateRange(dateFrom: Date, dateTo: Date) {
    cy.allure().logStep(
      `Select date range: ${dateFrom.toDateString()} - ${dateTo.toDateString()}`
    );
    this.openDateRangeCalendar();
    this.selectDates(dateFrom);
    this.selectDates(dateTo);
    cy.get(travelerReportPageSelectors.confirmDateSelection).eq(3).click();
  }

  static openDateRangeCalendar() {
    cy.allure().logStep('Open date range calendar');
    cy.get(travelerReportPageSelectors.dateRangeCalendar).click();
  }

  static selectDates(date: Date) {
    cy.allure().logStep(`Select calendar date - ${date.toDateString()}`);
    const month = date.toLocaleString('en-us', { month: 'long' });
    // currently there are four matching buttons:
    // first two are from "invisible" inline datepicker (that is not displayed)
    // last two are "<MONTH>" and "<YEAR>"
    // TODO: make selector more deterministic
    cy.get(travelerReportPageSelectors.fromYearSelection).eq(3).click();
    cy.get(travelerReportPageSelectors.yearSelection)
      .contains(date.getFullYear())
      .click();
    cy.get(travelerReportPageSelectors.monthSelection).contains(month).click();
    cy.get(travelerReportPageSelectors.dateSelection)
      .last()
      .find(travelerReportPageSelectors.dateSelectionAttribute)
      .contains(date.getDate())
      .click();
  }

  static selectContinent(continentOption: string) {
    cy.allure().logStep('Select continent');
    cy.get(travelerReportPageSelectors.continent).click();
    cy.get(travelerReportPageSelectors.continentList).contains(continentOption).click();
  }

  static typeAndSelectLocation(location: string) {
    cy.allure().logStep('Select location');
    cy.get(travelerReportPageSelectors.location).then((ele) => {
      cy.wrap(ele).click({ force: true });
      cy.wrap(ele).type(location);
    });

    cy.get(travelerReportPageSelectors.locationDropDown).eq(0).click();
  }

  static clickGetTravelersList() {
    cy.allure().logStep('Select get travelers list option');
    cy.intercept('GET', /v2\/admin\/traveler\/pageablereport?/).as('waitForTravelerList');
    cy.get(travelerReportPageSelectors.getTravelersList).click({ force: true });
    cy.wait('@waitForTravelerList');
  }

  static verifyDataInReportTable(type: tabList, bookingData: string) {
    cy.allure().logStep(`Verify reporter table contains : ${bookingData}`);
    switch (type) {
      case 'Location':
        cy.get(travelerReportPageSelectors.locationResultsTableData).contains(
          bookingData
        );
        break;
      case 'Flights':
        cy.get(travelerReportPageSelectors.flightResultsTableData).contains(bookingData);
        break;
      case 'Hotels':
        cy.get(travelerReportPageSelectors.hotelResultsTableData).contains(bookingData);
        break;
    }
  }

  static selectTabOption(option: tabList) {
    cy.allure().logStep(`Select tab option : ${option}`);
    cy.get(travelerReportPageSelectors.tabListOption)
      .contains(option)
      .click({ force: true });
  }

  static setAirLineCode(airLineCode: string) {
    cy.allure().logStep(`Set airline code: ${airLineCode}`);
    cy.get(travelerReportPageSelectors.airLineCode).eq(1).type(airLineCode);
  }

  static setFlightNumber(flightNumber: string) {
    cy.allure().logStep(`Set flight number: ${flightNumber}`);
    cy.get(travelerReportPageSelectors.flightNumber).type(flightNumber);
  }

  static setDeparture(departureLocation: string, departureType: location) {
    cy.allure().logStep('Set departure type and location');
    cy.get(travelerReportPageSelectors.departureType).click();
    cy.get(travelerReportPageSelectors.dropDownOption)
      .contains(departureType)
      .click({ force: true });
    cy.get(travelerReportPageSelectors.departureLocation).type(departureLocation);
    cy.get(travelerReportPageSelectors.dropDownOption)
      .contains(departureLocation)
      .click({ force: true });
  }

  static setDestination(destinationLocation: string, destinationType: location) {
    cy.allure().logStep('Set destination type and location');
    cy.get(travelerReportPageSelectors.destinationType).click();
    cy.get(travelerReportPageSelectors.dropDownOption).contains(destinationType).click();
    cy.get(travelerReportPageSelectors.destinationLocation).type(destinationLocation);
    cy.get(travelerReportPageSelectors.dropDownOption)
      .contains(destinationLocation)
      .click({ force: true });
  }

  static setHotelName(hotelName: string) {
    cy.allure().logStep('Set hotel name');
    cy.get(travelerReportPageSelectors.hotelName).type(hotelName);
  }

  static setHotelLocation(location: string) {
    cy.allure().logStep('Select hotel location');
    cy.get(travelerReportPageSelectors.location).then((ele) => {
      cy.wrap(ele).click();
      cy.wrap(ele).type(location);
    });

    cy.get(travelerReportPageSelectors.dropDownOption).eq(0).click();
  }
}