Javascript 使用静态页面对象（Cypress）

通过查看在Cypress上实现e2e测试的各种示例，我发现许多人使用创建新对象的方法，而不是使用

static

。他们为什么这样做？为什么不为页面对象方法使用

静态

，因为我们不更改类本身中的任何数据，因此，不与

此

通信，并且我们不需要具有同一页面的多个实例（或者我看不到使用此方法的场景）。我知道Selenium使用PageFactory，因此有必要创建一个新对象，但我没有在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();
  }
};

使用static的示例：

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上的许多其他例子。我也看到过自定义命令，但在我的例子中，我需要有大量具有继承可能性的方法（例如，对于模态窗口，有许多相同的逻辑）。我并不是说它们肯定更好（这是问题的重点），但我没有看到任何具有静态，其中一个例子在官方的Cypress博客中有描述。另外，我也使用状态存储方法（例如，通过请求），但我需要通过UI至少执行一次特定操作，并且应用程序相当大。感谢您提供的信息。有人告诉我，写作是比继承更好的实践，我只使用了这一点，但阅读其他一些好的实践是很好的，因为我不相信我的方式是唯一的方式。我认为您可以使用自定义命令来代替那些静态命令，并且仍然可以得到相同的结果。此外，自定义命令也可以在每个文件中使用-这样的继承似乎只对单个文件有用。@RosenMihaylov官方文档说，您不应该在自定义命令中输入所有内容。如果这可以作为一个单独的函数存在，那么不要将它放在命令中。来源：。为什么我不能在不同的文件中使用类？您可以使用模块将它们插入。