How to put Before() & After() hooks in a hooks.js file in Selenium / JavaScript project?

Question

In my Selenium JS / Cucumber framework, I have Before() & After() functions that create & tear down my webdriver.

I have put them in my customSteps.js file along with the other cucumber steps like so:

const { When, Then, Before, After } = require('@cucumber/cucumber')
const webdriver = require('selenium-webdriver')

let driver;

Before(() => {
    driver = new webdriver.Builder()
    .forBrowser('chrome')
    .build();
})

After(() => {
    driver.quit();
})

When('I visit {string}', {timeout: 2 * 5000},  async url => {
    await driver.get(url)
});

Then('the page header {string} is displayed', async expectedPageHeader => {});

When('I click the {string} button', async text => {});

Then('I am brought to the {string} page', async text => {});

When('the intro header text is {string}', async expectedPageHeader => {});

When('the intro subheader text is {string}', async expectedSubHeader => {});

Here are my scripts in package.json:

"scripts": {
    "test": "node_modules/.bin/cucumber-js -f @cucumber/pretty-formatter features/test.feature"
  }

My client has told me that only the Given, When, & Then steps should be in my customSteps.js, & that Before() & After() should be in hooks.js in a support folder.

I have tried to find Selenium JavaScript solutions online that do this, but I haven't been able to find one yet.

Can someone please tell me if my approach is the better approach, or should I be putting Before() & After() in a hooks.js file?

Also, some advice on how to do so would be appreciated, as those functions interact with my driver variable, which is needed in the Given step to visit the URL.

Finally, here's a picture of my current folder structure in case it's useful:

What does your npm test command look like? – Raju Jul 19 '22 at 22:02 — Raju, Jul 19 '22 at 22:02
Hi @Raju, I've updated my question with my `test` command – user9847788 Jul 19 '22 at 22:05 — user9847788, Jul 19 '22 at 22:05

score 0 · Answer 1 · answered Jul 19 '22 at 22:10

If you are using cucumber runner, then you can add them into a separate file and pass it to the command.

cucumber.conf.js

const { Before, After } = require('@cucumber/cucumber');

Before(() => {
    global.driver = new webdriver.Builder()
    .forBrowser('chrome')
    .build();
})

After(() => {
    driver.quit();
})

Then you should pass this as:

"scripts": {
    "test": "node_modules/.bin/cucumber-js --require cucumber.conf.js -f @cucumber/pretty-formatter features/test.feature"
  }

This repo has a similar example with the tool playwright.

PetKap · Answer 2 · 2022-07-25T06:05:53.100

I would say it's more up to you how you decide to organise it.

But the reason why people are suggesting to have separately Given/When/Then/And and separately hooks is in first place one of best practices for writing StepDefs and then more about better readability and I would say also easier investigation in case you have some failure. Imagine if you have 40-50 StepDef classes and everywhere you have some Before/After hooks. It will become quite messy and not easy to follow what's happening before/after scenarios.

To the other question. If I understood it correctly you are asking how to reuse same instance of driver in more StepDef classes right? If yes this is the answer: Sharing same selenium WebDriver between step definition files.

How to put Before() & After() hooks in a hooks.js file in Selenium / JavaScript project?

2 Answers2