如何使用 Playwright 在浏览器上下文中导入本地模块?

这是我正在尝试做的一个例子:

../src/Foo/Bar.ts 是本地打字稿文件

文件中的代码是为了在浏览器上下文中运行(它访问 WebSockets ),所以我需要在 page.evaluate 中运行它

page.evaluate( async () => {
    const { namedExportExample } = await import('../src/Foo/Bar;)

    // ...
});

我得到 page.evaluate: TypeError: Failed to resolve module specifier 并且我并不感到惊讶,我不确定浏览器如何评估该导入,但我想知道如果可能的话是否有办法做到这一点?

stack overflow How do you import local modules in the browser context with Playwright?
原文答案

答案:

作者头像

Playwright 脚本在您的 Playwright 环境中运行。您的页面脚本在浏览器页面环境中运行。这些环境不相交,它们在不同进程的不同虚拟机中运行,甚至可能在不同的计算机上运行。

在您的场景中,您尝试在页面内导入文件,该页面不知道在哪里导入该文件。您需要对函数进行字符串化并将其传递到页面上以对其进行评估。

有关更多信息,请参见此处: https://playwright.dev/docs/evaluating

作者头像

我不确定浏览器如何评估该导入,但我想知道如果可能的话是否有办法做到这一点?

由于@max-schmitt 解释的原因,您无法导入模块。但是 Playwright 的“上下文”提供了一种在浏览器实例中注入新功能的方法。

browserContext.exposeFunction(name, callback)

https://playwright.dev/docs/api/class-browsercontext#browser-context-expose-function

###### 例子

import * as crypto from "node:crypto" 

const browser = await chromium.launch(...)
const context = await browser.newContext()

// !!! Exposing a new function !!!
await context.exposeFunction("sha256", text => crypto.createHash('sha256').update(text).digest("hex")) 

const page = await context.newPage()
await page.goto(URL)

...
await someBox.evaluate((box : HTMLElement) => {
  console.log("!!!", window["sha256"]) // available !!!
  ...
})