Playwright – Target Closed before any action

I am trying playwright and try to automate login feature. I have page classes, test classes and separate action class to write common actions like click,enter inputs.

My common action class

import { expect, Locator, Page } from “@playwright/test”

export default class Actions {

page:Page;

constructor(page:Page) {
this.page = page ;
}

public async enterInput(value:string,element:Locator) {
element.fill(value);
await this.page.waitForTimeout(5000);
}

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

}

My login.page.ts class

import { Locator, Page, expect } from “@playwright/test”;
import Actions from “../common/actions”;
import * as path from “../xpaths/xpath.json”
import fs from ‘fs’;

export default class LoginPage {

page: Page;
action:Actions;

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

constructor(page:Page) {
this.page = page ;
this.action=new Actions(page);

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

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

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

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

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

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

}

My logintest.spec.ts

import { test , expect} from “@playwright/test”
import LoginPage from “../pages/login.page”
import * as data from “../testdata/testdata.json”

test.describe(‘Login Test’, () =>{
let login:LoginPage;

test.beforeEach(async({page}) =>{
await page.goto(“My Url”);
await page.waitForTimeout(5000)
login = new LoginPage(page);
});

test(‘invalid login-username/password both incorrect’, async () => {
login.invalidLogin(data.invalid_username,data.invalid_password,data.invalid_error);
});

test(’empty username/password login’, async()=>{
login.invalidLogin(data.invalid_username,data.invalid_password,data.invalid_error);
});
test(‘successfully login to the system’ , async () => {
login.successLogin(data.username,data.password,data.dashboard_title);
});
});

Whenever I execute the code always getting Target Closed error.Below is the error

Error: locator.fill: Target closed
=========================== logs ===========================
waiting for locator(‘xpath=//input[contains(@id,’outlined-basic’) and contains(@type,’text’)]’)
============================================================

at ..commonactions.ts:16

14 |
15 | public async enterInput(value:string,element:Locator) {
> 16 | element.fill(value);
| ^
17 | await this.page.waitForTimeout(5000);
18 | }

But when I execute code without using action class like below code executes successfully.

import { test , expect} from “@playwright/test”
import LoginPage from “../pages/login.page”
import * as data from “../testdata/testdata.json”

test.describe(‘Login Test’, () =>{
let login:LoginPage;

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

console.log(page.url)

login = new LoginPage(page);
});

test(‘invalid login-username/password both incorrect’, async ({page}) => {
page.goto(“http://192.168.0.127/ussd_qa/login”);
await page.waitForTimeout(5000);
await login.inputUsername.fill(data.username);
await page.waitForTimeout(5000);
await login.inputPassword.fill(data.password);
await page.waitForTimeout(5000);
await login.btnLogin.click();
await page.waitForTimeout(5000);
await expect(login.errorText).toHaveText(data.invalid_error);
});
});

Can someone explain what is wrong here?

Source: Read More