WebElement and element locators

Test automation basics with Selenium & Java

By:
Evgeny Novikov
Email:
xevgnov@[Link]
What is WebElement: key terms

1) WEB page
2) DOM (document object model)
3) WebElement (button, checkbox, etc)
4) WebElement locator
5) How WebDriver can locate WebElements:
findElement(...) - to find single element
findElements(...) - to find list of elements By:
Evgeny Novikov
Email:
xevgnov@[Link]
How to find element - example
@Test
public void openGoogleComInChromeTest() {
File file = new File("src/test/resources/[Link]");
[Link]("[Link]",
[Link]());
WebDriver driver = new ChromeDriver();
[Link]().to( "[Link]
[Link]([Link]() + " page has been
opened");
WebElement searchField = [Link](By. name("q"));
searchField .click();
[Link]();
} By:
Evgeny Novikov
Email:
xevgnov@[Link]
Add code to accept google conditions of usage
@Test
public void openGoogleComInChromeTest() {
File file = new File("src/test/resources/[Link]");
[Link]("[Link]", [Link]());
WebDriver driver = new ChromeDriver();
[Link]().to("[Link]

new WebDriverWait(driver, [Link](10))

.until([Link]([Link]( "cnsw")))
;
[Link]().frame(0);
[Link]([Link]( "introAgreeButton")).click();
[Link]().defaultContent();

[Link]([Link]() + " page has been opened");

WebElement searchField = [Link]([Link]("q"));
By:
[Link]();
Evgeny Novikov
[Link]();
}
Email:
xevgnov@[Link]
How to find locator - example
1. Open target page
2. Press F12
3. Go to 'Elements'
4. Click „Select an element on the page to inspect it”
5. Click to the element
6. Element is displayed in DOM

By:
Evgeny Novikov
Email:
xevgnov@[Link]
Types of locators (By)
● id ● cssSelector
● name ● xpath
● className ● linkText
● tagName ● partialLinkText

By:
Evgeny Novikov
Email:
xevgnov@[Link]
Examples of different locators
● [Link]("lst-ib");
● [Link]("q");
● [Link]("gsfi") ;
● [Link]("input");
● [Link]("input#lst-ib") ;
● [Link]("//input[@aria-label = 'Search']") ;
● [Link]("Gmail");
● [Link]("mail"); By:
Evgeny Novikov
Email:
xevgnov@[Link]
CSS locators
1) chain of tags: 4) attribute in square brackets:
[Link]("div input") ; [Link]("input[title]") ;
2) '#' followed by id: 5) tag name, attribute with its
value:
[Link]("input#lst-ib") ;
[Link](
3) '.' followed by class value:
"input[title=’Home’]") ;
[Link]("div [Link]fi"); By:
Evgeny Novikov
Email:
xevgnov@[Link]
 XPATH locators 3) search by text:
[Link]("//*[text()='Gmail']");
1) Chain of tags with '/', '//' :
4) logical expressions like and,
[Link]("//body/input") ;
or:
2) tags, attributes and their
[Link]("//*[@name='q'] |
values:
//*[@name='btnK']") ;
[Link]("//input[@name]") ;
5) contains:
[Link]("//div/input[@aria-la [Link]("//*[contains(@class,
By:
bel='Search']") ; 'gsfi')]") ; Evgeny Novikov
Email:
xevgnov@[Link]
Characteristics of good locator
● unique on the page
● rarely changed
● fast, good performance
● easy to understand

By:
Evgeny Novikov
Email:
xevgnov@[Link]
Alternative way - chains of find methods
● One long xpath or css:
WebElement topResultRowHeader1 =
driver.findElement([Link]("//div[@class='g']//div[@class='rc']/h3"));

● Or chain of finds - find child element inside parent:

WebElement topResultRowHeader2 =
driver.findElement([Link]("//div[@class='g']"))

.findElements([Link]("rc"))
By:
.get(0).findElement([Link]("h3")); Evgeny Novikov
Email:
xevgnov@[Link]
 Open page [Link]

and write following locator using

Google chrome developer tools panel:

1) css and xpath for youtube search field

2) css and xpath for youtube search
Exercise button
3) list of elements (items) in left menu
Learn how to write xpath and css (with xpath or css)
locators 4) locator for element which have
attribute “type” containing partial text
or text “image”
By:
Evgeny Novikov
Email:
xevgnov@[Link]