Clicks, typing and reading elements

Once you can find an element, you need to use it: click it, type into it, read what it shows and check its state. These are the steps every test is made of. They look simple, but each one has a trap, and interviewers like to test the traps: typed text that does not show up in getText(), a checkbox that unticks itself, a colour that comes back in an unexpected format.

Click and type

WebElement name = driver.findElement(By.id("firstName"));
name.clear();
name.sendKeys("Asha");
driver.findElement(By.id("save")).click();

sendKeys adds to whatever is already in the field, so a pre-filled field ends up holding both values unless you call clear() first. click() acts like a user: it scrolls the element into view and clicks its centre. If the element is hidden, you get ElementNotInteractableException; if something covers it, ElementClickInterceptedException. Both tell you to wait or fix the page state.

Special keys come from the Keys class: name.sendKeys(Keys.ENTER), or Keys.chord(Keys.CONTROL, "a") to select all.

Reading text versus attributes

An attribute is a name and value written in the HTML tag, such as value="init@x.com". A property is the live value the browser keeps for the element, which changes as the user types. Selenium gives you several reads:

• getText() returns the visible text, with spaces tidied: " Hello <b>World</b> " reads as Hello World. A hidden element returns an empty string, and so does an input field.
• getAttribute("value") returns what is in an input now, including what the test typed. It returns the live property when one exists, otherwise the HTML attribute.
• getDomProperty("value") reads the live property only.
• getDomAttribute("value") reads the attribute as written in the HTML, so after typing it still shows the original value.

So "read the value typed into a text box" is getAttribute("value") or getDomProperty("value"), never getText().

CSS values and colours

getCssValue("color") returns the computed style, meaning the final value after all style rules apply. In Chrome, red text comes back as rgba(255, 0, 0, 1), not red or #ff0000. The four numbers are the red, green and blue amounts (0 to 255) and the opacity (1 means fully solid). Selenium's Color helper converts it:

String c = driver.findElement(By.id("price")).getCssValue("color");
Assert.assertEquals(Color.fromString(c).asHex(), "#ff0000");

An assertion such as Assert.assertEquals (from TestNG) fails the test when the two values differ.

State checks

• isDisplayed(): is it visible on the page?
• isEnabled(): can it be used, or is it disabled?
• isSelected(): is a checkbox ticked, a radio button chosen, an option picked?

The three are independent: a checkbox can be ticked (isSelected() true) and disabled (isEnabled() false) at the same time. A click toggles a checkbox, so tick it only when needed:

WebElement terms = driver.findElement(By.id("terms"));
if (!terms.isSelected()) {
    terms.click();
}
Assert.assertTrue(terms.isSelected(), "terms checkbox should be ticked");

Radio buttons in one group clear each other: choosing one unselects the rest. To prove a control is disabled, assert isEnabled() is false.

Tooltips and date pickers

A tooltip is the small box of text that appears when the mouse rests on something. A native tooltip comes from the title attribute and is drawn by the browser, outside the page, so read getAttribute("title"). A custom tooltip is a page element that appears on hover: hover with Actions (see Mouse, keyboard and JavaScript), wait for it to be visible (see Waits), read its text. For a date picker, type the date when the input allows it. Otherwise open the calendar, click next or previous in a loop with a limit until the header shows the target month, then click the day.

How to answer in an interview

Lead with the difference that causes bugs: getText() is what a user sees, the value is what a field holds. Then show the matching call. For state checks, name all three and give one example each. Always end a read with an assertion and a message, because a script that only prints proves nothing.

Common mistakes

• Reading an input with getText() and getting an empty string.
• Typing into a pre-filled field without clear().
• Clicking a checkbox without checking its state first.
• Comparing colours as text such as "red".
• Forcing a click with JavaScript when the real problem is timing.

Recap

Clear before typing, and let click() fail loudly when the page is not ready. Read visible text with getText() and field values with getAttribute or getDomProperty. Check state with isDisplayed, isEnabled and isSelected, and turn every read into an assertion.