After researching different examples of implementing end-to-end tests on Cypress, I noticed that many developers prefer to create a new object instead of using the static method. This raises questions about why they choose this approach over utilizing static for page-object methods. Since there is no need to modify data within the class itself and therefore no need to reference this, it seems unnecessary to have multiple instances of the same page. While Selenium employs page factory which necessitates creating a new object, it's unclear if there is a similar requirement in Cypress.
An example of creating a new object:
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();
An example using 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();
}
};