Automate Your First Scenario

4 steps to automate

It very simple to start automating your first Codeceptjs-BDD Scenario. You can follow the Sample examples defined in the create-codeceptjs-bdd-tests framework.

🚀 Quick Start

Create Codeceptjs-BDD Test for your Application Under Test. This is one time step,

$ npx create-codecpetjs-bdd-tests

🧩 4 Steps to Automate your App

  1. Write a Feature
  2. Implement Steps
  3. Implement Page Object
  4. Assert your application

And Launch HTML Report

Let's automate the Add to Cart scenario for the Shopping App.

Step 1: Writing Feature File

First, start writing Feature Files. Please checkout the Beginners Mistakes to avoid mistakes.

Feature Files should be placed under features directory or sub-directories.

// features/add_to_cart.feature

@add_to_cart
Scenario: John can add shoes to shopping cart

    Given John searches for the "red pump" shoes from home page
    When he adds "2" shoes to the cart
    Then the cart has "2" pairs of "red pump" shoes

Step 2: Implement Steps

Steps should be placed under steps directory or sub-directories. All the Steps files should be named <name>.steps.js.

// steps/add_to_cart.steps.js

const {I, shoppingHomePage, productPage, cartPage} = inject();

Given(/John searches for the {string} shoes from home page/, (searchFor) => {
    shoppingHomePage.search(searchFor);
});

When(/he adds {string} shoes to the cart/, (quantity) => {
    productPage.addToCart(quantity);
});

When(/the cart has {string} pairs of {string} shoes/, (quantity, productTitle) => {
    shoppingHomePage.goToCart();

    (await cartPage.grabProductTitle()).trim().should.equal(productTitle);
    (await cartPage.grabQuantity()).should.equal(quantity);
});

The above steps.js assumes, the Navigation is handled in the hooks.steps.js file, as described in the example

Step 3: Implement Page Object

Page Objects should be placed under pages directory, and should follow the naming convention <pagename>.page.js.

// pages/shopping-home.page.js

const {I} = inject();

class ShoppingHomePage {
    constructor() {
        this.locators: {
            searchBox: '[data-automation="searchBar"]'
        }
    }

    search(searchFor) {
        I.fillField(I.grabCss(this.locators.searchBox), searchFor);
        I.pressKey('Enter');
    }
};

module.exports = new ShoppingHomePage();

Step 4: Assert your application

Codeceptjs-BDD supports should.js library to verify assertions.

(await cartPage.grabQuantity()).should.equal(quantity);

Step 5: Launch HTML Acceptance Report

Codeceptjs-BDD integrates the Allure HTML Reporting.

yarn acceptance:report

💯 Done. Follow the Setup your Test Environment Variables & Execution instructions to execute your first scenario.

How to VideosCHANGELOG