<<Previous Post << Complete Tutorial>> Next Post>>
Partial Link Text Locator in WebDriverIO
Partial Link Text Locator is used to get an Anchor Element with partial text in it. Or To know an Anchor Element with its partial visible text, we use Partial Link Text Locator.
Unlike Link Text Locator. Partial Link Text Locator can get an Anchor Element with Partially available text
It is used by “*= Partial Visible text of Anchor Element”
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 print Visible text of Anchor Element and clicking on it using Partial Link Text Locator in WebDriverIO: –
Using Partial Link Text Locator
First, I will demonstrate the exercise we need to perform to print visible text of anchor element using Partial Link Text Locator of WebDriverIO , print it and then clicking on it, followed by practically demonstrating the WebDriverIO Automation code for achieving it.
Exercise:-
1) Navigate to http://omayo.blogspot.com/
2) Find Visible text of one of the Hyper link on the page.
3) Print the visible text using partial link text locator with its attribute. And click on hyperlink to redirect to http://compendiumdev.co.uk/selenium/basic_web_page.html
Practical Demonstration:
Following are the Steps to Perform above Exercise (i.e. print visible text of anchor element using Partial Link Text Locator of WebDriverIO , print it and then clicking on it) 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 “printVisibleTextUsingPartial_Link_Text_Locator_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 Printing Visible text and its Attribute plus clicking on Link Using Partial Link Text Locator 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('print visible text using Partial link text locator ',() => { it('should print visible text and attributes and click on link using partial link text locator',() => { browser.url('http://omayo.blogspot.com'); var link = $('*=diumdev'); console.log(link.getText()); //output :- compendiumdev console.log(link.getAttribute('href')); output :- //http://compendiumdev.co.uk/selenium/basic_web_page.html link.click(); //open web page :- http://compendiumdev.co.uk/selenium/basic_web_page.html 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 the step 6 and run below command in terminal
.\node_modules\.bin\wdio .\wdio.conf.js
Observe that the ‘Partial_Link_text_Locator_Test’ will get executed successfully, the Firefox Browser will launch and then Partial Visible text Compendiumdev Hyperlink of webpage was fetched by Link Text Locator and Printed 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 help of Partial Link Text Locator 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>>
this article is good, but I want to ask you about this code `var link = $ (‘* = diumdev’);` , what does it mean?
@nisa :- Thanks for the words.
Explanation :- var means variable , and link is the name of the variable. i have created variable of name link to hold the locator and locator is saying that any anchor element which have partial text as diumdev should be assigned to variable link.