Scriptwriter: Module not found


I am encountering an issue where I have a class named 'Button' and I am attempting to import it into my example.spec.ts file. Despite not receiving any errors from the compiler, when I run the test, an error is thrown:

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

The file structure is as follows:

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

Content of Button.ts:

class Button extends BaseElement{}

Content of 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 am utilizing Playwright version 1.25.2

typescriptplaywrightweb-testing

Answer №1

The issue pertains to the Page interface within playwright.
To resolve this, you will need to modify the import statement in your class (in my particular case, it's in the Button class).
Simply add import type and .js to your custom class for it to work correctly.
Your code snippet should resemble the following:

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');
});

Also, adjust the import of {Page} as shown below:

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

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

Creating a click handler and using window.addEventListener with TypeScript in a Next.js project

I'm currently working on a click handler that should be able to detect any clicks on the window outside of my component: useEffect(() => { const handleOutSideClick = (event) => { if (!ref.current?.contains(event.target)) { se ...

reactjstypescriptnext.jsdomdom-events

What is the best way to form a new type that encompasses all shared properties found within a union of types?

Is there a method to safely map over the union of arrays without hard-coding specific types? When attempting to calculate newArr1, an error is encountered: Property 'field2' does not exist on type 'Common<A, B>'. How can this err ...

typescript

How to Transfer Deleted List Items from one Unordered List to another in Angular 9 using Event Binding

Greetings to all =) I've recently delved into Angular 9 and I'm really enjoying the component-based approach. To sharpen my skills in property and event binding, I embarked on a project involving building a deck with two lists. English isn't ...

arraysangulartypescriptevent-bindingproperty-binding

The function for utilizing useState with a callback is throwing an error stating "Type does not have

Currently, I am implementing the use of useState with a callback function: interface Props { label: string; key: string; } const [state, setState] = useState<Props[]>([]); setState((prev: Props[]) => [...pr ...

javascriptreactjstypescript

Strategies for splitting a component's general properties and accurately typing the outcomes

I am attempting to break down a custom type into its individual components: type CustomType<T extends React.ElementType> = React.ComponentPropsWithoutRef<T> & { aBunchOfProps: string; } The code appears as follows: const partitionProps = ...

typescripttypescript-typingstypescript-genericsreact-functional-componentreact-typescript

Discover the step-by-step process for moving data between collections in MongoDB

I am currently working on nestjs and have two collections, one for orders and the other for payments. My goal is to retrieve a single entry from the orders collection and save that same entry into the payments collection. Below is the code for the service ...

mongodbtypescriptpostmannestjs

Content not displaying in Angular Material Tab (mat-tab)

Incorporating Angular Material tabs into my Angular 5 project has been quite the challenge. I am attempting to use the tabs as a submenu on a links page, where numerous links are categorized into smaller sections that will be displayed when selected from t ...

angulartypescriptangular-material

Would you like to learn how to display the value of a different component in this specific Angular 2 code and beyond

Hey there, I need your expertise to review this code and help me locate the issue causing variable "itemCount" to not display any value in about.component.html while everything works fine in home.component.html. I am attempting to only show "itemCount" in ...

javascriptangulartypescript

What is the best way to retrieve the value of this object?

In my project, I am utilizing Angular 8 to extract data from a radio input. However, when I transmit this data to Node.js and then to a MongoDB database, it is not being properly registered. The entry in the database collection appears as follows: "__v" : ...

jsonangularmongodbtypescript

Retrieve the callback function assigned to an eventEmitter in Angular 4

Is there a way to retrieve the function passed to the Event Emitter? Within my component, I am passing a function to an event emitter as shown below: <component (onClick)='function(parameter)'></component> I have set up an @Output ...

angularfunctiontypescriptparameterseventemitter

showing javascript strings on separate lines

I need assistance with displaying an array value in a frontend Angular application. How can I insert spaces between strings and show them on two separate lines? x: any = [] x[{info: "test" + ',' + "tested"}] // Instead of showing test , teste ...

javascripttypescript

Skipping emission during the parsing of TypeScript configuration files

Encountering an issue with the node-config library while using typescript. The structure of my config folder is depicted here: https://i.sstatic.net/BKBgv.png After running tsc and attempting to launch my app from its entry point (app.js), a error ...

node.jstypescriptnode-config

Understanding Type Inheritance in TypeScript: Assigning a variable of a parent type to a variable of a child type

A scenario involves creating two distinct types: export class GenericType { public id: string; public property: string; public name: string; } export class SpecificType extends GenericType { public value: string; } Let's say we have two vari ...

typescript

Proper method for displaying modifications in QueryList from @ContentChildren

I'm having trouble with rendering components and here is the code snippet: <my-component> <ng-template *ngFor="let item of data"> <child-component> <div> {{ data.title }} </div> </child-c ...

angulartypescriptrxjsangular8

Is it possible to dynamically incorporate methods into a class while specifying their types?

Can the def method be enhanced for type safety without needing to manually define interfaces? // Can we add a proper `Cat.meow(message: string)` declaration on `Cat`? const Cat = function() {} def(Cat, { meow: function(message: string) { console.log(&apo ...

typescript

Encountered an error when creating my own AngularJS module: Unable to instantiate

Attempting to dive into TypeScript and AngularJS, I encountered a perplexing error after following a tutorial for just a few lines. It appears that there may be an issue with my mydModule? angular.js:68 Uncaught Error: [$injector:modulerr] Failed to inst ...

javascriptangularjsvisual-studiotypescript

The endpoint throws an error, yet the HTTP subscription fails to capture it

My code seems simple enough. let body = new FormData(); body.set("a", true); body.set("username", this.user); body.set("password", this.password); let headers = new HttpHeaders(); headers.set("Content-Type", 'application/x-www-form-urlencoded') ...

angulartypescripthttpclient

Angular: Modify the spelling of a single term across an application to cater to international audiences

I am working on an Angular application that must support both British and American English languages. The language setting is determined by a server at start-up, allowing me to know which language to display. One specific change I need to make throughout ...

angulartypescriptlocalizationinternationalization

"Privileged" and "shared" within an Angular module

Without adding private before foo, loadBar, andtext, they are considered to be public by default in the component. export class RandomComponent { @Input() foo: string; @Output() loadBar = new EventEmitter(); text: string; } Is there any scenario whe ...

typescriptangular

Using React with TypeScript: How to store a base64 encoded string in useState

How can I resolve the unknown type error when trying to save a base64 string to state in React? import React, {useState, useRef} from 'react'; const App: React.FC = () => { const [state, setState] = useState({country: '', firstNa ...

reactjstypescript