Visual Studio Code, WebdriverIO, JavaScript and Chrome - user scenario Input field and Button

 Let's add a tests scenario to test Input field and Button form:

1. On the Home page click Elements link in the main navigation menu
2. On Elements page click Input field and Button link
3. On Input field and Button page enter "Alex" in the corresponding input field
4. Click Submit button
5. Verify "Your name is Alex" text result

We will continue using xpath locators.

How to find locators in Chrome browser is demonstrated here.

1. Add MainMenu page object:

const BasePage = require('../pages/base.page')

const elementsLinkXpath = "//div[@id='PageList1']//li/a[contains(text(),'Elements')]";

class MainMenuPage extends BasePage {
    get elementsLink () { return $(elementsLinkXpath) }

    async clickElementsLinkLink () {
        await this.elementsLink.click()
    }
}

module.exports = new MainMenuPage();

2. Add Elements page object:

const BasePage = require('./base.page')

const elements_url = 'https://automation-playground.blogspot.com/p/elements.html';
const inputFieldAndButtonLinkXpath = "//li/a[contains(text(),'Input field and Button')]";
const elementsPageTitleXpath = "//h3[@class = 'post-title entry-title' and contains(text(), 'Elements')]";

class ElementsPage extends BasePage {
    get inputFieldAndButtonLink () { return $(inputFieldAndButtonLinkXpath) }
    get elementsPageTitle () { return $(elementsPageTitleXpath) }

    async clickInputFieldAndButtonLink () {
        await this.inputFieldAndButtonLink.click()
    }

    async waitForElementsPageTitle () {
        await this.elementsPageTitle.waitForDisplayed({ timeout: 100000 })
    }
}

module.exports = new ElementsPage();

3. Add InputFieldAndButton page object:

const BasePage = require('./base.page.js');

const inputFieldAndButton_url = 'https://automation-playground.blogspot.com/2016/01/input-field-and-button.html';
const usernameFieldXpath = "//input[@id='user']";
const submitBtnXpath = "//button[@name='submit_action']";
const nameTextAreaXpath = "//textarea[@id='enteredName']";
const inputFieldAndButtonPageTitleXpath = "//h3[@class = 'post-title entry-title' and contains(text(), 'Elements')]";

class InputFieldAndButtonPage extends BasePage {
    get usernameField () { return $(usernameFieldXpath) }
    get submitBtn () { return $(submitBtnXpath) }
    get nameTextArea () { return $(nameTextAreaXpath) }
    get inputFieldAndButtonPageTitle () { return $(inputFieldAndButtonPageTitleXpath) }

    async open () {
        await super.open(inputFieldAndButton_url)
    }

    async waitForInputFieldAndButtonPageTitle () {
        await this.inputFieldAndButtonPageTitle.waitForDisplayed({ timeout: 100000 })
    }

    async enterUsername (name) {
        await this.usernameField.waitForDisplayed({ timeout: 100000 })
        await this.usernameField.setValue(name)
    }

    async clickSubmitBtn () {
        await this.submitBtn.click()
    }

    async getTextFromNameTextArea () {
        return await this.nameTextArea.getText()
    }
}

module.exports = new InputFieldAndButtonPage();

4. Add the test scenario in new feature file:

Feature: Input field and Submit button

Scenario: Verify Input and Submit page
  Given the Automation Playground blog open
  When I click Elements link in main menu
      And I click Input field and Button link on Elements page
      And I enter <name> in name input field
      And I click submit button
    Then the text in the text area should be equal <text>
    Examples:
      | name   | text                |
      | "Alex" | "Your name is Alex" |

5. Add new step definitions:

const MainMenuPage = require('../components/mainMenu.page.js');
const ElementsPage = require('../pages/elements.page.js');
const InputFieldAndButtonPage = require('../pages/inputFieldAndButton.page.js');

const { Before, Given, When, Then } = require('@cucumber/cucumber');
const assert = require('assert');

When('I click Elements link in main menu', async function () {
  MainMenuPage.clickElementsLinkLink();
  await ElementsPage.waitForElementsPageTitle();
});

When('I click Input field and Button link on Elements page', async function () {
  ElementsPage.clickInputFieldAndButtonLink();
  await InputFieldAndButtonPage.waitForInputFieldAndButtonPageTitle();
});

When('I enter {string} in name input field', async function (name) {
  await InputFieldAndButtonPage.enterUsername(name);
});

When('I click submit button', async function () {
  await InputFieldAndButtonPage.clickSubmitBtn();
});

Then('the text in the text area should be equal {string}', async function (text) {
  let actualText = await InputFieldAndButtonPage.getTextFromNameTextArea();
  assert(text, actualText);
});

6. Run the test

npm run test:bdd

The test scenarios executed with success:

7. Generate Allure report

allure generate reports/allure-results/ --clean

8. Open Allure report

allure open