form api complete code

Author: jimuelmedrano

package.json

@@ -30,6 +30,7 @@
  "window": "env-cmd wdio run ./wdio.conf.ts --cucumberOpts.tagExpression='@window'",
  "dragdrop": "env-cmd wdio run ./wdio.conf.ts --cucumberOpts.tagExpression='@dragdrop'",
  "slider": "env-cmd wdio run ./wdio.conf.ts --cucumberOpts.tagExpression='@slider'",
+ "form": "env-cmd wdio run ./wdio.conf.ts --cucumberOpts.tagExpression='@form'",
  "sampletag": "env-cmd wdio run ./wdio.conf.ts --cucumberOpts.tagExpression='@sampletag'",
  "test-typescript": "env-cmd npx ts-node typescript-test.ts"
  }

wdio-test/features/form-api-features/form-api.feature

@@ -1,7 +1,7 @@
 Feature: Letcode Form Page
 
  @regression @form
- Scenario Outline: As a user, I can select an option using visible text
+ Scenario Outline: As a user, I can complete the form using API data
 
  Given I am on letcode workspace page
  When I click form page

wdio-test/page-objects/form-api-pages/form-api.page.ts

@@ -1,61 +1,137 @@
 import Page from '../page.js';
-import apiHelper from '../../helper/api-helper';
+import apiHelper from '../../../helper/api-helper.js';
 
 class FormPage extends Page {
 
  get openHomeButton(){ return $(`//button[normalize-space()='Open Home Page']`) };
 
 
- async clickOpenHomeButton(){
- const elmOpenHomeButton = await this.openHomeButton;
- await this.click(elmOpenHomeButton);
- }
+ 
 
- RANDOM_USER_API_URL="https://random-data-api.com"
-RANDOM_USER_API_ENDPOINT="/api/users/random_user"
  userInfo = apiHelper.GET(process.env.RANDOM_USER_API_URL, process.env.RANDOM_USER_API_ENDPOINT, '', {})
- friendlyName = ''
  firstName = ''
  lastName = ''
- birthDate = ''
- gender = ''
- maritalStatus = ''
- phoneCountryCode = ''
- phoneNumber = ''
  email = ''
+ phoneCountry = ''
+ phoneNumber = ''
  addressLine1 = ''
- country = ''
- province = ''
- city = ''
+ addressLine2 = ''
+ state = ''
  postalCode = ''
- workAvailability = ''
- currentSalaryCurrency = ''
- currentSalary = ''
- expectedSalaryCurrency = ''
- expectedSalary = ''
+ country = ''
+ birthDate = ''
+ gender = ''
 
  async initializeRandomData() {
  const apiRawResult = await this.userInfo;
  const apiResult = apiRawResult.body;
- this.friendlyName = 'Auto' + apiResult.first_name + this.randomString(5);
- this.firstName = apiResult.first_name
- this.lastName = 'Automation'
- this.birthDate = apiResult.date_of_birth
- this.gender = 'Male'
- this.maritalStatus = 'Single'
- this.phoneCountryCode = '+63'
- this.phoneNumber = '' + await this.getRandomInt(9000000000, 9999999999)
+ //for dates we can use moment.js but for this case we will use browser keys so random int is used
+ const randomMonth = await this.getRandomInt(1, 11);
+ const randomDay = await this.getRandomInt(1, 27);
+ const randomYear = await this.getRandomInt(1960, 2010);
+
+ this.firstName = apiResult.first_name;
+ this.lastName = apiResult.last_name;
+ this.birthDate = ''+randomMonth+randomDay+randomYear;
+ this.gender = 'Male';
+ this.phoneCountry = 'PH';
+ this.phoneNumber = '' + await this.getRandomInt(9000000000, 9999999999);
  this.email = apiResult.username + await this.getRandomInt(1000, 9999) + '@email.com';
- this.addressLine1 = apiResult.address.street_address
- this.country = 'Philippines'
- this.province = 'Pampanga'
- this.city = 'Angeles City'
- this.postalCode = '1234'
- this.workAvailability = 'Immediate'
- this.currentSalaryCurrency = 'PHP'
- this.currentSalary = '30000'
- this.expectedSalaryCurrency = 'PHP'
- this.expectedSalary = '60000'
+ this.addressLine1 = apiResult.address.street_address;
+ this.addressLine2 = apiResult.address.street_name;
+ this.country = apiResult.country;
+ this.state = apiResult.address.state;
+ this.postalCode = '' + await this.getRandomInt(1000, 9999);
+ }
+
+
+ get firstNameInput(){ return $(`//input[@id='firstname']`) };
+ get lastNameInput(){ return $(`//input[@id='lasttname']`) };
+ get emailInput(){ return $(`//input[@id='email']`) };
+ get countryCodeSelect(){ return $(`//div[@class='select']//select`) };
+ get phoneNumberInput(){ return $(`//input[@id='Phno']`) };
+ get addressLine1Input(){ return $(`//input[@id='Addl1']`) };
+ get addressLine2Input(){ return $(`//input[@id='Addl2']`) };
+ get stateInput(){ return $(`//input[@id='state']`) };
+ get postalCodeInput(){ return $(`//input[@id='postalcode']`) };
+ get countrySelect(){ return $(`//label[normalize-space()='Country']//following-sibling::div//select`) };
+ get dateOfBirthInput(){ return $(`//input[@id='Date']`) };
+ get genderRadio(){ return $(`//input[@id='male']`) };
+ get checkTerms(){ return $(`//input[@type='checkbox']`) };
+ get submitButton(){ return $(`//input[@type='submit']`) };
+
+ async inputFirstName(){
+ const elmFirstNameInput = await this.firstNameInput;
+ await this.inputText(elmFirstNameInput,this.firstName);
+ }
+
+ async inputLastName(){
+ const elmLastNameInput = await this.lastNameInput;
+ await this.inputText(elmLastNameInput,this.lastName);
+ }
+
+ async inputEmail(){
+ const elmEmailInput = await this.emailInput;
+ await elmEmailInput.clearValue();
+ await this.inputText(elmEmailInput,this.email);
+ }
+
+ async selectCountryCode(){
+ const elmCountryCodeSelect = await this.countryCodeSelect;
+ await this.click(elmCountryCodeSelect);
+ await browser.keys(this.phoneCountry);
+ await browser.keys('Enter')
+ }
+
+ async inputPhoneNumber(){
+ const elmPhoneNumberInput = await this.phoneNumberInput;
+ await this.inputText(elmPhoneNumberInput,this.phoneNumber);
+ }
+
+ async inputAddressLine1(){
+ const elmAddressLine1Input = await this.addressLine1Input;
+ await this.inputText(elmAddressLine1Input,this.addressLine1);
+ }
+
+ async inputAddressLine2(){
+ const elmAddressLine2Input = await this.addressLine2Input;
+ await this.inputText(elmAddressLine2Input,this.addressLine2);
+ }
+
+ async inputState(){
+ const elmStateInput = await this.stateInput;
+ await this.inputText(elmStateInput,this.state);
+ }
+
+ async inputPostalCode(){
+ const elmPostalCodeInput = await this.postalCodeInput;
+ await this.inputText(elmPostalCodeInput,this.postalCode);
+ }
+
+ async selectCountry(){
+ const elmCountrySelect = await this.countrySelect;
+ await elmCountrySelect.selectByVisibleText('Philippines');
+ }
+
+ async inputDateOfBirth(){
+ const elmDateOfBirthInput = await this.dateOfBirthInput;
+ await this.click(elmDateOfBirthInput);
+ await browser.keys(this.birthDate);
+ }
+
+ async selectGender(){
+ const elmGenderRadio = await this.genderRadio;
+ await this.click(elmGenderRadio);
+ }
+
+ async selectTermsAndConditions(){
+ const elmcheckTerms = await this.checkTerms;
+ await this.click(elmcheckTerms);
+ }
+
+ async clickSubmit(){
+ const elmSubmitButton = await this.submitButton;
+ await this.click(elmSubmitButton);
  }
 
 }

