<<Previous Post << Complete Tutorial>> Next Post>>
ID Locators in WebDriverIO
ID Locators is used to identify an element with ID Associated with it. It is widely used in locating Elements after CSS Query Selectors.
ID Locators and ID Selectors are the similar things in WebDriverIO. It has same usage throughout to find Elements on WebPage.
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 Navigate to http://www.Selenium143.blogspot.com using Id Locator in WebDriverIO: –
Using ID Locators in WebDriverIO
First, I will demonstrate the exercise we need to perform to navigate to URL link using Id Locator in WebDriverIO, and then, followed by practically demonstrating the WebDriverIO Automation code for achieving it.
Exercise:-
1) Navigate to http://omayo.blogspot.com/
2) Find URL Link on page by ID associated with it.
3) Click on link and navigate to http://www.selenium143.blogspot.com
Practical Demonstration:
Following are the Steps to Perform above Exercise (i.e. Navigate to Selenium143.blogspot.com by clicking on URL Link using Id Locator 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 from the above-extracted ZIP file:
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 “NavigateToSelenium143BlogspotUsingIdLocator.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 Navigating to ‘Selenium143.blogspot.com’ from ‘Omayo.blogspot.com’ application:
You can understand this code, by reading the comments provided in the below code:
Copy the code from here :-
describe('Navigate to Selenium143 Blogspot using ID Locator/Selector', () => {
it('should be able to find ID of URL Link using ID Locator/Selector',() => {
browser.url('www.omayo.blogspot.com');
$('#selenium143').click(); //using Id Locator and clicking on link Simultaneously
browser.pause(3000);
});
});
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 step 6 and run below command in terminal.
.\node_modules\.bin\wdio .\wdio.conf.js
Observe that the ‘navigateToSelenium143BlogspotUsingIdLocator.js’ will get executed successfully, the Firefox Browser will launch and then the ID of URL Link http://www.selenium143.blospot.com is fetched by ID Locator and Clicked by WebDriverIO Automation code.
And also, the result will be displayed as ‘Passed’ in the terminal as shown below:
This is how we can take the help of ID Locators using WebDriverIO. I will explain other Locators/Selectors 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>>
