Playwright: [Question] Playwright and TypeScript

[randomactions]

Hello,

I am sorry for asking such a stupid question, but is there an example of tests written with Playwright in TS? I would really appreciate sharing this.

[arjunattam]

Thanks @randomactions. All examples in our docs will work in TypeScript (since it is a superset of JS). Are you looking for something in particular?

[randomactions]

Hi Arjun,

I am new to TS and would like to see how people implement page object model with TS. I am also wondering how to run TS tests with Mocha or Jest. Do I have to compile them to JS first?

[randomactions]

One of the things I am struggling with is which type "page" should be assigned.

When it is an object, then I get "property "goto" does not exist on type object":

class mainPage {
    constructor(public page: object) {
        this.page = page;
    }

    public async navigateTo(pageURL: string): Promise<void> {
        await this.page.goto(BASE_URL + pageURL);
       };

[mxschmitt]

One of the things I am struggling with is which type "page" should be assigned.

When it is an object, then I get "property "goto" does not exist on type object":

class mainPage {
    constructor(public page: object) {
        this.page = page;
    }

    public async navigateTo(pageURL: string): Promise<void> {
        await this.page.goto(BASE_URL + pageURL);
       };

Playwright provides types for you which you can use:

import type { Browser, Page, BrowserContext } from 'playwright' // or -chromium etc.

[randomactions]

Max, thanks a lot! This helps!

Another thing that I might have missed in the documentation is -- does TS need to be compiled to JS with tsc first, or Playwright can manage running TS without compiling?

[mxschmitt]

Max, thanks a lot! This helps!

Another thing that I might have missed in the documentation is -- does TS need to be compiled to JS with tsc first, or Playwright can manage running TS without compiling?

Playwright is a library which is written in TypeScript and provides a JavaScript bundle and optional types which Node and your editor like Visual Studio Code can consume. So if you write JavaScript and use type annotations by JSDoc, then you don't need to compile it with tsc.
But if you are writing TypeScript, it seems like you do, then you need tsc or ts-node to compile your TypeScript first to JavaScript and run it then afterwards.

[randomactions]

Thanks a lot!