wdio-test/page-objects/page.ts

@@ -84,6 +84,7 @@ export default class Page {
  async getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
- return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive. ex. random 1-3 is 1 min, max 4
+ //The maximum is exclusive and the minimum is inclusive. ex. random 1-3 is 1 min, max 4
+ return Math.floor(Math.random() * (max - min) + min); 
  }
 }

wdio-test/step-definitions/form-api-steps/form-api.step.ts

@@ -1,60 +1,61 @@
 import { Given, When, Then } from '@wdio/cucumber-framework';
-
+import FormApiPage from '../../page-objects/form-api-pages/form-api.page.js';
 
 When(/^I input form first name$/, async () => {
-return true;
+await FormApiPage.initializeRandomData();
+await FormApiPage.inputFirstName();
 });
 
 When(/^I input form last name$/, async () => {
-return true;
+await FormApiPage.inputLastName();
 });
 
 When(/^I input form email$/, async () => {
-return true;
+await FormApiPage.inputEmail();
 });
 
 When(/^I select form country code$/, async () => {
-return true;
+await FormApiPage.selectCountryCode();
 });
 
 When(/^I input form phone number$/, async () => {
-return true;
+await FormApiPage.inputPhoneNumber();
 });
 
 When(/^I input form address line 1$/, async () => {
-return true;
+await FormApiPage.inputAddressLine1();
 });
 
 When(/^I input form address line 2$/, async () => {
-return true;
+await FormApiPage.inputAddressLine2();
 });
 
 When(/^I input form state$/, async () => {
-return true;
+await FormApiPage.inputState();
 });
 
 When(/^I input form postal code$/, async () => {
-return true;
+await FormApiPage.inputPostalCode();
 });
 
 When(/^I select form country$/, async () => {
-return true;
+await FormApiPage.selectCountry();
 });
 
 When(/^I input form date of birth$/, async () => {
-return true;
+await FormApiPage.inputDateOfBirth();
 });
 
 When(/^I select form gender$/, async () => {
-return true;
+await FormApiPage.selectGender();
 });
 
 When(/^I click agree to form terms and condition$/, async () => {
-return true;
+await FormApiPage.selectTermsAndConditions();
 });
 
 When(/^I click form submit button$/, async () => {
-return true;
+await FormApiPage.clickSubmit();
 });
 
 Then(/^I should be able to verify that the form is successfully submitted$/, async () => {