Merge pull request #17 from mrnjii/letcode-frame

frame scenario

Author: jimuelmedrano

package.json

@@ -22,6 +22,7 @@
  "button": "env-cmd wdio run ./wdio.conf.ts --cucumberOpts.tagExpression='@button'",
  "dropdown": "env-cmd wdio run ./wdio.conf.ts --cucumberOpts.tagExpression='@dropdown'",
  "alert": "env-cmd wdio run ./wdio.conf.ts --cucumberOpts.tagExpression='@alert'",
+ "frame": "env-cmd wdio run ./wdio.conf.ts --cucumberOpts.tagExpression='@frame'",
  "sampletag": "env-cmd wdio run ./wdio.conf.ts --cucumberOpts.tagExpression='@sampletag'",
  "test-typescript": "env-cmd npx ts-node typescript-test.ts"
  }

wdio-test/features/frame-features/frame.feature

@@ -0,0 +1,14 @@
+Feature: Letcode Frame Page
+
+ @regression @frame
+ Scenario Outline: As a user, I can input full name and email in the text field
+
+ Given I am on letcode workspace page
+ When I click frame page
+ And I go to frame and input first name <firstName> and last name <lastName> in the text field
+ And The frame full name should be combination of <firstName> and <lastName>
+ Then I should be able to input email: <email> in the inner html
+
+ Examples:
+ | firstName | lastName | email |
+ | Jimuel Renzo | Medrano | test@email.com |

wdio-test/features/input-features/input.feature

@@ -4,7 +4,7 @@ Feature: Letcode Input Page
  Scenario Outline: As a user, I can input full name in the text field
 
  Given I am on letcode workspace page
- When I click input edit button
+ When I click input page
  And I input first name <firstName> and last name <lastName> in the text field
  Then The first input field text should be equal to the combination of <firstName> and <lastName>
 
@@ -16,7 +16,7 @@ Feature: Letcode Input Page
  Scenario Outline: As a user, I can append text in the field and press tab
 
  Given I am on letcode workspace page
- When I click input edit button
+ When I click input page
  And I append the text: `<append>` inside the input field and press tab
  Then The second input field text should include the appended text: `<append>`
 
@@ -28,7 +28,7 @@ Feature: Letcode Input Page
  Scenario Outline: As a user, I can verify the text inside the input field
 
  Given I am on letcode workspace page
- When I click input edit button
+ When I click input page
  Then The third input field text should include the text: `<text>`
 
  Examples:
@@ -39,7 +39,7 @@ Feature: Letcode Input Page
  Scenario Outline: As a user, I can clear the text inside the input field
 
  Given I am on letcode workspace page
- When I click input edit button
+ When I click input page
  And I clear the text of the fourth input field
  Then The fourth input field text should be blank after clearing the value
 
@@ -51,7 +51,7 @@ Feature: Letcode Input Page
  Scenario Outline: As a user, I can verify that the input field is disabled
 
  Given I am on letcode workspace page
- When I click input edit button
+ When I click input page
  Then The fifth input field text should be disabled
 
  Examples:
@@ -62,7 +62,7 @@ Feature: Letcode Input Page
  Scenario Outline: As a user, I can verify that the input field is read only
 
  Given I am on letcode workspace page
- When I click input edit button
+ When I click input page
  Then The sixth input field text should be read only
 
  Examples:

wdio-test/page-objects/frame-pages/frame.page.ts

