Let's add a tests scenario to test Input field and Button form:
- On the Home page click Elements link in the main navigation menu
- On Elements page click Input field and Button link
- On Input field and Button page enter "Alex" in the corresponding input field
- Click Submit button
- 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
