TestCafé中injectScripts注入脚本位置及调用方法问询

1. InjectScripts 配置的脚本会被注入到哪里？ #

当你通过 injectScripts（TestCafé官方文档中现在更多称其为 clientScripts，功能完全一致）配置注入脚本时，这些脚本会被注入到被测页面的 <head> 标签中，并且会在页面加载的早期阶段执行——具体是在页面的DOMContentLoaded事件触发之前。

而且这个注入是全局生效的：所有被测页面（包括测试过程中导航到的新页面、弹出窗口等）都会自动加载这些脚本，不需要重复配置。

2. 如何从测试代码中调用注入的函数？ #

首先得明确一个核心点：TestCafé的测试代码运行在Node.js上下文，而你注入的脚本是运行在浏览器上下文里的，这两个环境完全隔离，所以你不能直接在测试代码里调用浏览器里的函数——必须通过TestCafé提供的桥接API来执行浏览器端的代码。

具体实现步骤： #

假设你通过Runner的injectScripts注入了一个挂载到window对象的函数：

// Runner配置部分
const createTestCafe = require('testcafe');
let testcafe = null;

createTestCafe('localhost', 1337, 1338)
    .then(tc => {
        testcafe = tc;
        const runner = testcafe.createRunner();

        return runner
            .src('tests/*.js')
            .browsers('chrome')
            .injectScripts({
                content: `window.myInjectedFunc = function(msg) { 
                    console.log('Injected function called:', msg);
                    return 'Message received: ' + msg;
                }`
            })
            .run();
    })
    .then(failedCount => {
        console.log('Tests failed: ' + failedCount);
        testcafe.close();
    });

在测试文件中，你可以用 t.eval() 方法来执行浏览器端的代码，从而调用注入的函数：

// 测试文件
import { Selector } from 'testcafe';

fixture `Test injected function`
    .page `http://example.com`;

test('Call injected function from test', async t => {
    // 通过t.eval执行浏览器端代码，调用注入的函数
    const result = await t.eval(() => window.myInjectedFunc('Hello from test!'));
    
    // 在Node.js控制台输出结果
    console.log(result); // 输出 "Message received: Hello from test!"
    
    // 也可以用断言验证结果
    await t.expect(result).eql('Message received: Hello from test!');
});

为什么不能直接访问？ #

你提到能通过 t.testRun.opts.clientScripts 看到脚本内容，但这只是在Node环境里拿到了脚本的配置信息，并不是浏览器里已经执行后的函数。用eval解析执行这种方式不可取，因为你是在Node环境里执行了浏览器端的代码，和实际浏览器上下文完全无关，自然无法和页面交互。

而t.eval()的作用就是把你传入的函数序列化后，发送到浏览器端执行，再把结果返回给Node环境的测试代码——这才是TestCafé设计的正确跨上下文交互方式。

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