@@ -0,0 +1,39 @@
+import Page from '../page.js';
+
+class FramePage extends Page {
+
+ get firstNameInput(){ return $(`//input[@name='fname']`) };
+ get lastNameInput(){ return $(`//input[@name='lname']`) };
+ get contentFrame(){ return $(`//iframe[@id='firstFr']`) };
+ get innerFrame(){ return $(`//iframe[@src='innerFrame']`) };
+ get fullNameMessage(){ return $(`//p[@class='title has-text-info']`) };
+ get emailInput(){ return $(`//input[@name='email']`) };
+
+ //1. input full name and email
+ async inputFullName(firstName,lastName){
+ const elmContentFrame = await this.contentFrame;
+ await browser.switchToFrame(elmContentFrame);
+ const elmFirstNameInput = await this.firstNameInput;
+ const elmLastNameInput = await this.lastNameInput;
+ await this.inputText(elmFirstNameInput,firstName);
+ await this.inputText(elmLastNameInput,lastName);
+ await browser.pause(1000);
+ }
+
+ async checkFrameMessage(firstName,lastName){
+ const elmFullNameMessage = await this.fullNameMessage;
+ const fullName = firstName + ' ' + lastName
+ await expect(elmFullNameMessage).toHaveTextContaining(fullName);
+ }
+
+ async inputEmail(email){
+ const elmInnerFrame = await this.innerFrame;
+ await browser.switchToFrame(elmInnerFrame);
+ const elmEmailInput = await this.emailInput;
+ await this.inputText(elmEmailInput,email);
+ await browser.pause(2000)
+ }
+
+}
+
+export default new FramePage();

wdio-test/page-objects/letcode-workspace.page.ts

@@ -6,6 +6,7 @@ class LetcodeWorkspace extends Page {
  get buttonPageButton(){ return $(`//a[normalize-space()='Click']`) };
  get dropdownPageButton(){ return $(`//a[normalize-space()='Drop-Down']`) };
  get alertPageButton(){ return $(`//a[normalize-space()='Dialog']`) };
+ get framePageButton(){ return $(`//a[normalize-space()='Inner HTML']`) };
 
  async openWorkspacePage () {
  await this.open('/test');
@@ -30,6 +31,11 @@ class LetcodeWorkspace extends Page {
  const elmAlertPageButton = await this.alertPageButton;
  await this.click(elmAlertPageButton);
  }
+
+ async clickFramePage(){
+ const elmFramePageButton = await this.framePageButton;
+ await this.click(elmFramePageButton);
+ }
 }
 
 export default new LetcodeWorkspace();

wdio-test/page-objects/page.ts

@@ -34,7 +34,7 @@ export default class Page {
 
  async inputText(element: WebdriverIO.Element, text: string){
  //wait for the element to be clickable before interacting
- await element.waitForClickable({timeout: parseInt(this.elmTimeout)});
+ await element.waitForDisplayed({timeout: parseInt(this.elmTimeout)});
  await element.setValue(text);
  }
 

wdio-test/step-definitions/frame-steps/frame.step.ts

@@ -0,0 +1,14 @@
+import { Given, When, Then } from '@wdio/cucumber-framework';
+import FramePage from '../../page-objects/frame-pages/frame.page.js';
+
+When(/^I go to frame and input first name (.*) and last name (.*) in the text field$/, async (firstName,lastName) => {
+await FramePage.inputFullName(firstName,lastName);
+});
+
+When(/^The frame full name should be combination of (.*) and (.*)$/, async (firstName,lastName) => {
+await FramePage.checkFrameMessage(firstName,lastName);
+});
+
+Then(/^I should be able to input email: (.*) in the inner html$/, async (email) => {
+await FramePage.inputEmail(email);
+});

wdio-test/step-definitions/letcode-workspace.step.ts

@@ -5,7 +5,7 @@ Given(/^I am on letcode workspace page$/, async () => {
 await LetcodeWorkspacePage.openWorkspacePage();
 });
 
-When(/^I click input edit button$/, async () => {
+When(/^I click input page$/, async () => {
 await LetcodeWorkspacePage.clickInputEditButton();
 });
 
@@ -21,3 +21,6 @@ When(/^I click alert page$/, async () => {
 await LetcodeWorkspacePage.clickAlertPage();
 });
 
+When(/^I click frame page$/, async () => {
+await LetcodeWorkspacePage.clickFramePage();
+});