如何在Nuxt应用中识别当前是否处于TestCafe E2E测试环境

TestCafe本身没有像Cypress那样内置window.Cypress这类全局标识，但可以通过以下两种可靠方法实现环境判断：

方法一：TestCafe注入全局变量 #

利用TestCafe的clientScripts功能，在测试启动时向页面注入自定义全局变量，Nuxt客户端就能直接读取该标识。

配置方式1：在测试文件中设置 #

在TestCafe测试fixture里添加clientScripts配置：

fixture('结算页测试')
    .page('https://your-nuxt-app-url.com')
    .clientScripts({ content: `window.isTestCafe = true;` });

配置方式2：命令行参数 #

运行TestCafe时通过--client-scripts参数直接注入变量：

testcafe chrome ./tests/ --client-scripts content="window.isTestCafe=true"

Nuxt中判断逻辑 #

需确保在客户端环境下读取（避免服务端渲染报错）：

// Nuxt 2 组件示例
export default {
    mounted() {
        if (process.client && window.isTestCafe) {
            // 点击按钮时跳转旧结算页的逻辑
            this.$router.push('/old-checkout');
        }
    }
}

// Nuxt 3 组件示例
import { useRouter } from 'vue-router';

export default {
    setup() {
        const router = useRouter();
        if (process.client && window.isTestCafe) {
            router.push('/old-checkout');
        }
    }
}

方法二：通过URL参数传递标识 #

在TestCafe测试中打开页面时附加查询参数，Nuxt读取该参数判断当前是否为测试环境。

TestCafe测试配置 #

修改fixture的页面URL，添加测试标识参数：

fixture('结算页测试')
    .page('https://your-nuxt-app-url.com?testcafe=1');

Nuxt中读取参数 #

Nuxt 2 示例

export default {
    mounted() {
        const urlParams = new URLSearchParams(window.location.search);
        const isTestCafe = urlParams.get('testcafe') === '1';
        if (isTestCafe) {
            this.$router.push('/old-checkout');
        }
    }
}

Nuxt 3 示例

import { useRoute } from 'vue-router';

export default {
    setup() {
        const route = useRoute();
        const isTestCafe = route.query.testcafe === '1';
        if (isTestCafe) {
            // 跳转旧结算页逻辑
        }
    }
}

关于之前尝试方法失效的说明 #

• 环境变量：TestCafe的环境变量属于测试进程的服务端环境，不会自动同步到浏览器的客户端环境，因此Nuxt无法直接读取。
• window._isTestcafe/window['%hammerhead%']：这些是TestCafe内部依赖的私有变量，官方未对外暴露，不同版本可能会被隐藏或修改，稳定性无法保证，不建议依赖。

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