Within my Selenium JS / Cucumber framework, I have incorporated Before() & After() functions to handle the setup and tear down of my webdriver.
To manage these functions, I decided to organize them in my customSteps.js file alongside other cucumber steps. Here's a snippet of how it looks:
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 go to {string}', {timeout: 2 * 5000}, async url => {
await driver.get(url)
});
Then('the page header {string} is shown', async expectedPageHeader => {});
When('I click on the {string} button', async text => {});
Then('I am directed to the {string} page', async text => {});
When('the intro heading says {string}', async expectedPageHeader => {});
When('the intro subheading reads {string}', async expectedSubHeader => {});
In my package.json, here are the respective scripts:
"scripts": {
"test": "node_modules/.bin/cucumber-js -f @cucumber/pretty-formatter features/test.feature"
}
Recently, my client advised me to migrate only the Given, When, & Then steps to my customSteps.js file, while relocating the Before() & After() functions to a separate hooks.js file within a designated support folder.
I've scoured online resources for guidance on implementing this structure in Selenium JavaScript, but without success thus far.
If anyone could offer advice on whether this reorganization is more efficient, as well as some tips on how to execute it successfully, I would greatly appreciate it. It's worth noting that these functions interact with my driver variable crucially utilized in the Given step for URL navigation.
Lastly, included below is an image illustrating my current directory arrangement for reference: