剧作家单元测试课

Question

我有一个可以与剧作家一起进行单元测试的设置。设置是（只是重要的文件）

~/folder: ls
sum.js
tests/foo.spec.js

sum.js

function sum(a, b) {
  return a + b*2;
}

foo.spec.js

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

test.describe('simple suite test', () => {
    test('unit test sum.js function', async ({ page }) => {

        await page.addScriptTag({path: 'sum.js'});
        const data = await page.evaluate(() => window.sum(1,7));
        await expect(data).toBe(15); // 1+7*2=15
        
    });
 });

测试通过

npx playwright test foo.spec.js --project chromium

执行。

现在我想调用一个类函数，但我不知道该怎么做？我必须以某种方式创建对象并调用该函数。但如何呢？

sum.js（已更新）

class Calc {
    add(a,b) {
        return a + b*3;
    }
}

foo.spec.js（已更新）

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

test.describe('simple suite test', () => {
    test('unit test sum.js function', async ({ page }) => {

        await page.addScriptTag({path: 'sum.js'});
        const data = await page.evaluate(() => window.object.add(1,7));  // <- how to call the class function?
        await expect(data).toBe(22); // 1+7*3=22
        
    });
 });

Answer 1

这个例子有点做作——需要向网站注入一个类是“极不常见”的。 Playwright 测试的要点是像用户一样操作网站，而不注入一堆用户无权访问的自定义代码。 通常在您正在测试的站点之外的 Node 中执行该实用程序工作，尤其是当它不与 DOM 交互时。

也就是说，有几种方法可以做到这一点。

一种方法是将您的类分配给窗口，以便它在全局范围内可用：

// sum.js
window.Calc = class Calc {
  static add(a, b) {
    return a + b;
  }
};

// pw.test.js (run with npx playwright test)
import {test, expect} from "@playwright/test";

test.describe("simple suite test", () => {
  test("unit test sum.js function", async ({page}) => {
    await page.addScriptTag({path: "sum.js"});
    const sum = await page.evaluate(() => window.Calc.add(1, 7))
    await expect(sum).toBe(8);
  });
});

另一种方法是对类进行字符串化，即使代码已经在测试程序的内存中运行，这种方法也可以工作。虽然它是为 Puppeteer 编写的，但

这个答案

也适用于 Playwright。