<<Previous Post << Complete Tutorial>> Next Post>>
WebDriverIO – Debug Command in WebDriverIO
Debug command helps you to debug your integration tests. It stops the running browser and gives you time to jump into it and check the state of your application (e.g. using dev tools).
Debug command is one of the most important command of WebDriverIO where you can interact with browser and do CRUD operation till it gets timeout.
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 change value of text area manually after setting value by setValue, using debug command of WebDriverIO.
Using Debug Command
First, I will demonstrate the exercise where we will setValue in Text area and then by the use of debug command of WebDriverIO, we will stop the browser and change Text area value manually and print its value on console, followed by practically demonstrating the WebDriverIO Automation code for achieving it.
Exercise:-
1) Navigate to http://omayo.blogspot.com/
2) Find Xpath of the Text are where we will setValue as Fool!
3) Enter Cool! in Text Area Manually then fetch value from text area and print it on console.
Practical Demonstration:
Following are the Steps to Perform above Exercise (i.e. to change value of text area manually after setting value by setValue, using debug command of WebDriverIO) 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 “Debug_Commands_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 stopping a running browser using debug command of WebDriverIO on ‘Omayo.blogspot.com’ application:
You can understand this code, by reading the comments provided in the below code:
Copy the code from here:-
describe('Debug Commands in WebDriverIO',() => {
it('should stops the running browser and lets you to check the state of your application ',() => {
browser.url('http://omayo.blogspot.com')
$('#ta1').setValue('Fool!')
browser.debug() // Go to browser and change value of #input to 'Cool!'
const value = $('#ta1').getValue()
console.log(value) // outputs: "Cool!"
});
});
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
10) Browser will open omayo.blogspot.com application and will enter Fool! in Text area, then will stop the browser till the time we press ctrl + c from our keyboard or type .exit in console.
11) Manually change the Entered Value Fool! to Cool! And Enter .exit in console so that browser start running and execute rest of the Automation code.
Observe that the ‘Debug_Commands_test.js’ will get executed successfully, the Firefox Browser will launch and then enter value Fool! in text area and stop the browser, on entering value manually as Cool! in text area and exiting from console by entering .exit browser starts running and execute the remaining Automation code andprint Cool! In console. And also, the result will be displayed as ‘Passed’ in the terminal as shown below:
This is how, we can take help of debug Command of WebDriverIO to stop the running browser and interact with the elements present on the webpage the way we want, I will explain other other commands to perform different operations on 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 ?
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>>
