qe-fe-automation/cypress/e2e/profile/lib/payment-checkout.ts

FE test automation framework using cypress

import { utilitySelector } from '@utility-lib/index';

const paymentSelectors = {
  taCreditCardModal: 'ta-credit-card-modal',
  addCardButton: '.ta-payment-at-booking__add-card-text',
  radioType: '[type="radio"]',
  selectedPayment: '.ta-payment-card--v2',
  paymentList: '.ta-payment-at-booking__cards-list',
  deleteIcon: '[icon="trash"]'
};

export class PaymentCheckout {
  static addCardInCheckout(): void {
    cy.allure().logStep("Clicking on 'Add a card' in checkout page");
    cy.get(utilitySelector.spanSelector).contains('Change payment').click();
    cy.get(paymentSelectors.addCardButton).click();
  }

  static chooseTypeOfCard(index: number): void {
    cy.allure().logStep('Choose between personal or company card');
    cy.get(paymentSelectors.taCreditCardModal)
      .find(paymentSelectors.radioType)
      .eq(index)
      .click();
  }

  static checkIfCardIsSelected(cardName: string): void {
    cy.get(paymentSelectors.selectedPayment).contains(cardName).should('be.visible');
  }

  static checkIfCardIsInList(cardName: string): void {
    cy.allure().logStep('Check if credit card is saved successfully on checkout page');
    cy.get(paymentSelectors.paymentList).contains(cardName).should('be.visible');
  }

  static clickOnDeleteButton(): void {
    cy.get(paymentSelectors.deleteIcon).click();
  }
}