VueJS+Playwright测试在Bitbucket流水线失败本地正常求助

核心问题定位 #

从报错信息Received string: "undefined | Title test - EN"和测试代码来看，测试代码中存在明显的拼写错误，这是导致流水线测试失败的直接原因：

在beforeEach的/api/init路由mock中，你误将json写成了ison：

// 错误写法
await route.fulfill({ ison })
// 正确写法应为
await route.fulfill({ json })

这个拼写错误会导致/api/init接口无法正确返回mock数据，页面初始化时依赖该接口的pageTitle计算属性无法获取有效值，最终导致vue-meta生成的标题出现undefined。本地容器可能因缓存、测试环境预加载等原因掩盖了这个问题，但Bitbucket流水线是全新的干净环境，直接触发了错误。

修复步骤 #

1. 修正测试代码的拼写错误 #

将/api/init路由的mock代码修正为：

await page.route('http://localhost:8090/api/init', async route => {
    const json = {
        ...init
    }
    await route.fulfill({ json }) // 修正拼写错误
})

2. 优化测试的等待逻辑（可选） #

流水线中的Chromium运行环境与本地存在性能差异，可增加等待逻辑确保页面完全渲染后再断言：

test('click on one sitemap element', async ({ page }) => {
    await page.getByTestId('sitemap').click()
    await page.getByText('Homepage').click({ force: true })
    
    // 等待页面网络请求完成
    await page.waitForLoadState('networkidle')
    // 或等待Home页面的标志性元素出现
    await page.waitForSelector('[data-testid="home-page"]')
    
    await expect(page).toHaveTitle(/Home/)
})

3. 优化vue-meta的标题模板逻辑（可选） #

避免因pageTitle为undefined时出现多余的分隔符，调整标题模板：

metaInfo () {
    return {
        title: 'Home',
        titleTemplate: '%s' + (this.pageTitle ? ` | ${this.pageTitle}` : '')
    }
}

4. 验证mock数据一致性 #

确保Bitbucket流水线中加载的init、sitemap等mock文件与本地完全一致，避免因文件差异导致的数据缺失。

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