使用Playwright JavaScript+POM框架遇page.goto报错求助

我正尝试在新项目中使用Playwright结合JavaScript实现POM框架，但遇到如下错误：

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

测试代码

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

页面代码

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

错误原因及解决方法 #

1. 未等待异步方法完成（核心问题） #

测试代码中调用loginPage.goTo()和loginPage.validLogin()时未添加await关键字。这两个方法都是异步函数，Playwright的所有页面操作均为异步执行，不等待的话代码会跳过页面加载流程直接执行后续操作，导致页面未加载完成就触发元素操作，引发导航异常。

解决方法：给测试中的异步方法调用加上await：

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

2. 页面导航等待策略不匹配 #

默认page.goto等待load事件，但部分页面在load事件触发后仍有跳转或资源加载延迟，导致页面状态不稳定引发错误。

解决方法：调整等待策略，比如使用networkidle（等待网络空闲）或domcontentloaded（等待DOM加载完成）：

async goTo() {
  await this.page.goto("**URL**", { waitUntil: 'networkidle' });
}

也可以等待页面关键元素加载完成后再执行后续操作：

async goTo() {
  await this.page.goto("**URL**");
  await this.UserName.waitFor(); // 等待用户名输入框加载完成
}

3. 目标URL有效性问题 #

确认填入的**URL**是正确可访问的地址，需包含完整的http/https协议，且能在浏览器正常打开。无效或不可访问的URL也会触发该错误。

4. 页面框架分离问题 #

如果目标页面包含动态卸载的iframe，导航过程中iframe被移除会触发该错误。可检查页面是否存在动态加载/卸载的iframe，必要时通过page.frame()定位到对应frame后再执行操作。

内容的提问来源于stack exchange，提问作者vinayanth . k