Error: Module not found - TypeScript + Playwright

While working on test automation using playwright, I encountered a coding issue. During the test execution, I received the following error in test.spec.ts:

Error: Cannot find module '@common/common' code: 'MODULE_NOT_FOUND'

Any advice on how to troubleshoot this problem?

Here are snippets of the code below

test.spec.ts

import { chromium, ChromiumBrowser, Page } from "playwright";
import { test, expect, PlaywrightTestConfig } from "@playwright/test";
import Common from "@common/common";

test.beforeAll(async ({ page }) => {

});

test.describe('Go test', () => {
  test('Test1', async ({ page }) => {
    console.log("1111111111");
  });
})

package.json

{
  "name": "type-sanity",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "ts-node -r tsconfig-paths/register src/main.ts",
    "test": "npx playwright test"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/randomstring": "^1.1.7",
    "playwright": "^1.14.0",
    "randomstring": "^1.2.1",
    "typescript": "^4.3.5"
  },
  "devDependencies": {
    "@playwright/test": "^1.14.0",
    "@types/node": "latest",
    "ts-node": "^10.1.0",
    "tsconfig-paths": "^3.10.1",
    "typescript-module-alias": "^1.0.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "outDir": "./dist",
    "baseUrl": ".",
    "types": [],
    "paths": {
      "@config/*": [
        "tests/config/*"
      ],
      "@common/*": [
        "src/common/*"
      ],
    }
  },
  "exclude": [
    "node_modules"
  ]
}

Answer №1

@playwright/test does not take into account the settings in your tsconfig.json file when transpiling your TypeScript files, which is why your custom path mapping may not be working as expected. To address this issue, you can manually transpile your TypeScript code. Check out the following link for more information:

If you need additional guidance, refer to this related problem on GitHub: https://github.com/microsoft/playwright/issues/7121

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

issue occurring after inserting a new parameter

I encountered an issue with my test case after adding a new parameter tiger to the method swimming. Despite passing the new parameter tiger to my test case, it continues to break. Update: I am receiving an "undefined grid" error at this line. Any suggest ...

How does one distinguish between the uses of "any" and "any[ ]"?

Exploring the Difference Between any and any[ ] An Illustrative Example (Functioning as Expected) variable1: any; variable2: any[]; this.variable1 = this.variable2; Another Example (Also Functioning as Intended) variable1: any; v ...

Upon successful saving, the values stored in Ionic Storage remain unchanged and do not automatically update in Capacitor/Ionic 6

Utilizing the Ionic storage plugin, I am able to store and retrieve values in my app. The settings page allows users to make selections that impact the overall app experience. This is the code snippet from my settings.page.html <ion-header> <io ...

Looking to retrieve the request body in a route handler in Next.js version 13.2?

I encountered an issue while attempting to send a post request to my API. The problem arises when I try to access the request body within the route handler, resulting in the following error: Code: export async function POST(request: Request) { const ...

Only 1 argument was provided instead of the expected 2 when attempting to update Firebase through Ionic

I encountered an issue while trying to update Firebase from Ionic. Below is the function I used to update the data. Below is the TypeScript code: updateLaporan() { this.id = this.fire.auth.currentUser.uid; this.db.list('/laporan/'+thi ...

Extract TypeScript classes and interfaces from a consolidated file

I am seeking a way to consolidate the export of my classes, interfaces, and enums from multiple files into a single file. In JavaScript, I achieved this using the following method: module.exports = { Something = require("./src/something").default, ...

What causes TypeScript to struggle with inferring types in recursive functions?

Here is a code snippet for calculating the sum: //Function to calculate the sum of an array of numbers let sum = ([head, ...tail]: number[]) => head ? head + sum(tail) : 0 let result: string = sum([1, 2, 3]); alert(result); Can anyone explain why ...

Guidelines for assigning dynamic values from an array to a button in Angular2

I am a beginner in Angular and I am looking to display dynamic data with edit and delete buttons. I have managed to display the data properly with headers and everything, but now I want to add an edit button. Currently, I am passing each record's ID ...

Find items that were recently added in the past three days using TypeScript

Looking for a way to filter an object array of products where each element has a string property called addedDate. The goal is to only include products that were added within the last 3 days. let now = new Date(); let latestProducts: IProduct[]; latest ...

Using an interface in Typescript can greatly enhance the structure and organization

I am currently working on a project that involves using Node JS and Typescript. Within this project, I have designed a class and an interface to manage and define the data structure. I am now looking for guidance on how to implement these in a practical sc ...

Trouble with importing typings in Angular 4 Component

Encountering a compilation error in a simple component due to a typing issue. Component import { Component, Input } from '@angular/core'; import { DriveItem } from '@microsoft/microsoft-graph-types'; import { getType, DriveItemType } ...

Enhancing Data Retrieval in Next.js: Implementing Typed Requests and Responses with the Fetch API

Context I've been developing a web application using Next.js and a custom Django Python backend, but I am struggling to find an efficient approach for making API requests from my frontend to the backend. My main goal is to centralize the logic for fet ...

Ensure that compiler errors are eliminated for object properties that do not exist

Coming from a JavaScript background, I recently began working with Angular 2 and TypeScript. Below is a snippet of my code: export class AddunitsComponent implements OnInit { public centers:any; constructor(){ this.centers = {}; }} In my view, I h ...

When working with Angular Universal, using d3.select may result in a "reference error: document is not defined" in the server.js file

I'm currently working on an Angular project that uses server-side rendering to generate D3 charts. Each chart is encapsulated within its own component, such as a line-chart component which consists of TypeScript, spec.ts, HTML, and CSS files for rende ...

What is the correct way to interact with an Object's functions in TypeScript?

I'm facing a challenge with one of the libraries I'm using as it is throwing a lot of TypeScript errors related to Object functions. The list of TS errors that I encountered include: error TS2339: Property 'random' does not exist on t ...

Supabase guidelines for utilizing getServerSideProps in Next.js

I am creating a Trello-like application using Next.js and Supabase as my backend as a service. Within my Supabase table, I have set up certain policies: https://i.sstatic.net/gl5Si.png The policies function correctly on the client-side with this code sn ...

Troubleshooting Problem with HTTP Requests in Angular 2 on Firefox Browser

I have encountered a peculiar issue with my Angular 2 application specifically on Firefox and all iOS browsers (Firefox, Safari). Whenever a user navigates to the /reports route in my application, I am making a REST API call using the ngOnInit method to f ...

Type verification not functioning properly in a standalone TypeScript function

I am trying to validate the type of a parameter in a separate function, but I keep getting this error: Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable ...

Creating a WebExtension using Angular and TypeScript

I am currently working on creating a WebExtension using Angular and Ionic. The extension successfully loads the application and enables communication between Content Script and Background Script. However, I am facing an issue where the TypeScript code is n ...

How to Generate a Unique URL in Angular 7 Using Typescript

I'm struggling to display or download a .pdf file in my Angular 7 project due to issues with window.URL.createObjectURL. Here's the code snippet I've written: this.userService.getFile(report.id).subscribe( res => { console.log(res) ...