[Feature] export the MountResult interface so that it can be used in Page Object Models

[opack]

Hello!
I am switching from Vitest to Playwright for component testing and I have an issue when writing a page object model because I cannot correctly type the return of await mount(Page) in my page object model.

Here is a excerpt from my test:

const test = base.extend<{ component: LoginPage }>({
	component: async ({ mount }, use) => {
		const component = new LoginPage(await mount(Page))
		await use(component)
	}
})

I try to give the result of mount to my page object model, so that it can then abstract the logic for me in the following tests.
Here is part of the page object model:

import type { Locator } from '@playwright/test'
import type Page from './+page.svelte'

export class LoginPage {
	public readonly username: Locator

	constructor(public readonly component: MountResult<Page>) {
		this.username = this.component.getByLabel('Username')
	}
}

Problem is that I cannot use type MountResult as it is not exported. I see two solutions:

1. Recreate the MountResult interface
2. Type the component as a Locator but doing so I would be unable to use the unmount and update and future added features.

I think that the MountResult interface should be exported, as it is part of the API that we manipulate (out of mount) and thus we should be able to type what we would store in a variable if needed.

Did I miss something? Is there another solution? If not, then can you please export this interface?

Thanks a lot!

[dgozman]

@opack Thank you for the issue, this makes sense. As a workaround for now, you can do the following:

// MountResult.ts
import { test } from '@playwright/experimental-ct-svelte';
export type MountResult = Awaited<ReturnType<Parameters<Parameters<typeof test>[1]>[0]['mount']>>;

[opack]

Yeah! It works, thank you very much, I would never have found this workaround by myself 🙏

That's not a big thing, but to please Typescript, I had to import type instead of simply import. In case someone else has the same question before this enhanced is shipped, here is the final code of MountResult.ts:

import type { test } from '@playwright/experimental-ct-svelte'
export type MountResult = Awaited<ReturnType<Parameters<Parameters<typeof test>[1]>[0]['mount']>>