使用Mocha和剧作家在所有测试之前运行根钩子插件

Question

通过将这个插件添加到我的项目中，我为Vuejs项目连接了一些自动化测试。

Vuejs应用程序是使用vue-cli创建的。

这一切都很好，剧作家似乎是一个非常强大的自动化库。

所以我试着写一个Mocha根钩子插件，它在所有测试之前运行一次。看起来是这样的：

hooks.js

const playwright = require("playwright");

export const mochaHooks = {
  beforeAll() {
    const browser = await playwright["chromium"].launch({
      headless: false
    });

    const context = await browser.newContext();

    await page.goto("https://localhost:44392/");

    await page.fill("#Username", "demokitchenadmin");
    await page.fill("#Password", "Test1234)");

    await page.click("button.btn-primary");

    await context.storageState({ path: 'state.json' });

    await page.close();
    await context.close();
    await browser.close();
  }
};

我不知道如何将它与我的Vuejs项目集成。我尝试添加--require标志(多科)，以便使测试命令看起来如下(在package.json中)：

"scripts": {
    ...
    "test:e2e": "vue-cli-service test:e2e --require './tests/e2e/hooks.js",
},

不幸的是，这不能成功地运行hooks.js文件中的代码。

有人能把我推向正确的方向吗。干杯

Answer 1

好的。所以我很亲密。

我不得不使用CommonJS语法。

我认为我需要继续努力，因为我想让它在打字稿中发挥作用。

在任何情况下，对于任何希望解决此问题的其他人，我都将hooks.js文件更改如下：

const playwright = require("playwright");


exports.mochaHooks = {
  async beforeAll() {

    const browser1 = await playwright["chromium"].launch({
      headless: false
      //devtools: true
    });

    const context1 = await browser1.newContext();
    const page = await context1.newPage();

    await page.goto("https://localhost:44392/account/login");


    await page.fill("#Username", "demokitchenadmin");
    await page.fill("#Password", "Test1234)");

    await page.click("button.btn-primary");

    await context1.storageState({ path: 'state.json' });

    await page.close();
    await context1.close();
    await browser1.close();
  }
};

在我的package.json里

"scripts": {
    ...
    "test:e2e": "vue-cli-service test:e2e -r ./tests/e2e/hooks",
},

这是可行的，在我的所有测试之前，身份验证代码只运行一次。

Answer 2

使用全局设置函数(https://playwright.dev/docs/test-advanced#global-setup-and-teardown)，它可以在playwright.config.ts中定义。