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

Question

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

import { Selector, t } from 'testcafe';

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

export class HeaderSection {
  ...
}

问题:

1. 我需要默认类(class)吗？我的 IDE 在提示，但测试工作正常。我相信，答案是否定的，但这是一个很好的做法(？)
2. 用 JavaScript 编写复杂页面模型的推荐方法是什么？我倾向于有一页类，比如 index，然后有多个继承的子类(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

Answer 1

Do I need a default class? My IDE is complaining, but the test work. I believe, the answer is no, but it's a good practice(?)

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

What's the recommended way to write a complex page model in JavaScript? I'm leaning to have one page class, say index and then have multiple child classes (Navbar and HeaderSection on my example) that inherit from the index class

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