What is the best way to set up multiple tests on one webpage with Selenium Webdriver and Cucumber JS?

Question

I am new to automated testing, Selenium and Cucumber.JS and am trying to set it up in Node.JS to run several tests on my website.

I have gotten single scenarios/test working fine, but I am a bit confused as to how to set up multiple Scenarios and Step files.

For example, if I wanted to check that my home page has both a working drop down menu and banner would I do (on home-page.feature):

Feature: Home Page

    Scenario: Check the home page
        Given I am on the home page
        When a main menu item is clicked
        Then the dropdown menu should appear
        And there should be a banner

Or:

Feature: Home Page

    Scenario: Check the menu
        Given I am on the home page
        When a main menu item is clicked
        Then the dropdown menu should appear

    Scenario: Check the banner
        Given I am on the home page
        When the home page loads
        Then there should be a banner

Also, if the latter, with the 2 scenarios, is better to do would I create 2 steps.js files, or try to put 2 sets of Given(), When(), Then() functions on the one homePageSteps.js file, e.g. (not working):

Given('I am on the home page',  async function () {
    this.driver = new Builder()
        .forBrowser('firefox')
        .build();
    this.driver.wait(until.elementLocated(By.tagName('h1')));
    await this.driver.get('https://www.awebsite.com');
});

When('a main menu item is clicked', async function() {
    var menuItems = await this.driver.findElements(By.className('main-menu-item'));
    var firstMenuItem = menuItems[0];
    firstMenuItem.click();
});

Then('the mega menu should appear', async function() {
    var megaMenu = await this.driver.findElements(By.className('dropdown-menu'));
    var megaMenuHeight = megaMenu[0].getCssValue("max-height");
    assert.notEqual(megaMenuHeight, 0);
});


Given('I am on the home page',  async function () {
    this.driver = new Builder()
        .forBrowser('firefox')
        .build();
    this.driver.wait(until.elementLocated(By.tagName('h1')));
    await this.driver.get('https://www.awebsite.com/');
});

When('the home page loads', async function() {
    // Something to tell that the page is loaded
});

Then('there should be a banner', async function() {
    var banner = await driver.findElement(By.name('range_input')).getRect();
    assert.ok(banner.height!==null)
});

I've tried searching for the right way to doing this, but everything I find seems to be tutorials on how to just do 1 scenario.

Could anyone point me in the right direction?

Answer 1

Welcome to the world of automated testing. There generally isn't a 'right' answer to your question and a lot of it comes down to personal preference, however I will break it down and approach it with my own mindset:

Feature: Home Page

    Scenario: Check the home page
        Given I am on the home page
        When a main menu item is clicked
        Then the dropdown menu should appear
        And there should be a banner

In this instance, we are essentially saying that all of the homepage verification tests should be within their own scenario - this makes sense, right? Except the issue we introduce here is that the banner now relies upon the dropdown menu. The test runs sequentially, it will get to the dropdown line, and if the dropdown is not present the test will now fail.

If we split the tests out into two separate scenarios, we add more value. We can turn to our team and give them more specific information - the dropdown menu is not present, however the banner is.

So, I think this is the correct approach:

Feature: Home Page

    Scenario: Check the menu
        Given I am on the home page
        When a main menu item is clicked
        Then the dropdown menu should appear

    Scenario: Check the banner
        Given I am on the home page
        When the home page loads
        Then there should be a banner

All of these steps should live within the homePageSteps.js file, you are correct.