HomeWebDriverIO

WebDriverIO – Handling Text Area and Text Box fields

WebDriverIO – Handling Text Area and Text Box fields

<<Previous Post                          << Complete Tutorial>>                             Next Post>>

WebDriverIO – Handling Text Area and Text Box fields

Pre-requisite: Have ‘Visual Studio Code’ IDE installed in your machine (Click here to install if not installed in your machine)

Here is the small Exercise to Handle Text Area and Text Box fields in Webpages using WebDriverIO: –

WebDriverIO-Handling Text Area

First, I will demonstrate the exercise we need to perform to automate handling Text Area and Test Box fields using WebDriverIO, followed by practically demonstrating the WebDriverIO Automation code for achieving it.

Exercise:-

  1. Navigate to http://omayo.blogspot.com/

2. Select Text Area Field and Write something inside the text field

3. Now Append text inside the text field

4. Now Write Altogether new words inside the text box with predefined text.

Practical Demonstration:

Following are the Steps to Perform above Exercise (i.e. Handling Text Area and Text Box) using WebDriverIO Automation code in ‘Visual Studio Code’ IDE:

Pre-requisite: Download the Project from here (Click here to Download) and Unzip it.

  1. Open Visual Studio Code on your system.

2. Click on File and Select Open Folder. Select the project folder on which your workspace is present.

3. Expand ‘test’ from the Explorer, right click on the displayed ‘specs’ and select ‘New File’ option as shown below:

4. Give any name of the newly created file say “HandleTextArea_test.js” and copy the below-given code into the newly created file as shown below and save the file:

The following is the WebDriverIO sample code for Entering Text in Text Area and Text Box fields on ‘Omayo.blogspot.com’ application:

You can understand this code, by reading the comments provided in the below code:

Copy the code from here:-

const assert = require('assert'); describe('Handle TextBox', () => { 
it('should handle text area/text box on webpages', ()=> {
    browser.url('http://omayo.blogspot.com/'); 
    $('#ta1').addValue('Test') //Writing Test to Text Area on WebPage
    $('#ta1').addValue('_Data') //Appending _Data to already written text in Text Area
    $('#textbox1').setValue('Test WebDriver')//Writing Test WebDriver to text box with predefined text 
    browser.pause(5000);
   }); 
});

5. Click on ‘wdio.conf.js’ to open in the IDE, and make sure the Test file name is updated properly in this file as shown below and save it:

6. Click on Terminal and Open New Terminal.

7. By Default, Powershell Terminal will open as shown below:

8. Run geckodriver.exe in the Powershell terminal as shown below to run Geckodriver in background.

9. Open Another Terminal in the same way we did in the step 6 and run below command in terminal

.\node_modules\.bin\wdio .\wdio.conf.js

Observe that the ‘HandleTextArea_test.js’ will get executed successfully, the Firefox Browser will launch and the required  Text Area will be selected and values have been written in the text area in the browser by WebDriverIO Automation code.

And also, the result will be displayed as ‘Passed’ in the terminal as shown below:

This is how we can handle the Text Area and Text Box Field options using WebDriverIO. I will explain handling other different UI elements on the webpages using WebDriverIO in the upcoming articles.

Next Steps:

> To learn more about WebDriverIO, continue to the next post (Click on Next Post link below)

> Check complete WebDriverIO Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning ?

About Me > Ajay Lunia 

Connect to me on LinkedIn (Click here)

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                          << Complete Tutorial>>                             Next Post>>

Comments (2)

  • Hi Ajay & Arun,

    Can you please let me know how to perform these tests in Chrome browser.

    I tried the following and see an error:
    Installed chrome driver
    I updated the Browser Name as chrome in the config>Capabilities section
    I see the following error:
    The test fails immediately after launching the Chrome browser.

    @wdio/local-runner: Failed launching test session: TypeError: ReporterClass is not a constructor

    Details are listed below:
    Execution of 1 spec files started at 2019-07-02T17:57:52.847Z

    2019-07-02T17:57:53.101Z INFO @wdio/cli:Launcher: Run onPrepare hook
    Starting ChromeDriver 75.0.3770.8 (681f24ea911fe754973dda2fdc6d2a2e159dd300-refs/branch-heads/3770@{#40}) on port 9515
    Only local connections are allowed.
    Please protect ports used by ChromeDriver and related test frameworks to prevent access by malicious code.
    2019-07-02T17:57:53.702Z INFO @wdio/local-runner: Start worker 0-0 with arg:
    [0-0] RUNNING in chrome – C:\Users\aaaa\Desktop\Login\test\specs\test_login.js
    [0-0] 2019-07-02T17:57:55.010Z INFO @wdio/local-runner: Run worker command: run
    [0-0] 2019-07-02T17:57:55.353Z INFO webdriver: [POST] http://127.0.0.1:9515/session
    [0-0] 2019-07-02T17:57:55.354Z INFO webdriver: DATA { capabilities:
    { alwaysMatch: { browserName: ‘chrome’ }, firstMatch: [ {} ] },
    desiredCapabilities: { browserName: ‘chrome’ } }

    DevTools listening on ws://127.0.0.1:49597/devtools/browser/3a849780-64e0-4698-b76d-0675623c83e0
    [0-0] 2019-07-02T17:58:00.595Z ERROR @wdio/local-runner: Failed launching test session: TypeError: ReporterClass is not a constructor
    at BaseReporter.initReporter (C:\Users\aaa\Desktop\Login\node_modules\@wdio\runner\build\reporter.js:202:14)
    at Array.map ()
    at new BaseReporter (C:\Users\aaa\Desktop\Login\node_modules\@wdio\runner\build\reporter.js:44:39)
    at Runner.run (C:\Users\aaa\Desktop\Login\node_modules\@wdio\runner\build\index.js:91:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    [0-0] FAILED in chrome – C:\Users\aaa\Desktop\Login\test\specs\test_login.js
    2019-07-02T17:58:00.616Z INFO @wdio/cli:Launcher: Run onComplete hook

    Spec Files: 0 passed, 1 failed, 1 total (100% completed) in 00:00:07

    Reply
  • Hi Sowmi,

    Did you followed the above tutorial and got this error ?

    Trouble shooting steps :-

    1) Please check you have installed the correct version of node js and npm which has been told to install in earlier tutorials

    2) Have you replaced chrome inplace of firefox at wdio conf file ?

    3) Did you tried to run selenium stand alone server ?

    Kindly let me know about above questions. so that i can help you with troubleshooting of your encountered issues.

    Kind Regards,
    Ajay Lunia

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

For FREE Testing Tutorials & Videos

X
Open chat
Contact Us on Whatsapp