2

I'm building Page Objects for my automated tests, and I'm doing something like this:

abstract class Page  {
  selectors: {
    // Here are selectors which are common to all my pages
    genericSelector: "...",
    commonContainer: {
      aButton: "..."
    }
  }

  // methods that are common to all my pages
}
class MyPage extends Page {
  
  // Here I want my page specific selectors
  // *plus* my generic selectors 
  selectors: {
    ...this.selectors,
    mySpecificSelector: "..."
  }
}

The above code works fine at run-time: I can correctly use all my selectors in my code. However, Typescript complains on MyPage.ts that:

Property 'selectors' in type 'MyPage' is not assignable to the same property in base type 'Page.

Basically because TS doesn't know that I'm spreading the base class prop into the subclass.

Now, the following is what I tried:

One additional note

My type for the selector property looks like this:

type Selector = string | SelectorFactory | { selector: string, type: "css" | "xpath" }
type SelectorFactory = (...args: any[]) => string;
type SelectorTree = { [k: string]: SelectorTree | Selector }

Convenient TS Playground link

What I tried

First attempt

class MyPage extends Page {
  selectors: {
    ...this.selectors as InstanceType<typeof Page>["selectors"]
  }
}

This, then complains:

'selectors' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

So I have to do:

  selectors: SelectorTree = // ...

Then I'm back to square one, as it complains that it is missing some properties from the base class. If I add : SelectorTree to my base class, it then doesn't complain, but I don't get proper intellisense and I even get errors (for example if I try to call a function from my selectors properties, I can't).

Second attempt

I could, I guess, have my selectors member of the base Page class be static. Then I could do:

  selectors: {
    ...Page.selectors,
    mySpecificSelector: "..."
  }

This works, but, well, I now actually have an extra static member that I did not want to have.

Third attempt, aka “I give up”

I could separate the members and have something like baseSelectors on my Page class and then I could either use them as they are within the sub-class, or spread them into my selectors object.

But this feels like a defeat.

1
  • This looks like a design limitation in TypeScript, see microsoft/TypeScript#33899. Not sure what the best workaround is.
    – jcalz
    Feb 12, 2021 at 14:44

1 Answer 1

2

This unfortunately seems to be a design limitation in TypeScript, according to microsoft/TypeScript#33899:

Due to architectural constraints around how trees are marked as checked, this has to be treated as a circular reference despite the type assertion.

Apparently any reference to this.selectors, no matter how indirect, seems to cause a circularity error. So far, the only workaround I've found that gives you the right types without having to refactor the emitted code is to widen this to Page (note: InstanceType<typeof Page> is the same as Page) to get a non-any type for this.selectors, and then just brute-force suppressing the circularity warning with //@ts-ignore:

class SubPage extends Page {
  //@ts-ignore circularity warning
  selectors = { ...(this as Page).selectors, foo: "bar", open: () => "" }
}

You can verify that instances of SubPage behave as expected:

const p = new SubPage();
p.selectors;
// SubPage.selectors: {
//   foo: string;
//   open: () => string;
//   test: string;
// }
p.selectors.open().toUpperCase(); // okay

That works! But...

⚠ ALERT ⚠ I feel very uneasy whenever someone suggests //@ts-ignore because if the suppressed error has any other unpleasant effects on your code, they will still exist. I didn't see any such effects with the example code above, but I can't be certain they're not there. If your automobile mechanic addressed a lit "check engine" indicator light by covering the indicator light so that you can't see it anymore, you'd maybe want to start looking around to find a different mechanic, if only for a second opinion. 😅

Playground link to code

4
  • Thanks for the reply (and lol at InstanceType<typeof Page>, I thought there was a difference between the type of an instantiated class and just the class itself. Anyhow, I'm wondering, why does (this as Page).selectors shows correct intellisense, while this.selectors as Page["selectors"] doesn't? Have any idea? And yea, by the way the problem I see with @ts-ignore is that my selector object is now not typechecked anymore and I can put whatever I want there. Feb 12, 2021 at 15:39
  • What do you mean you can put anything you want there? Can you show me?
    – jcalz
    Feb 12, 2021 at 15:40
  • But that's an unrelated issue, right? Look at this code where I've removed //@ts-ignore. This new issue has to do with TypeScript's assignability rules being slightly unsound ({x: string, y: number} is assignable to {x: string} which is assignable to {[k: string]: string}, but {x: string, y: number} is not assignable to {[k: string]: string}. It's possibly worthy of a separate question (although the answer is "that's just how it works, sorry") but doesn't seem in scope here.
    – jcalz
    Feb 12, 2021 at 15:59
  • Oh man, you're right. But I'm not sure the explanation is correct: actually, it seems that if I the "grandchild" class is not inheriting the SelectorTree constraints from the grandparent at all. Example. This confuses me, and I'm still confused by the difference between (this as Page) and the alternative. But yea, I'd say in this case // @ts-ignore answers my specific question, with exactly the caveat that you mentioned. I'm going to upvote the answer, but we'll see if that second mechanic you mentioned shows up ;) Feb 12, 2021 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.