javascript - Používanie static v page object (Cypress)

Pri prezeraní rôznych príkladov implementácie e2e testov v Cypress som narazil na fakt, že mnoho ľudí používa spôsob vytvárania nového objektu namiesto použitia static. Prečo to robia? Prečo nepoužiť static pre metódy page-object, keďže nemeníme žiadne údaje priamo v triede a teda ani nekomunikujeme s this, a nepotrebujeme mať viacero inštancií tej istej stránky (alebo nevidím scenár, kde by to bolo potrebné). Chápem, že Selenium používa page factory a preto je nutné vytvoriť nový objekt, ale v Cypress som nenašiel analógiu.

Príklad vytvorenia nového objektu:

import { BasePage } from './BasePageClass'
import { navMenu } from './NavigationMenuClass';
import { queryPage } from './QueryPageClass';

export class MainPage extends BasePage  {
  constructor() {
    super();
    this.mainElement = 'body > .banner';
  }

  verifyElements() {
    super.verifyElements();
    cy.get(this.mainElement).find('.container h1').should('be.visible');
  }

  switchToQueryingPage() {
    navMenu.switchToQueryingPage();
    queryPage.verifyElements();
  }
};

export const mainPage = new MainPage();

Príklad použitia static:

import { BasePage } from './BasePageClass'
import { navMenu } from './NavigationMenuClass';
import { queryPage } from './QueryPageClass';

export default class MainPage extends BasePage  {
  static mainElement = 'body > .banner';

  constructor() {
    super();
  }

  static verifyElements() {
    super.verifyElements();
    cy.get(MainPage.mainElement).find('.container h1').should('be.visible');
  }

  static switchToQueryingPage() {
    navMenu.switchToQueryingPage();
    queryPage.verifyElements();
  }
};

Odpoveď č. 1

Tu je príklad kompozície príkazov, ktoré ma naučili používať moji starší. Mám funkciu buyProduct, ale vyžaduje si niekoľko krokov a ja som ich rozdelil do rôznych príkazov, ktoré možno použiť v rôznych prípadoch:

it('buyProductAsCustomer', ()=>{
    cy.login(customer)
    cy.shopFe_openProductByName(product.name)
    cy.shopFe_addProductToCart()
    cy.shopFe_openCheckoutFromCart()
    cy.shopFe_selectPaymentMethod("payWithCreditCardMethod")
    cy.shopFe_fillCheckoutFormAsCustomer(customer)
    cy.shopFe_checkoutPageGetOrderData()
    cy.shopFe_submitCheckoutForm()
    cy.shopFe_completePaymentWithCreditCard()
});
it('buyProductAsGuest', ()=>{
    cy.shopFe_openProductByName(product.name)
    cy.shopFe_addProductToCart()
    cy.shopFe_openCheckoutFromCart()
    cy.shopFe_selectPaymentMethod("payWithCashMethod")
    cy.shopFe_fillCheckoutFormAsGuest(guest)
    cy.shopFe_checkoutPageGetOrderData()
    cy.shopFe_submitCheckoutForm()
    cy.shopFe_completePaymentWithCreditCard()
});

Tieto 2 prípady sa dajú vykonať v príkaze s niekoľkými premennými, ale s časom sa tieto premenné majú tendenciu zvyšovať desaťnásobne. Preto ich rozdeľujeme do menších opakovateľných častí, ktoré je možné kombinovať rôznymi spôsobmi.