Testcafe - 页面对象结构和默认类答案

【问题标题】：Testcafe - Page object structure and default classTestcafe - 页面对象结构和默认类
【发布时间】：2019-07-21 07:29:07
【问题描述】：

我正在为一个包含很多项目的网页建模。来自 Ruby 背景，我为页面上的每个大型项目及其子项目设置了一个类。例如，navbar 将是它自己的类：

import { Selector, t } from 'testcafe';

export class NavBar {
  constructor () {
    this.home = Selector('#home')
    this.intro = Selector('#intro')
    ...
  }
}

export class HeaderSection {
  ...
}

问题：

我需要一个默认类吗？我的 IDE 抱怨，但测试工作。我相信，答案是否定的，但这是一个很好的做法（？）
在 JavaScript 中编写复杂页面模型的推荐方法是什么？我倾向于拥有一页类，比如index，然后有多个继承自index class 的子类（在我的示例中为Navbar 和HeaderSection）

我认为应该是这样的：

import { Selector, t } from 'testcafe';

export default class Index {
}

export class NavBar extends Index {
  constructor () {
    super ();
    this.home = Selector('#home')
    this.intro = Selector('#intro')
    ...
  }
}

export class HeaderSection extends Index  {
  constructor () {
    super ();
    ...
  }
}

所以当我将页面模型导入我的测试用例时，我可以调用import Index from ../pages/index_page.js

【问题讨论】：

标签： javascript testing automated-tests e2e-testing testcafe

【解决方案1】：

我需要一个默认类吗？我的 IDE 抱怨，但测试工作。我相信，答案是否定的，但这是一个很好的做法（？）

没必要。 default 关键字决定了 export 在 JavaScript 中的方式。您可以随意组织页面对象。

在 JavaScript 中编写复杂页面模型的推荐方法是什么？我倾向于拥有一个页面类，比如索引，然后有多个从索引类继承的子类（在我的示例中是 Navbar 和 HeaderSection）

这取决于页面的复杂性。如果测试页面很简单，那么一页的一个页面对象类就足够了。如果测试页面很复杂，为复杂的控件创建单独的类是一个好方法。

【讨论】：