Creating the Base Scenarios

Validate the Title of a Website

Creating the Cucumber Scenario

  1. Open up the ‘base-scenarios.feature’ file and add the following test scenario…

    These steps are still undefined. If we try to run our test, it will fail, however it will output the undefined step definitions that we need, so let’s do that now.

Creating the Undefined Step Definitions

  1. Open up the Terminal (or Command prompt) window and change directory (cd) in to the root of your WebDriverIO project again…
    cd your/Project/Root
  2. Run your test suite with the following command…
    npm test The test will obviously fail, but you will get output in the console like below…

    This is useful, as we can copy and paste these undefined step definitions into the relevant steps.js files.
  3. Firstly, let’s open up the ‘base-scenarios-steps.js’ file and add the following import to the top so we can use the Given, When and Then step definitions…

    In fact, feel free to add this same import to the top of all the step definition files 🙂
  4. Copy and paste the undefined ‘Given I navigate to the base URL’ step definition in to the ‘base-scenarios-steps.js’ file, it should look similar to below…
  5. Because our base page is also the search page, let’s slightly tweak our undefined ‘Given’ step definition so that we can use RegEx to either use the word ‘base’ or ‘search’ when referring to the step and being on the page, without capturing the match (see https://agileforall.com/just-enough-regular-expressions-for-cucumber/ for more info…
  6. Next, copy and paste the undefined ‘Given I see the page title contains…’ step definition in to the ‘base-scenarios-steps.js’ file, changing the Given to a Then. Also change the name of the argument from ‘arg1’ to something more suitable, like ‘expectedPageTitle’  The whole should look similar to below…

Defining the Step Definitions

‘Given I am on the base page’ step definition

We already added the page.open() command in our ‘base.page.js’ file, which navigates and open the base URL for us. All we need to do is import the page object and call that in our step definition.

  1. Open up the ‘base-scenarios-steps.js’ file again and add the following import to the top of the file so we can use the base page object…
  2. Also add an instance of our Page class that we can use, like so…
  3. Edit the ‘Given’ step definition to now call the page.open() function, like below…

‘Then I see the page title contains…’ step definition

We can add a function to our base page object which returns the page title of the current page we are on.

  1. Open up the ‘base.page.js’ file in the ‘/page-objects’ folder and add the following function in the Page class to return the current page title…

    The whole thing should look like below…
  2. Go back to the ‘base-scenarios-steps.js’ step definition file and define the ‘Then’ step to assert that the value returned from ‘page.title’ contains the ‘expectedPageTitle’ that we pass in from our scenario…

    The whole thing should look like below…

    If you then run  npm test in the terminal (or command prompt) window, your test should pass successfully 🙂

Validate the URL of a Website

Creating the Cucumber Scenario

  1. Open up the ‘base-scenarios.feature’ file and add the following test scenario…

    We have reused the ‘Given’ step, which is already defined.  It is only this new ‘Then’ step which is still undefined.

Creating the Undefined Step Definition

  1. Open up the Terminal (or Command prompt) window and change directory (cd) in to the root of your WebDriverIO project again…
    cd your/Project/Root
  2. Run your test suite with the following command…
    npm test The test will obviously fail, but you will get output in the console like below for the undefined step definition…
  3. Copy the pending ‘Given’ step, and paste it in to the ‘base-scenarios-steps.js’ file, changing the ‘Given’ to a ‘Then’ and changing the name of the ‘arg1’ argument to something more meaningful, like below…

    The whole thing should look similar to below…

Defining the Step Definition

‘Then I see the page URL contains…’ step definition

We can add a function to our base page object which returns the URL of the current page we are on.

  1. Open up the ‘base.page.js’ file in the ‘/page-objects’ folder and add the following function in the Page class to return the current page URL…

    The whole thing should look similar to below…
  2. Open up the ‘base-scenarios-steps.js’ file again and define the undefined ‘Then’ step by asserting that the value returned from ‘page.url’ contains the ‘expectedPageUrl’ that we pass in from our test scenario…

    The whole file should look like below…

Validate a PageSource String on the Website

Creating the Cucumber Scenario

  1. Open up the ‘BaseScenarios.feature’ file and add the following test scenario…

    We have again reused the ‘Given’ step, which is already defined.  It is only this new ‘Then’ step which is still undefined.

Creating the Undefined Step Definition

  1. Open up the Terminal (or Command prompt) window and change directory (cd) in to the root of your WebDriverIO project again (if necessary)…
    cd your/Project/Root
  2. Run your test suite with the following command…
    npm test The test will obviously fail, but you will get output in the console like below for the undefined step definition…
  3. Copy the pending ‘Given’ step, and paste it in to the ‘base-scenarios-steps.js’ file, changing the ‘Given’ to a ‘Then’ and changing the name of the ‘arg1’ argument to something more meaningful, like below…

    The whole thing should look similar to below…

Defining the Step Definition

‘Then I see the page source contains…’ step definition

We can add a function to our base page object which returns the page source of the current page we are on.

  1. Open up the ‘base.page.js’ file in the ‘/page-objects’ folder and add the following function in the Page class to return the current page source…

    The whole thing should like below…
  2. Open up the ‘base-scenarios-steps.js’ file again and define the undefined ‘Then’ step to assert that the value returned from ‘page.source’ contains the ‘expectedPageSource’ value passed in from our test scenario…

    The whole thing should look like below…

Validate Existence of Multiple Text in PageSource

Creating the Cucumber Scenario

  1. Open up the ‘BaseScenarios.feature’ file and add the following test scenario…

    We have again reused the ‘Given’ step, which is already defined.  It is only this new ‘Then’ step, which has a data table, that is still undefined.

Creating the Undefined Step Definition

  1. Open up the Terminal (or Command prompt) window and change directory (cd) in to the root of your WebDriverIO project again (if necessary)…
    cd your/Project/Root
  2. Run your test suite with the following command…
    npm test The test will obviously fail, but you will get output in the console like below for the undefined step definition…

    This pending step in the console is slightly wrong and does not contain anything for our data table, so we will need to add that.
  3. Copy and paste the pending ‘Given’ step in to the ‘base-scenarios-steps.js’ file, changing the ‘Given’ to a Then and editing it to be able to use the data table, like below…

    We will add more details for use of the data table when we define the step 🙂
    The whole thing should look like below…

Defining the Step Definition

‘Then I see…’ step definition

We already have a getter function in our base page object to get the page source, so we can simply re-use this when asserting that the page source contains each row of data in our data table.

  1. Open up the ‘base-scenarios-steps.js’ file and edit the step definition to assert that the page source contains the passed in data from the data table, for each row of the table…

    The whole completed ‘base-scenarios-steps.js’ file should now look like below…

Cucumber Background Step

  1. If you look at the four base scenarios in your ‘BaseScenarios.feature’ file, you will see that every scenario shares the step of ‘Given I navigate to the base URL’.  Because of this, we can clean up the Feature file a bit by declaring the ‘Given’ step once as a Background step, which will be applied at the beginning of every scenario in the Feature file (see https://github.com/cucumber/cucumber/wiki/Background for more information)…

We have now successfully added our BaseScenarios.  In the next part, we will actually add our first proper test of searching for something on Google and then clicking through on a search result.

If we now run our tests via  npm test , all the tests should pass fully 😀

In the next section, we will begin to write our first proper test scenario!

Liked it? Take a second to support Thomas on Patreon!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.