@iamkenos/hornet NPM

About

WebdriverIO that comes with presets and additional features:

write async tests with TypeScript and Cucumber
gherkin statements that can be used out of the box
browser and elements expected conditions
generic classes for page objects and custom webcomponents support
multi-locale support
internal polling and retries
reporters:
services:

Requirements

NodeJS ≥ 16.3.0 or ≤ LTS
JRE ≥ 8

Get Started

You'll need a working knowledge of WebdriverIO to be able to use this library. They have rich documentation so head on over the site and read on if you're not familiar with it yet.

Get it: npm install @iamkenos/hornet

Create a tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "esModuleInterop": true,
    "types": [
      "@wdio/cucumber-framework",
      "@wdio/selenium-standalone-service",
      "@wdio/browserstack-service",
      "@wdio/devtools-service",
      "wdio-intercept-service",
      "webdriverio/async",
      "@iamkenos/hornet",
      "node"
    ]
  },
  "include": ["./**/*.ts"]
}

Create your WebdriverIO config file: wdio.conf.ts

import { configure } from "@iamkenos/hornet/config";

// you can set most of the wdio config props from here, leave some that are restricted.
// e.g. the `framework` prop cannot be overriden as it's fixed to cucumber
export const config = configure({
  baseUrl: "https://the-internet.herokuapp.com/"
});

Create your page metadata files:

// fixtures/app.meta.ts
export default {
  default: {
    url: "/",
    title: "The Internet",
    selectors: {
      flash: "#flash"
    }
  }
};

// fixtures/login.meta.ts
import merge from "lodash/merge";
import app from "./app.meta";

export default merge({}, app, {
  default: {
    url: "/login",
    selectors: {
      Username: "#username",
      Password: "#password",
      Login: "//button[@type='submit']"
    }
  }
});

// fixtures/secure.meta.ts
import merge from "lodash/merge";
import app from "./app.meta";

export default merge({}, app, {
  default: {
    url: "/secure"
  }
});

Create your feature file: features/login.feature

Feature: Login

  Background:
    Given I am on the "login" page

  Scenario: S01: Login with valid credentials
    When I type on the fields:
      | Field    | Value                |
      | Username | tomsmith             |
      | Password | SuperSecretPassword! |
      And I click the "Login" button
    Then I expect to be on the "secure" page
      And I expect the "flash" element text to contain "You logged into a secure area!"

  Scenario: S02: Login with invalid credentials
    When I type on the fields:
      | Field    | Value  |
      | Username | foobar |
      | Password | barfoo |
      And I click the "Login" button
    Then I expect to still be on the "login" page
      And I expect the "flash" element text to contain "Your username is invalid!"

Run it: npx wdio wdio.conf.ts
Check the results: npx allure open .reports/allure/html
You can view other gherkin steps available out-of-the-box here.