Skip to content

Working with WebElement

Now that we know how to locate the element from the website and extract them as WebElement, let us dive into some useful methods that we can use to simulate the user element interactions on the website.

We will cover following topic in this code note.

  • WebElement Methods




› WebElement Methods

We will cover 9 essential WebElement methods as we covered in the lecture. For a complete list of methods, please refer to the Java documentation (link). 

1
https://www.javadoc.io/doc/org.seleniumhq.selenium/selenium-api/2.50.1/org/openqa/selenium/WebElement.html

To shorten the length of each code sample, we will assume that the following driver initiating code is already typed and ready before each of the codes. 

1
2
3
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();




📓String getText( )

This method extracts the element's text content and returns it as String data. 

1
2
3
4
5
driver.get("https://trello.com");
By loc_banner = By.cssSelector("h1");
WebElement bannerElem = driver.findElement(loc_banner);
String textContent = bannerElem.getText(); // <--- code
System.out.println(textContent);           // prints: Trello helps teams move work forward.




📓void click()

This method invokes the click action on the element if it's a clickable element like a button or link. 

1
2
3
4
driver.get("https://trello.com");
By loc_login_link = By.cssSelector(".text-primary");
WebElement loginLink = driver.findElement(loc_login_link); 
loginLink.click();     // <--- code




📓void sendKeys(String text)

This method inserts string to the element if the element accepts text input from the user. 

1
2
3
4
driver.get("https://trello.com/login");
By loc_email_input = By.cssSelector("input#user");
WebElement emailInput = driver.findElement(loc_email_input);
emailInput.sendKeys("[email protected]");  // <--- code




📓void clear()

This method clears out any texts ( if present ) from the element that accepts text inputs. We will use this method to clear out texts from email & password inputs, as well as text areas. 

1
2
3
4
5
driver.get("https://trello.com/login");
By loc_email_input = By.cssSelector("input#user");
WebElement emailInput = driver.findElement(loc_email_input);
emailInput.sendKeys("[email protected]");
emailInput.click();   // <--- code




📓boolean isDisplayed()

This method is used to verify that the element is visible to the user. It will return true boolean value if the element is visible, false boolean value if the element is not visible. 

1
2
3
4
5
driver.get("https://trello.com/teams/product");
By loc_coinbase_logo = By.cssSelector("img[alt='Coinbase Logo']");
WebElement coinbaseLogo = driver.findElement(loc_coinbase_logo);
boolean visible = coinbaseLogo.isDisplayed();  // <--- code
System.out.println(visible);                   // prints:  true




📓boolean isEnabled()

This method is used to determine whether an element is interactable to the user. If the element is interactable, it will return true value, if the element is not interactable and disabled the false value will be returned. 

1
2
3
4
5
driver.get("https://webdriveruniversity.com/Dropdown-Checkboxes-RadioButtons/index.html");
By loc_cabbage_option = By.cssSelector("input[value='cabbage']");
WebElement cabbageOption = driver.findElement(loc_cabbage_option);
boolean interactable = cabbageOption.isEnabled();   //<-- code
System.out.println(interactable);                   // prints: false




📓boolean isSelected()

This method is used to determine whether an element is in the state of checked or selected by the user. You can use this method for a checkbox or radio button on a website right after you have checked them to see if its state has changed to selected. 

1
2
3
4
5
driver.get("https://webdriveruniversity.com/Dropdown-Checkboxes-RadioButtons/index.html");
By loc_pumpkin_option = By.cssSelector("input[value='pumpkin']");
WebElement pumpkinOption = driver.findElement(loc_pumpkin_option);
boolean selected = pumpkinOption.isEnabled();   //<-- code
System.out.println(selected);                   // prints: true




📓String getAttribute(String name)

An attribute is a key and value pair that helps the web developer to give identification, name, or other information to the element they are programming. Occasionally, it is necessary for a tester to print out the attribute value of the element as part of their test case. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
driver.get("https://trello.com/login");
By loc_email_input = By.cssSelector("input#user");
WebElement emailInput = driver.findElement(loc_email_input);

// -- code 
String typeAttribute = emailInput.getAttribute("type");
System.out.println(typeAttribute);  // prints: text

String classAttribute = emailInput.getAttribute("class");
System.out.println(classAttribute); // prints: form-field

All the highlighted parts of the <input> element is an attributes and the blue text enclosed in a double quotation is the attribute value. So this <input> element has over 12 attributes.




📓 String getTagName()

This method will give us the element's tag name as a String data. Tag is responsible for everything you see on the website. Picture is rendered by <img> tag, and button is displayed by <button> tag etc. Sometimes, we need to get a tag name and display them in our test. 

1
2
3
4
5
6
driver.get("https://trello.com");
By loc_signup_button = By.xpath("(//button)[2]");
WebElement signUpButton = driver.findElement(loc_signup_button);

String tagName = signUpButton.getTagName();    // <--- code 
System.out.println(tagName);                   // prints: button

As you can see, the highlighted [Sign Up] button is rendered by the <button> tag.