Playwright: Cannot find module答案

【问题标题】：Playwright: Cannot find modulePlaywright: Cannot find module
【发布时间】：2022-12-26 15:43:38
【问题描述】：

I have a class 'Button' and I'm trying to import it into my example.spec.ts file.
I don't get any error from the compiler, but when I run the test, I get this error:

Error: Cannot find module '/Users/.../automation/controls/Button' imported from /Users/.../automation/tests/example.spec.ts

File structure is:

controls
   |
    -> Button.ts
tests
   |
    -> example.spec.ts

Button.ts

class Button extends BaseElement{}

exapmle.spec.ts

import { test, expect } from '@playwright/test';
import Button from "../controls/Button";

test('Test Base Elements', async ({ page }) => {

  const btnLocator: string = '[automation-id=next-button]';
  const continueButton = new Button(page, btnLocator, 'Continue Button');
});

I'm using Playwright 1.25.2

【问题讨论】：

标签： typescript playwright web-testing

【解决方案1】：

The problem is related to Page interface in playwright.
You have to make changes to the import in your class (in my case in Button class)
Add import type and .js to your custom class.
Should look like this:

import { test, expect } from '@playwright/test';
import Button from "../controls/Button.js";

test('Test Base Elements', async ({ page }) => {

  const btnLocator: string = '[automation-id=next-button]';
  const continueButton = new Button(page, btnLocator, 'Continue Button');
});

And the import of the {Page} like this:

import type { Page } from "@playwright/test";

【讨论】：

That won't work if you're trying to import a TS file.

【解决方案2】：

Typescript esm/cjs concept: https://www.typescriptlang.org/docs/handbook/esm-node.html

【讨论】：