Root Hook Plugin to Run Before All Tests with Mocha and Playwright

Question

I've hooked up some automated tests for my Vuejs project by adding this plugin to my project.

The Vuejs app was created using the vue-cli.

It all works fine and Playwright seems to be a very powerful automation library.

So I'm trying to write a Mocha root hook plugin which runs once before all of the tests. That looks something like this:

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();
  }
};

I'm not sure how to integrate this with my Vuejs project. I have tried to add the --require flag (doco) so that the test command looks like this (in package.json):

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

Unfortunately, this does not successfully run the code in that hooks.js file.

Can anybody nudge me in the right direction. Cheers

onefootswill onefootswill · Accepted Answer · 2021-07-05T22:34:25

OK. So I was close.
I had to use the CommonJS syntax.
I think I need to keep working on this,as I want to get it working in Typescript.

In any case, for any others looking to solve this problem, I changed my hooks.js file as follows:

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();
  }
};

And in my package.json:

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

This works and that authentication code ran once before all my tests.

Root Hook Plugin to Run Before All Tests with Mocha and Playwright

1 Answers