automated testing – Playwright – Goal Closed earlier than any motion

I’m making an attempt playwright and attempt to automate login characteristic. I’ve web page lessons, take a look at lessons and separate motion class to write down widespread actions like click on,enter inputs.

My widespread motion class

import { anticipate, Locator, Web page } from "@playwright/take a look at"

export default class Actions {

web page:Web page;

constructor(web page:Web page) {
    this.web page = web page ;
}

public async enterInput(worth:string,component:Locator) {
    component.fill(worth);
    await this.web page.waitForTimeout(5000);
}

public async clickButton(component:Locator) {
    component.click on();
    await this.web page.waitForTimeout(5000)
}

}

My login.web page.ts class

import { Locator, Web page, anticipate } from "@playwright/take a look at";
import Actions from "../widespread/actions";
import * as path from "../xpaths/xpath.json"
import fs from 'fs';


export default class LoginPage {

web page: Web page;
motion:Actions;

inputUsername:Locator;
inputPassword:Locator;
btnLogin:Locator;
errorText:Locator;

constructor(web page:Web page) {
    this.web page = web page ;
    this.motion=new Actions(web page);

    const pathsxData = fs.readFileSync("json path right here", "utf-8");
    const pathsx = JSON.parse(pathsxData);

    this.inputUsername = this.web page.locator(path.usernameInput);
    this.inputPassword = this.web page.locator(path.passwordInput);
    this.btnLogin = this.web page.locator(path.loginBtn);
    this.errorText=this.web page.locator(path.loginError)
    }

    public async login(username:string,password:string)
   {
    this.motion.enterInput(username,this.inputUsername);
    this.motion.enterInput(password,this.inputPassword);
    await this.motion.clickButton(this.btnLogin);
    }

    public async successLogin(username:string,password:string,title:string){
    this.login(username,password);
    await anticipate(this.web page).toHaveTitle(title);
    }

    public async invalidLogin(username:string,password:string,error:string){
    this.login(username,password);
    await anticipate(this.errorText).toHaveText(error);
    }

    public async emptyLogin(username:string,password:string,error:string){
    this.login(username,password);
    await anticipate(this.errorText).toHaveText(error);
    }

    }

My logintest.spec.ts

import { take a look at , anticipate} from "@playwright/take a look at"
import LoginPage from "../pages/login.web page"
import * as knowledge from "../testdata/testdata.json"

take a look at.describe('Login Take a look at', () =>{
let login:LoginPage;

 take a look at.beforeEach(async({web page}) =>{
    await web page.goto("My Url");
    await web page.waitForTimeout(5000)
    login = new LoginPage(web page);
 });

take a look at('invalid login-username/password each incorrect', async () => {
    login.invalidLogin(knowledge.invalid_username,knowledge.invalid_password,knowledge.invalid_error);
});

take a look at('empty username/password login', async()=>{
    login.invalidLogin(knowledge.invalid_username,knowledge.invalid_password,knowledge.invalid_error);
});
take a look at('efficiently login to the system' , async () => {    
    login.successLogin(knowledge.username,knowledge.password,knowledge.dashboard_title);
 });
 });

At any time when I execute the code at all times getting Goal Closed error.Beneath is the error

Error: locator.fill: Goal closed
=========================== logs ===========================
ready for locator('xpath=//enter[contains(@id,'outlined-basic') and contains(@type,'text')]')
============================================================

   at ..commonactions.ts:16

  14 |
  15 |     public async enterInput(worth:string,component:Locator)                  ^
  17 

However after I execute code with out utilizing motion class like under code executes efficiently.

import { take a look at , anticipate} from "@playwright/take a look at"
import LoginPage from "../pages/login.web page"
import * as knowledge from "../testdata/testdata.json"

take a look at.describe('Login Take a look at', () =>{
let login:LoginPage;

take a look at.beforeEach(async({web page}) =>{
    
    console.log(web page.url)
   
    login = new LoginPage(web page);
});

take a look at('invalid login-username/password each incorrect', async ({web page}) => {
    web page.goto("http://192.168.0.127/ussd_qa/login");
    await web page.waitForTimeout(5000);
    await login.inputUsername.fill(knowledge.username);
    await web page.waitForTimeout(5000);
    await login.inputPassword.fill(knowledge.password);
    await web page.waitForTimeout(5000);
    await login.btnLogin.click on();
    await web page.waitForTimeout(5000);
    await anticipate(login.errorText).toHaveText(knowledge.invalid_error);
});
});

Can somebody clarify what’s flawed right here?