What is the difference between WebDriver and WebElement in Selenium? - selenium

Question

What is the difference between WebDriver and WebElement in Selenium?
Sample Code:
WebDriver driver = new FirefoxDriver();
driver.get("http://www.google.com");
WebElement s = driver.findElement(By.name("q"));
s.sendKeys("Packt Publishing");
s.submit();

Answer 1

WebDriver Interface
From Selenium's perspective, the What is the difference between ChromeDriver and WebDriver in selenium? interface is similar like a agreement which the 3rd party Browser Vendors like Mozilla, Chrome, Internet Explorer, Safari, etc have to adhere and implement the same. This would in-turn help the end-users to use the exposed APIs to write a common code and implement the functionalities across all the available browsers without any change.
WebDriver driver = new FirefoxDriver();
Through the line of code:
WebDriver driver = new FirefoxDriver();
We are creating an instance of the WebDriver Interface and casting it to FirefoxDriver class. All the Browser Drivers like FirefoxDriver, ChromeDriver, InternetExplorerDriver, PhantomJSDriver, SafariDriver etc implemented the WebDriver interface (actually the RemoteWebDriver class implements WebDriver Interface and the browser drivers extends RemoteWebDriver). So if we use WebDriver driver, then we can use the already initialized driver instance (as common object variable) for all browsers we want to automate e.g. Mozilla, Chrome, InternetExplorer, PhantomJS, Safari.
WebDriver driver = new FirefoxDriver();
driver = new ChromeDriver();
driver = new FirefoxDriver();
driver = new SafariDriver();
You can find a detailed discussion in:
Is this correct - FirefoxDriver driver = new FirefoxDriver();?
what is the difference between ChromeDriver and WebDriver in selenium?
WebElement Interface
From Selenium perspective, WebElement represents an HTML element. Generally, all the operations to do with interacting with a page will be performed through this interface.
A WebElement is an abstraction used to identify the Element nodes and are simply known as elements when it is transported via the protocol, between remote and local ends. The web element identifier is the string constant expressed as:
"element-6066-11e4-a52e-4f735466cecf"
You can find a detailed discussion in Values returned by webdrivers
Each element has an associated web element reference that uniquely identifies the element across all browsing contexts. The web element reference for every element representing the same element must be the same. It must be a string, and should be the result of generating a UUID.
An ECMAScript Object represents a web element if it has a web element identifier own property.
Each browsing context has an associated list of known elements. When the browsing context is discarded, the list of known elements is discarded along with it.
You can find a detailed discussion in Why return type of findElement(By by) is WebElement?
Some of the commonly used associated methods are as follows:
clear()
click()
findElement(By by)
findElements(By by)
getAttribute(java.lang.String name)
getCssValue(java.lang.String propertyName)
getLocation()
getRect()
getSize()
getTagName()
getText()
isDisplayed()
isEnabled()
isSelected()
sendKeys(java.lang.CharSequence... keysToSend)
submit()

Answer 2

The WebDriver class focuses on driving the browser in a broad sense. It loads pages, it switches to different windows/frames, gets the page title etc. Broad actions that aren't specific to an element on the page.
WebElement concentrates on interacting with a specific element that you've located. Things like:
Clicking that specific element
Retrieving text and other values from that specific element
Finding out where that specific element is positioned
Sending text to that specific element (like filling an input field)
The only real overlap between WebDriver and WebElement are the findElement and findElements methods. For Webdriver, these methods locate the given By anywhere on the page. For WebElement these methods locate the given By within the context of that element (inside it, generally).

Answer 3

Simple answer:
The WebDriver focuses on manipulating the browser.
The WebElement is just an Document element object like
<button></button>