Reputation:
I'm modeling a web page with a lot of items on it. Coming from a Ruby background, I had one class for each, say, large item and its subitems on the page. For instance, a navbar
would be its own class:
import { Selector, t } from 'testcafe';
export class NavBar {
constructor () {
this.home = Selector('#home')
this.intro = Selector('#intro')
...
}
}
export class HeaderSection {
...
}
Questions:
index
and then have multiple child classes (Navbar
and HeaderSection
on my example) that inherit from the index class
This is what I think it should be:
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 ();
...
}
}
so when I import the page model into my test case, I can call import Index from ../pages/index_page.js
Upvotes: 3
Views: 559
Reputation: 5227
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(?)
It's not necessary. The default
keyword determines the way of the export in JavaScript. You can organize page objects as you like.
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
It depends on page complexity. If test page is simple then one page object class for one page is enough. If test page is complex, creating separate classes for complex controls is a good approach.
Upvotes: 2