To automate any type of web application there are two operations we need to perform. First identifying the element second performing actions on that web element. Each type of web element should be handled in different ways. This article will help to understand actions to be performed on different type of web elements.
Click() function
We use click function to perform operations like clicking on button, clicking on links, Clicking on checkbox and radio button.
Usage of click would look like this.
|
1 |
element(By.id("loginButton")).click(); |
sendKeys() function
sendKeys() function is used to enter the values in text box, entering file path for file upload.
Usage of sendKeys would look like this.
|
1 |
element(By.id("userName")).sendKeys(“Amit”); |
Handling select or dropdown:
In protractor dropdown can be handled by first identifying select box and then option inside it. Using click() function we can select option inside select or dropdown.
Below code would select option “Pune” inside the select box “CitySelection”
|
1 |
element(by.id("CitySelection")).element(by.xpath("//option[text()='Pune']")).click(); |
Handling multiple Elements:
Multiple elements can be identified using element.all() function.
Below code shows usage of element.all() function. Identify all the links from webpage and click on last link.
|
1 2 3 4 |
browser.element.all(by.xpath(“//a”)).then(function(Links){ var linksCount=Links.length; Links.get(linksCount).click(); }); |
Javascript Executor:
If the element is not clickable, editable and not selectable then we can use javascript executer.
Syntax:
browser.driver.executeScript(“JavaScriptCode”);
Example:
|
1 |
browser.driver.executeScript("document.getElementById('ID1').click()"); |
Actions in Protractor:
To simulate mouse actions and keyboard keys strokes we can use actions functions.
Enter the text:
|
1 |
browser.actions().sendKeys(“Text”).perform(); |
Double Click:
|
1 2 |
var Element = element(by.id(“id1”)); browser.actions().doubleClick(element).perform(); |
Mouse Move:
|
1 2 |
var Element = element(by.id(“id1”)); browser.actions().mouseMove(Element).perform(); |
Right click:
|
1 |
browser.actions().click(protractor.Button.RIGHT).perform(); |
