在页面对象中使用静态（赛普拉斯）答案

【问题标题】：Using static in page object (Cypress)在页面对象中使用静态（赛普拉斯）
【发布时间】：2020-11-16 09:04:13
【问题描述】：

查看在 Cypress 上实现 e2e 测试的各种示例，我发现许多人使用创建新对象的方法，而不是使用 static。他们为什么这样做呢？为什么不将static 用于页面对象方法，因为我们不会更改类本身中的任何数据，因此不会与this 通信，并且我们不需要相同的多个实例页面（或者我没有看到使用它的场景）。我知道 Selenium 使用页面工厂，因此有必要创建一个新对象，但我在 Cypress 中没有找到类比。

创建新对象的示例：

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();

使用静态的示例：

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();
  }
};

【问题讨论】：

我还没有看到这样的例子，但是使用自定义命令的例子。您能否分享这些示例的链接以及为什么它们被认为更好？
@RosenMihaylov github.com/Hypercubed/cypress-page-object-pattern cypress.io/blog/2019/01/03/… medium.com/reactbrasil/… ...以及 github 上的许多其他示例。我也见过自定义命令，但就我而言，我需要有大量具有继承可能性的方法（例如，对于模态窗口，有很多相同的逻辑）。
我并不是说它们肯定更好（这就是这个问题的重点），但我还没有看到任何静态示例，其中一个示例在赛普拉斯官方博客中有所描述.附：我也是使用状态存储的方式（比如通过请求），但是我需要通过UI至少执行一次特定的动作，而且应用程序很大。
感谢您的信息。有人告诉我，组合比继承更好，并且只使用了它，但是很高兴阅读其他一些好的实践，因为我不相信我的方式是唯一的方式。我认为您可以使用自定义命令代替那些静态命令，并且仍然可以得到相同的结果。此外，可以在每个文件中使用自定义命令——这样的继承似乎只对单个文件有用。
@RosenMihaylov 官方文档说不要在自定义命令中输入所有内容。如果这可以作为一个单独的函数存在，那么不要把它放在命令中。来源：docs.cypress.io/api/cypress-api/…。为什么我不能在不同的文件中使用类？您可以使用模块将它们插入。

标签： javascript typescript static cypress pageobjects

【解决方案1】：

这是我的前辈教我使用的命令组合示例。我有一个函数buyProduct，但它需要几个步骤，我在不同的命令中制作了它们，可以在不同的情况下使用：

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()
});

这两种情况可以用几个变量在命令中完成，但随着时间的推移，这些变量往往会增加十倍。因此，我们将它们分成更小的可重复部分，这些部分可以以不同的方式组合。

【讨论】：