Playwright using JS ,getting - page.goto: net::ERR_ABORTED; maybe frame was detached? ===== logs ====== navigating to "URL", waiting until "load"

Question

Trying to implement Playwright with JavaScript to one of my new projects using POM framework but getting this error as below:

page.goto: net::ERR_ABORTED; maybe frame was detached?
=========================== logs ===========================
navigating to "URL", waiting until "load"
============================================================

Test code

const { test, expect } = require('@playwright/test');
const { LoginPage } = require('../pageobjects/LoginPage');

test('Test 1', async ({ page }) => {
  const username = "SOMEUSERNAME";
  const password = "EQPun9wSe4EaNx7Z";
  const loginPage = new LoginPage(page);
  loginPage.goTo();
  loginPage.validLogin(username, password);
});

pages code

class LoginPage {
  constructor(page) {
    this.page = page;
    this.UserName = page.locator("[name='email']");
    this.password = page.locator("[name='password']");
    this.login = page.locator("#loginSubmit");
  }
  async goTo() {
    await this.page.goto("**URL**");
  }
  async validLogin(username, password) {
    await this.UserName.type(username);
    await this.password.type(password);
    await this.login.click();
  }
}
module.exports = { LoginPage };

Answer 1

Late to the party, but in this code

test('Test 1',async({page})=>
{
   const username = "SOMEUSERNAME";
   const password = "EQPun9wSe4EaNx7Z";
   const loginPage =  new LoginPage(page);
   loginPage.goTo();
   loginPage.validLogin(username,password);
});

You're supposed to await loginPage.goTo(), otherwise it happens in sync with the validLogin (which you should also await) and this causes the error.