Playwright单元测试中如何调用自定义类的方法？

问题根源 #

你当前的代码无法调用add方法的核心原因是：sum.js里的Calc类仅存在于脚本的局部作用域，并没有暴露到浏览器全局的window对象上，所以page.evaluate的回调函数里访问不到这个类。

两步解决方法 #

1. 修改sum.js，将Calc类挂载到全局window

需要把类暴露给浏览器全局上下文，这样Playwright的页面环境才能访问到：

class Calc {
    add(a,b) {
        return a + b*3;
    }
}
// 将类挂载到window全局对象
window.Calc = Calc;

2. 更新测试代码，实例化类并调用方法

在page.evaluate中，先实例化Calc类，再调用其add方法：

const { test, expect } = require('@playwright/test');

test.describe('simple suite test', () => {
    test('unit test sum.js Calc class', async ({ page }) => {
        await page.addScriptTag({path: 'sum.js'});
        // 实例化Calc并调用add方法
        const data = await page.evaluate(() => new window.Calc().add(1,7));
        await expect(data).toBe(22); // 1+7*3=22
    });
 });

可选简化写法 #

如果觉得实例化的代码太长，也可以拆成多行提升可读性：

const data = await page.evaluate(() => {
  const calc = new window.Calc();
  return calc.add(1, 7);
});

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