Playwright报错page.goto: url预期字符串却获undefined求助

核心问题1：baseUrl 未正确导出与导入 #

你的config.cjs仅定义了变量但未导出，导致login.page.cjs中通过const {baseUrl} = require("../config.cjs");无法获取到有效值，最终传入page.goto的是undefined，这就是报错的直接原因。

修复config.cjs： #

添加导出语句，让变量能被外部文件导入：

const timeout = 3000
const waitTime = 6000
const baseUrl = 'http://XX.XXX.XXX.51/'

module.exports = { timeout, waitTime, baseUrl };

核心问题2：未正确注入page实例 #

LoginPage类直接使用全局page变量，这不符合Playwright的使用规范，会导致上下文异常，也是浏览器启动后直接关闭的原因之一。需要通过构造函数传入page实例，在类方法中使用该实例操作页面。

修复login.page.cjs： #

const { baseUrl } = require("../config.cjs");
const { expect } = require("@playwright/test");

const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

class LoginPage {
    // 构造函数接收page实例并保存
    constructor(page) {
        this.page = page;
    }

    async navigateToHomePage() {
        await this.page.goto(baseUrl);
        await delay(3000);
        // 推荐替换setTimeout为Playwright原生等待：
        // await this.page.waitForLoadState('networkidle');
    }

    // 将元素定位改为类方法，使用实例的page对象
    async getHomeIcon() {
        return this.page.locator('//html[1]/body[1]/div[1]/div[1]/div[1]/div[2]/ul[1]/li[1]/span[1]');
    }

    async getOnStarHomeTitle() {
        return this.page.locator('//h2[contains(text(),"Pre-Owned Activation")]');
    }

    async verifyHeaderIconHome() {
        const homeIcon = await this.getHomeIcon();
        await expect.soft(homeIcon).toBeVisible();
        // 用toBeVisible比toBeTruthy更贴合“元素存在且可见”的断言场景
    }

    async verifyOnStarTitle() {
        const title = await this.getOnStarHomeTitle();
        await expect.soft(title).toBeVisible();
    }
}

module.exports = { LoginPage };

测试用例的正确调用方式 #

在测试文件中，实例化LoginPage时必须传入page对象：

const { test } = require('@playwright/test');
const { LoginPage } = require('./login.page.cjs');

test('登录页验证', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.navigateToHomePage();
    await loginPage.verifyHeaderIconHome();
    await loginPage.verifyOnStarTitle();
});

额外优化建议 #

• 避免使用setTimeout，改用Playwright提供的waitForLoadState、waitForLocator等方法，稳定性更强。
• 优先使用locator替代page.$，这是Playwright推荐的定位API，支持自动等待机制。
• 简化元素定位表达式，比如'h2:has-text("Pre-Owned Activation")'比冗长的XPath更易读和维护。

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