How do I integrate cucumber-js with selenium webdriver - selenium

Question

I'm kinda new to cucumber and selenium and I've been running into an issue with selenium webdriver where it doesn't connect or gets a "Error: ECONNREFUSED connect ECONNREFUSED "127.0.0.1:50546". I've tried both chromedriver and geckodriver for Firefox but still doesn't want to connect. I've been using the npm versions of each one as well as the downloaded ones. I've also tried simple synchronous code to get rid of the errors. I've also tried to specify the selenium-webdriver's port but that still doesn't work. Do I have to have the selenium stand-alone server? What am I missing here?
Gecko Driver Error: https://i.stack.imgur.com/oDtJB.png
Chrome Driver Error: https://i.stack.imgur.com/YhqhC.png
My .feature file:
Feature: Testing With Selenium
Scenario: Finding some cheese
Given I am on the Google search page
When I search for "Cheese!"
Then the page title should start with "cheese"
My step Definitions:
const {Given, When, Then, AfterAll} = require('#cucumber/cucumber');
const { Builder, By, Capabilities, Key } = require('selenium-webdriver');
const { expect } = require('chai');
const assert = require('assert');
//Driver and Browser setup
require('chromedriver');
const driver = new Builder().forBrowser('chrome').build();
function isItFriday(today) {
if(today == "Friday"){
return "TGIF";
}else{
return "Nope"
}
}
Given('today is {string}', function (givenDay) {
this.today = givenDay;
});
When('I ask whether it\'s Friday yet', function () {
this.actualAnswer = isItFriday(this.today);
});
Then('I should be told {string}', function (expectedAnswer) {
assert.strictEqual(this.actualAnswer, expectedAnswer);
});
Given('I am on the Google search page', {timeout: 60 * 1000}, async() => {
await driver.get('http://www.google.com');
});
When('I search for {string}', {timeout: 1000 * 1000}, async(searchTerm) => {
const element = await driver.findElement(By.name('q'));
element.sendKeys(searchTerm, Key.RETURN);
element.submit();
});
Then('the page title should start with {string}', function (string) {
const title = driver.getTitle();
const isTitleStartWithCheese = title.toLowerCase().lastIndexOf(`${searchTerm}`, 0) === 0;
expect(isTitleStartWithCheese).to.equal(true);
});
AfterAll(async () => {
await driver.quit();
});
My package.json file:
{
"name": "cucumberdemo",
"version": "1.0.0",
"description": "This is a demo project to understand the basics of Cucumber's BDD Testing Framework",
"main": "app.js",
"dependencies": {
"#cucumber/cucumber": "^8.0.0",
"chai": "^4.3.6",
"chromedriver": "^100.0.0",
"geckodriver": "^3.0.1",
"pactum": "^3.1.5",
"selenium-webdriver": "^4.1.1"
},
"scripts": {
"test": "cucumber-js"
},
"author": "Shahroz Noorani",
"license": "ISC"
}