Testcafe

Question

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

import { Selector, t } from 'testcafe';

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

export class HeaderSection {
  ...
}

问题：

我需要默认 class 吗？我的 IDE 在抱怨，但测试有效。我相信，答案是否定的，但这是一个很好的做法(?)
在 JavaScript 中编写复杂页面模型的推荐方法是什么？我倾向于有一页 class，比如 index，然后有多个继承的子 classes（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

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关键字决定了JavaScript中export的方式。您可以随意组织页面对象。

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

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

Testcafe - 页面对象结构和默认 class

Testcafe - Page object structure and default class

javascript

testing

automated-tests

e2e-testing