如何在Playwright测试中使用自定义Composable并访问其内部变量？

嘿，我完全懂你现在的困扰——之前用Pinia在Playwright里拿状态顺手得很，换成自定义Composable后突然卡壳了对吧？结合你的需求（要判断cookie banner是否显示，必须拿到xIpContinent的值），给你几个实用的解决方案：

方案一：临时在测试/开发环境把Composable状态挂载到window（最简单直接） #

既然之前Pinia是挂在window.__NUXT__下面的，我们可以照着这个思路，把useSettings的状态也挂载到同一个对象上，而且只在测试或开发环境生效，完全不会影响生产代码：

首先修改你的useSettings Composable：

// composables/useSettings.ts
export const useSettings = () => {
  const xIpContinent = ref('')
  // 这里写你的业务逻辑，比如根据IP获取大洲信息...

  // 仅在开发/测试环境暴露到window，方便Playwright访问
  if (process.dev || process.test) {
    if (typeof window !== 'undefined') {
      // 确保__NUXT__对象存在
      window.__NUXT__ = window.__NUXT__ || {}
      // 把我们需要的状态挂进去
      window.__NUXT__.useSettings = { xIpContinent }
    }
  }

  return { xIpContinent }
}

然后在你的Playwright测试里，就可以像之前访问Pinia那样获取变量了：

// 页面加载完成后，在浏览器上下文中执行代码获取值
const continent = await page.evaluate(() => {
  return window.__NUXT__?.useSettings.xIpContinent.value
})

// 根据拿到的大洲值判断cookie banner是否应该显示
if (continent === 'EU') {
  await expect(page.getByRole('banner', { name: /cookie/i })).toBeVisible()
} else {
  await expect(page.getByRole('banner', { name: /cookie/i })).not.toBeVisible()
}

方案二：通过页面标识间接判断（更符合黑盒测试思路） #

如果你不想修改Composable的代码，也可以在页面上添加一个隐藏的标识，把xIpContinent的值传递进去，比如在根组件（比如app.vue）里：

<template>
  <!-- 给根元素加一个data属性，存储大洲信息 -->
  <div :data-user-continent="xIpContinent">
    <!-- 你的页面内容 -->
    <CookieBanner v-if="xIpContinent === 'EU'" />
  </div>
</template>

<script setup>
const { xIpContinent } = useSettings()
</script>

然后在Playwright测试里，直接读取这个data属性的值：

const continent = await page.getAttribute('div[data-user-continent]', 'data-user-continent')

// 后续的断言逻辑和方案一一致
if (continent === 'EU') {
  await expect(page.getByRole('banner', { name: /cookie/i })).toBeVisible()
} else {
  await expect(page.getByRole('banner', { name: /cookie/i })).not.toBeVisible()
}

这个方法不需要暴露内部状态，更贴近真实用户的访问场景，属于框架无关的测试方式，也符合你提到的“框架无关测试”的思路。

方案三：直接在测试文件中导入Composable（仅限无Nuxt上下文依赖的情况） #

如果你的useSettings没有依赖Nuxt的专属API（比如useRuntimeConfig、useRouter这类），是纯逻辑的Composable，那也可以直接在Playwright测试文件里导入调用：

import { useSettings } from '../composables/useSettings'

test('测试cookie banner显示逻辑', async () => {
  const { xIpContinent } = useSettings()
  // 这里可能需要模拟IP相关的逻辑，因为Composable原本是在浏览器环境运行的
  // 比如手动给xIpContinent赋值，或者模拟请求返回的IP信息

  // 然后根据值断言页面行为
  // ...
})

不过这个方法局限性比较大，如果你的Composable依赖Nuxt上下文，就需要额外模拟这些依赖，反而会增加测试复杂度，所以一般不推荐这种方式。

总结一下，方案一和方案二是最适合你的场景的，选哪个看你更倾向于白盒测试（直接拿内部状态）还是黑盒测试（通过页面标识判断）~

备注：内容来源于stack exchange，提问作者Tim