Playwright Node.js中page.goto报net::ERR_ABORTED错误求助

问题概述 #

开发UI测试Web应用时，系统包含testsuites和testcases两种数据模型，每个testcase关联被测URL与testsuiteId。执行指定testsuite时，遍历关联testcase并调用page.goto(url)，但在performActions函数的this.page.goto(url)行触发以下错误：

page.goto: net::ERR_ABORTED; maybe frame was detached?
=========================== logs ===========================
navigating to "https://uat1.agyield.com/agyield/", waiting until "load" #

已尝试为page.goto添加超时参数，问题未解决。

核心代码 #

runTestSuite函数 #

public runTestSuite = async (testSuiteId: number) => {
        let result: any = 'Failed';
        const finalArraySet = await this.fetchAllTestCasesAndMakeArray(testSuiteId);
        await this.createBrowserInstance();

        for (const testCase of finalArraySet) {
            const { id, url, actions }: any = Object.values(testCase)[0];

            if (actions.length > 0) {
                result = await this.performAction!.performActions(actions, url);
                if (result) {
                    result = 'Success';
                } else {
                    result = 'Failed';
                }

                // 写入testCase结果到testResults表
                const [, created] = await TestResult.findOrCreate({
                    where: { testCaseId: id },
                    defaults: {
                        testCaseId: id,
                        executionDate: new Date(),
                        result: result
                    }
                });

                if (!created) {
                    await TestResult.update(
                        {
                            executionDate: new Date(),
                            result: result
                        },
                        {
                            where: { testCaseId: id }
                        }
                    );
                }
            }
        }

        // 写入testSuite结果到testSuiteResults表
        const [, created] = await TestSuiteResult.findOrCreate({
            where: { testSuiteId },
            defaults: {
                testSuiteId,
                executionDate: new Date(),
                result: result
            }
        });

        if (!created) {
            await TestSuiteResult.update(
                {
                    executionDate: new Date(),
                    result: result
                },
                {
                    where: { testSuiteId }
                }
            );
        }
        return result;
    };

performActions函数 #

public async performActions(
        actions: Action[],
        url: string
    ): Promise<boolean> {
        let isSuccess = true;
        try {
            if (this.page) {
                await this.page.goto(url);
                for (const action of actions) {
                    const actionResult = await this.playwrightAction.performActionAndWriteResult(action);
                    if (actionResult === false) {
                        isSuccess = false;
                    }
                }
                return isSuccess;
            } else {
                logger.error('Page is undefined');
                return false;
            }
        }
        catch (err: any) {
            logger.error(`it's an critical error>>>>>>> ${err.message}`);
            return false;
        }
    }

解决方案 #

1. 为每个testcase创建独立页面实例 #

当前复用同一个页面实例，前一个testcase的操作可能导致页面帧分离或销毁，引发后续导航失败。修改runTestSuite，为每个testcase创建独立页面：

await this.createBrowserInstance(); // 确保browser实例已初始化
for (const testCase of finalArraySet) {
    const { id, url, actions }: any = Object.values(testCase)[0];
    if (actions.length > 0) {
        // 为当前testcase创建新页面
        const page = await this.browser.newPage();
        // 将新页面传递给performAction类（需在该类中添加setPage方法）
        this.performAction!.setPage(page);
        
        result = await this.performAction!.performActions(actions, url);
        
        // 执行完后关闭页面，避免资源占用
        await page.close();

        // 原有的结果写入逻辑保持不变...
    }
}

2. 调整page.goto的等待策略 #

默认等待load事件可能因页面重定向、资源加载异常导致导航中断，尝试修改等待规则：

// 在performActions函数中修改page.goto调用
await this.page.goto(url, {
    waitUntil: 'domcontentloaded', // 等待DOM加载完成即可
    timeout: 60000 // 延长超时至60秒
});

若页面存在大量异步请求，可改用waitUntil: 'networkidle'确保网络请求稳定后再执行后续操作。

3. 处理页面弹窗或导航拦截 #

页面弹窗、自动跳转可能中断导航流程，创建页面时添加弹窗监听：

const page = await this.browser.newPage();
// 自动处理所有弹窗，避免阻塞导航
page.on('dialog', dialog => dialog.accept());

4. 排查操作中的页面状态污染 #

检查performActionAndWriteResult中的操作，确保没有修改页面上下文（比如主动关闭标签、触发跳转），避免影响后续testcase的导航。

内容的提问来源于stack exchange，提问作者Jenil Bhalala