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. 我需要默认课程吗？我的IDE抱怨，但测试工作。我相信，答案是否定的，但这是一个很好的做法（？）
2. 在JavaScript中编写复杂页面模型的推荐方法是什么？我倾向于有一页的课，说index然后有多个子类（我的例子中的Navbar和HeaderSection）继承自index class

这是我认为它应该是：

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

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

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

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

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